认识标题标题 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 中的外边距。