HTML h1~h6 语法
在 HTML 中，h1~h6 标签用于定义网页中的标题。
语法：
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>说明：
h1~h6 这 6 个标签在页面中的重要性是有区别的，其中 h1 标签的重要性最高，h6 标签的重要性最低。
一个页面一般只能有一个 h1 标签，而 h2 到 h6 标签可以有多个。其中，h1 表示的是这个页面的大标题。就像写作文一样，你见过哪篇作文有两个大标题吗？但是，一篇作文却可以有多个小标题。
此外，屏幕阅读器（盲人辅助工具）也会利用 h1~h6 标签来生成网页大纲，帮助视障用户快速导航。正确使用标题对于网站的无障碍访问是至关重要的。
注意: h1~h6 标签不仅仅是为了改变文本的字体大小，更重要的是它们在 SEO（搜索引擎优化）中起了非常重要的作用。搜索引擎会根据 h1~h6 标签来理解页面的主题和内容的层次结构。
HTML h1~h6 摘要
| 属于 | HTML 标题 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML h1~h6 示例
接下来，我们通过一个简单的例子来讲解一下 HTML h1~h6 标签是如何使用的。
示例：h1~h6 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>
</body>
</html>页面效果如下图所示。
分析：
从页面效果可以看出，标题标签的级别越大，字体也越大。标题标签 h1~h6 也是有一定顺序的，h1 用于大标题，h2 用于二级标题，……，以此类推。在一个 HTML 页面中，这 6 个标题标签不需要全部都用上，而是根据你的需要来决定。
h1~h6 标题标签看起来很简单，但是在搜索引擎优化中却扮演着非常重要的角色。
新手容易踩的 “坑”
虽然标题标签看着非常简单，但在使用的时候是特别讲究的，我们应该特别注意以下几点。
1. 语义优先
不要仅仅为了让字体变大或加粗，而使用标题标签！比如有些初学的小伙伴会这样想：“我想让这行字大一点，所以我套个 h3。”这种想法是错误的。
如果你只是想调整一下样式，我们应该使用 CSS 来控制，而不是使用 HTML 标签来控制。
2. 不要 “跳级”
HTML 标题应该像楼梯一样一级一级往下走，中间不要跳级。如果出现跳级，可能会受到搜索引擎（SEO）的惩罚。
<!--正确-->
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<!--错误-->
<h1>这是标题</h1>
<h2>这是标题</h2>
<h4>这是标题</h4>3. 一个页面建议只有一个 h1
虽然 HTML5 标准允许在一个页面中使用多个 h1，但在实际开发和 SEO 优化中，一个页面只使用一个 h1 才是最佳实践。
- h1：代表页面的核心主题（类似于作文的题目）。
- h2~h6：代表页面的各个板块（类似于作文的段落小标题）。
HTML 标题的常见问题
1. 有些初学者很容易将 title 标签和 h1 标签搞混，认为网页不是有 title 标签来定义标题吗？为什么要用 h1 标签呢？
title 标签和 h1 标签是不一样的。title 标签用于显示地址栏的标题，而 h1 标签用于显示文章的标题，如下图所示。
