说到标题，是不是第一时间就想到了 Word 中的标题，如下图：
在Word 中，标题是搭建文档结构化骨架的核心，既能明确内容层级、提升阅读与导航效率，又能支撑格式统一、自动生成目录等自动化排版操作，同时增强文档协作性与可访问性。
在 HTML 中效果也是一样的，合理使用标题可以让你的文章内容层次清晰，提升阅读体验。如下图，是 SheetJS 的官方文档，其中黑色、加粗、字体很大的都是标题
注意，HTML 提供了 6 级标题，从 <h1> 到 <h6>，其中 <h1> 级别最高（字体最大、权重最重），<h6> 级别最低（字体最小、权重最轻）。
所有标题标签都是双标签（闭合元素），必须包含开始标签和结束标签，且支持嵌套少量行内元素（如 <strong>）。
浏览器会给标题标签默认设置不同大小的字体和上下外边距（自动换行，独占一行），无需额外配置即可实现层级区分。
标题可以在视觉上区分内容层级，让用户快速抓取页面重点。语义上帮助搜索引擎（SEO）理解页面核心内容（<h1> 通常用于页面唯一核心标题，如网站名称、文章标题）。
例如：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>下面是一个示例，自己动手试一试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<!-- 1级标题：页面核心标题，一个页面建议只使用1个<h1>，提升SEO效果 -->
<h1>我的前端学习笔记（核心标题）</h1>
<!-- 2级标题：一级分类标题 -->
<h2>一、HTML基础</h2>
<!-- 3级标题：二级子分类标题 -->
<h3>1.1 HTML文档结构</h3>
<h3>1.2 HTML核心元素</h3>
<!-- 4级标题：更细致的子分类 -->
<h4>1.2.1 标题元素</h4>
<h4>1.2.2 段落元素</h4>
<!-- 5级、6级标题：用于更深入的内容层级（实际开发中较少使用） -->
<h5>补充说明：标签使用规范</h5>
<h6>注意：避免滥用高等级标题</h6>
</body>
</html>运行效果：
更多HTML知识继续阅读后续教程……
川公网安备51010802032098