認(rèn)識(shí)標(biāo)題標(biāo)題 H 標(biāo)簽

我們這一章節(jié)所說(shuō)的標(biāo)題標(biāo)簽，和我們之前講的 title 標(biāo)簽并不是同一個(gè)意思，我們這一章節(jié)說(shuō)的標(biāo)題標(biāo)簽，是指在網(wǎng)頁(yè)上定義標(biāo)題，如文章的標(biāo)題，段落的標(biāo)題等，而 title 標(biāo)簽特指網(wǎng)頁(yè)的標(biāo)題。所有，當(dāng)我們需要給文章或者段落定義標(biāo)題時(shí)，就需要用到 H 標(biāo)簽了。 H 標(biāo)簽分為 H1、H2、H3、H4、H5、H6，H1 位超大標(biāo)題，然后依次遞減，H6 為最小的標(biāo)題。

1. H 標(biāo)簽的作用

H 標(biāo)簽直觀的告訴用戶，網(wǎng)頁(yè)哪部分是重要的，哪些是不那么重要的。H 標(biāo)簽通常用來(lái)為用戶展現(xiàn)網(wǎng)頁(yè)的結(jié)構(gòu)，由于 H 標(biāo)簽通常會(huì)使某些文字比普通的文字大，對(duì)于用戶來(lái)說(shuō)，便于他們更直觀地看出這些文字的重要性，而且可以幫助他們理解標(biāo)題文字下方的內(nèi)容。多種漸變大小的標(biāo)題一開(kāi)始主要為網(wǎng)頁(yè)的內(nèi)容創(chuàng)建分層結(jié)構(gòu)，便于用戶直觀地瀏覽網(wǎng)站。
當(dāng)我們需要在頁(yè)面上，特別是為文章或段落定義標(biāo)題時(shí)，我們就需要用 H 標(biāo)簽了。例如：

而 HTML 給我們提供了從 H1 - H6 6 個(gè)選擇，讓我們可以超大標(biāo)題到超小標(biāo)題自由選擇，可以適應(yīng)各種場(chǎng)景。

2. H 標(biāo)簽的用法

H1 - H6 標(biāo)簽都為雙標(biāo)簽，所以必須有首尾標(biāo)簽。例如：

  <h1>我是h1標(biāo)簽</h1>
  <h2>我是h2標(biāo)簽</h2>
  <h3>我是h3標(biāo)簽</h3>
  <h4>我是h4標(biāo)簽</h4>
  <h5>我是h5標(biāo)簽</h5>
  <h6>我是h6標(biāo)簽</h6>

那么在頁(yè)面上會(huì)呈現(xiàn)以下效果：

3. H 標(biāo)簽的特點(diǎn)

1. H 標(biāo)簽和 P 標(biāo)簽一樣，也是塊級(jí)元素，所以也會(huì)默認(rèn)占一整行；
2. H 標(biāo)簽有默認(rèn)樣式：字體大小和字體粗細(xì)，所有標(biāo)題標(biāo)簽的字體均為加粗的字體，且字體大小會(huì)隨 H6-H1 逐漸增大；
3. H 標(biāo)簽上下也有間距（CSS 中的外邊距）。

例如：

4. 注意事項(xiàng)

1. H 標(biāo)簽通常用來(lái)標(biāo)題，但是如果想定義文本加粗的內(nèi)容，也可以使用 H 標(biāo)簽代替；
2. H 標(biāo)簽有默認(rèn)樣式，如果想清楚該樣式，必須借助 CSS 為其設(shè)置屬性；
3. H1、H2、H3、H4、H5、H6 作為標(biāo)題標(biāo)簽，并且依據(jù)重要性遞減。遵循這樣的原則是很有必要的，它能讓頁(yè)面的層級(jí)關(guān)系更清楚，讓搜索引擎更好地抓取和分析出頁(yè)面的主題內(nèi)容等等；
4. H1 標(biāo)簽在一個(gè)頁(yè)面中只能使用一次，因?yàn)樗砹隧?yè)面的主標(biāo)題（這相當(dāng)于一篇文章不會(huì)有很多主標(biāo)題一樣），但是 H2 到 H6 標(biāo)簽可以使用多次，不過(guò)建議都是用一次，多次使用會(huì)稀釋權(quán)重。使用 H1 關(guān)鍵詞的時(shí)候，不要讓題頭失去可讀性，內(nèi)容要能概括文章主題，要考慮讀者的感受。

5. 真實(shí)案例分享

騰訊新聞

<h1>習(xí)近平地方考察中，強(qiáng)調(diào)的重點(diǎn)內(nèi)容有哪些</h1>

網(wǎng)易云音樂(lè)

<h1><a>網(wǎng)易云音樂(lè)</a></h1>

6. 小結(jié)

1. H 標(biāo)簽均為雙標(biāo)簽，必須具有首尾標(biāo)簽；
2. H 標(biāo)簽從 H1 開(kāi)始，H6 結(jié)束，字體均為加粗，H1 標(biāo)簽字體最大，H6 標(biāo)簽字體最??；
3. H 標(biāo)簽均為塊級(jí)元素，既默認(rèn)占一整行，自帶換行效果；
4. H 標(biāo)簽均有上下邊距，既 CSS 中的外邊距。