HTML标题标签至是语义化层级而非样式工具，必须严格逐级嵌套、每页仅一个且位于主内容区，样式应全部交由CSS控制。
标题层级不是字号开关，是语义骨架
HTML 的 <h1></h1> 到 <h6></h6> 不是用来“把字调大一点”的——那是 font-size 的事。它们是向浏览器、搜索引擎和屏幕阅读器声明：“这段文字在整页内容中排第几级”。比如你写一篇产品说明页：<h1></h1> 只能是“XX 无线耳机使用指南”，<h2></h2> 是“开箱与配件”“首次配对”“电池维护”，每个 <h2></h2> 下再用 <h3></h3> 展开细节（如“按住电源键 5 秒”）。跳着用（<h1></h1> 后直接 <h4></h4>）会导致 SEO 抓不到大纲，盲人用户听到的导航目录是断的。
每个页面只允许一个 <h1></h1>，且必须出现在主要内容区
这不是建议，是解析器事实：Google、NVDA、JAWS 都把首个 <h1></h1> 当作页面唯一核心主题。常见错误包括：
- 在页眉重复写
<h1>公司名称</h1>+ 主内容区又一个<h1>文章标题</h1>—— 权重被稀释，SEO 掉权 -
<h1></h1>写在<header></header>或广告位里，而正文用<h2></h2>开头 —— 机器判定“页面没主干” - 用构建工具（如 Vite 插件）自动生成
<h1></h1>，但模板里又手写一个，最终 HTML 里出现两个
检查方法：打开浏览器开发者工具，Ctrl+F 搜 <h1>，确认全文只有一处，且包裹的是当前页面最核心的主题文本。</h1>
<h2></h2>–<h6></h6> 必须逐级嵌套，不能跳跃或倒置
结构必须是 <h1></h1> → <h2></h2> → <h3></h3> → ……，不能 <h2></h2> 后直接 <h5></h5>，也不能 <h3></h3> 出现在 <h1></h1> 后面却没 <h2></h2>。原因很实际：
立即学习“前端免费学习笔记（深入）”；
- 辅助技术依赖 DOM 树深度判断逻辑关系，跳级会让屏幕阅读器报出“无上下文的子节”
- 部分旧版 Safari 和 IE 对非连续层级的渲染不一致，
<h3></h3>可能被当成<h2></h2>渲染（尤其当 CSS 重置了 margin） - 静态站点生成器（如 Hugo、Astro）的 TOC（目录）插件会直接忽略跳级标题，导致右侧导航栏缺失条目
真实场景示例：文档页中，“API 参考”是 <h2></h2>，其下的 “GET /users” 是 <h3></h3>，再下的 “请求参数” 和 “响应示例” 就该是 <h4></h4> —— 级别跟着信息粒度走，不是跟着视觉需要走。
样式交给 CSS，别碰 align 或内联 style
<h1 align="center"></h1> 在 HTML5 中已废弃，Chrome 120+ 会忽略，且 W3C 验证器直接报错。所有外观控制必须用 CSS：
- 居中：用
text-align: center或margin: 0 auto（配合width或max-width） - 字号/行高/间距：统一用
font-size、line-height、margin-block，避免混用margin-top/margin-bottom - 重置默认差异：不同浏览器对
<h3></h3>的margin默认值可能差 4px，项目起步时加一条* { margin: 0; }或用现代 reset（如 modern-normalize）
真正容易被忽略的是：当你用 CSS 把 <h6></h6> 设得比 <h1></h1> 还大时，只要结构没乱，SEO 和可访问性依然满分——机器看的是标签名，不是像素值。
