[HTML][新手] 05. 文字標籤 h1~h6, p 與 span
[HTML][新手] 05. 文字標籤 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..代表層級較低的標題。
<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比較像是一個行內元素，那這兩個有甚麼差別呢?
<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來顯示看看：
<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，我們來試看看吧：
<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呢?
<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>以便查看效果：
<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>以便查看效果：
<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粉絲團按讚喔!!
圖文系列教學: HTML 新手網站基礎教學
進度條編輯群