h1到h6是定义内容逻辑层级的语义结构标签，非样式工具；h1唯一且表核心主题，h2–h6须逐级嵌套、不可跳级，视觉样式应由css控制。
h1 到 h6 是结构标签，不是样式工具
它们定义的是内容层级，不是“把字变大”或“加粗显示”的快捷方式。浏览器默认加粗+缩放只是辅助呈现，真正起作用的是语义——搜索引擎、屏幕阅读器、开发者工具都依赖这个层级判断内容主次。
常见错误现象：h1 套着 h3 写“小标题”，或者用 h2 当按钮文字；结果是 SEO 权重错配、无障碍访问失败、后期维护时找不到逻辑起点。
- 每个页面只应有且仅有一个
h1，它必须表达整个页面的核心主题（比如文章标题、产品主名称、仪表盘总览） - 不要跳级：从
h1→h2→h3逐层下降，禁止h1直接跟h4 - 不用
h1～h6控制视觉效果——字号、颜色、间距全部交给 CSS 的font-size、color、margin
h2 通常用于一级内容区块划分
在博客页、文档页、后台系统中，h2 是最常被复用的标题级，承担“章节”或“功能模块”的语义角色。
使用场景举例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 文章页：
<h1>JavaScript 闭包详解</h1>下紧跟<h2>什么是闭包？</h2>、<h2>闭包的内存泄漏风险</h2> - 管理后台：
<h2>用户列表</h2>、<h2>权限配置</h2>、<h2>操作日志</h2> -
h2不一定出现在h1后面——比如首页没有全局h1，直接用多个h2并列做导航入口（需确认设计是否允许无h1）
h3–h6 适合嵌套细节，但别硬凑
h3 还算常用，尤其在长技术文档里表示子节；h4～h6 实际项目中出现频率极低，多数时候用 <p></p> + CSS 类就足够了。
容易踩的坑：
- 为“看起来更细”而强行用
h5包裹一个短词，比如<h5>注意</h5>——这属于语义滥用，应该用<strong></strong>或自定义类 - 用
h6模拟 footnote 或注释文本，但搜索引擎和读屏器会把它当成“内容标题”处理，干扰主线理解 -
h4及以下在移动端小屏上默认字号已接近正文，视觉区分弱，若真需要强调，优先调 CSS 而非升标题级
检查标题结构是否合理，比写对标签更重要
真实项目里，标题层级混乱往往不是因为不会写 h1，而是没想清楚信息架构。一个页面改版前，建议先手绘或用工具画出标题树：
- 根节点只能是 1 个
h1 - 每个
h2应该能独立概括其后所有内容 - 任意
h3必须隶属于某个h2，不能悬空 - 如果发现某段内容既不适合
h2也不适合h3，大概率它根本不该是标题，而是段落、列表或带图标的说明块
复杂点在于：同一套 HTML 在 CMS、SSG、前端框架中可能被动态拼接，h1 容易被模板层和内容层重复注入；上线前务必用浏览器开发者工具的“无障碍”面板或 Lighthouse 扫描标题流是否断裂或重复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
