認識標題標題 H 標簽

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

1. H 標簽的作用

H 標簽直觀的告訴用戶，網頁哪部分是重要的，哪些是不那么重要的。H 標簽通常用來為用戶展現網頁的結構，由于 H 標簽通常會使某些文字比普通的文字大，對于用戶來說，便于他們更直觀地看出這些文字的重要性，而且可以幫助他們理解標題文字下方的內容。多種漸變大小的標題一開始主要為網頁的內容創建分層結構，便于用戶直觀地瀏覽網站。
當我們需要在頁面上，特別是為文章或段落定義標題時，我們就需要用 H 標簽了。例如：

而 HTML 給我們提供了從 H1 - H6 6 個選擇，讓我們可以超大標題到超小標題自由選擇，可以適應各種場景。

2. H 標簽的用法

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

  <h1>我是h1標簽</h1>
  <h2>我是h2標簽</h2>
  <h3>我是h3標簽</h3>
  <h4>我是h4標簽</h4>
  <h5>我是h5標簽</h5>
  <h6>我是h6標簽</h6>

那么在頁面上會呈現以下效果：

3. H 標簽的特點

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

例如：

4. 注意事項

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

5. 真實案例分享

騰訊新聞

<h1>習近平地方考察中，強調的重點內容有哪些</h1>

網易云音樂

<h1><a>網易云音樂</a></h1>

6. 小結

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