進度條

我們在找人喔!進度條徵兼職「WordPress與PHP開發者」

有興趣參加進度條的新專案嗎?進度條誠徵「初階 - 遠端兼職」WordPress與PHP開發者。詳情可參考這個連結(請點我)。

[HTML][新手] 05. 文字標籤 h1~h6, p 與 span

[HTML][新手] 05. 文字標籤 h1~h6, p 與 span

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. 文字標籤 h1~h6, p 與 span (所屬課程)


以下正式開始文章


接下來正式進入了<body>的部分囉!也就是網頁正文的部分。

 

 

用brackets開啟檔案

a.一次開起一個資料夾

首先,我們先來熟悉一下如何用Brackets開起一個資料夾,我們可以從側邊點擊Getting Started後按Open Folder… 開啟之前建立好的資料夾。

 

 

或者是按上邊的File→Open Folder開起一個資料夾,通常一個專案會有除了HTML以外,還會有CSS、JavaScript、圖片等檔案,所以一次通常開起整個專案會比較容易操作。
 

 

點擊我們的專案資料夾後按下Open。

 

 

b.一次開起一個檔案

如果只有一個檔案的話,按下File→Open 點擊單一檔案,

 

 

例如資料夾的index.html,點擊後按下Open鍵,
 


這樣就能把之前建立好的index.html檔給開起了!
 

 

文字標籤H1~H6

接下來我們來看一下文字標籤H1~H6的用法,那甚麼是H1~H6呢?簡單來說你可以先想預設好的文字大小,H1是最大,H6是最小,通常H1代表標題,H2代表副標題,對於一些搜索引擎來說,一個頁面裡最好只用一個 H1,因為H1是最高層級的標題,而H2、H3..代表層級較低的標題。
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1>Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
    </body>
</html>


輸出結果:

 

 

你會發現說瀏覽器會幫你預設好字體的大小。如果你今天用的是別的framework(例如bootstrap),它可能顯示的就是不同的字級。而H1~H6的字體大小是可以被修改的,因此,對於搜尋引擎來說,H1~H6的意義比起字體大小更重於層級,那你可能會想,如果這樣我是不是把每個標題都設成H1就好了呢?這樣的方式可能會讓google認為是惡意的,而有一些懲罰機制(讓你的網站排名下降或者更慘的是搜尋不到)。所以,最好的方式就是一個網頁只有一個H1,也不要太多的H2或H3以免權重被分散。

 

文字標籤p與span

p就是指paragraph,也就是段落的意思,span比較像是一個行內元素,那這兩個有甚麼差別呢?

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1>Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p>
        <span> Test </span>
    </body>
</html>

 

輸出結果:

 

 

乍看之像好像沒甚麼變化,這兩個有甚麼差別呢?如果我們再分別將<p><span>多打一遍,並用Test2來顯示看看:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1>Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p><p> Test2 </p>
        <span> Test </span><span> Test2 </span>
    </body>
</html>

 

輸出結果:

 

 

你會發現<p>被隔成了兩行,但是<span>還是只有一行,因為<p>的特性是block,就是一個區塊,而<span>是一個inline(行內元素)。

 

利用CSS更改預設值

如果你不喜歡HTML標籤裡面的預設值,譬如剛剛H1~H6的大小字體顏色,或是<p><span>是區塊或行內元素等等,我們都可以透過CSS去改變,也就是說HTML比較像一個骨架,寫出基本的結構,而CSS比較像一個裝潢,讓你的內容在排版方面瀏覽起來更加舒適或具有特色。

增加CSS方法是在HTML第一個標籤後面按下空格,並鍵入style="欲修改的樣式",譬如我們想把H1變的超大,我們可以寫style="font-size: 100px;",font-size是CSS預設的語法,代表字體大小,一般word的正常閱讀字體約12px-16px,我們來試看看吧:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2>Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p>
        <span> Test </span>
    </body>
</html>


輸出結果:

 

 

H1確實被我們改的超大。那如果我強制讓H1、H2改成一樣的size呢?  

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2 style="font-size: 100px;">Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test </p>
        <span> Test </span>
    </body>
</html>

 

輸出結果: 

 

 

答案是可以的,這時候你就會發現H1~H6預設的大小都可以被調整了。

再來是<p><span>,我們也可以用另一個CSS改它的block(區塊元素)或inline(行元素),我們可以用display這個預設語法,而<p>的預設是block,<span>的預設是inline,那我們利用語法<span style="display: block;"> span</span>將<span>改成block,為了區別方便,我們設兩個<span>以便查看效果:
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2 style="font-size: 100px;">Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test sdasdas</p>
        <span style="display: block;"> span</span>
        <span style="display: block;"> span2</span>
    </body>
</html>

 

輸出結果: 

 

 

<span>的預設行內元素(inline)經過CSS的調整變成了區塊(block)元素。<p>也可以利用<p style="display: inline;">p inline</p>改成inline,為了區別方便,我們同樣設兩個<p>以便查看效果:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的新HTML專案</title>
    </head>
    <body>
        <h1 style="font-size: 100px;">Test </h1>
        <h2 style="font-size: 100px;">Test </h2>
        <h3>Test </h3>
        <h4>Test </h4>
        <h5>Test </h5>
        <h6>Test </h6>
        <p> Test sdasdas</p>
        <span style="display: block;"> span</span>
        <span style="display: block;"> span2</span>
        <p style="display: inline;">p inline</p>
        <p style="display: inline;">p inline</p>
    </body>
</html>

 

輸出結果:  

 

 

<p>也可以變成inline了!從這裡我們可以知道我們可以利用CSS語法改變html的預設設定,也就是說有時候不一定看到某個標籤,就認為一定是某種屬性,這些都是可以被改變的。

 

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊