HTML 的 <h1> 到 <h6> 不是字号控制工具，而是语义层级标记 —— 用错会直接破坏可访问性、SEO 和屏幕阅读器体验。
什么时候该用 <h1>？
一个页面有且仅有一个 <h1>，它必须准确表达整个页面的核心主题。不是“网站名”，也不是“欢迎来到首页”，而是比如“订单确认”“404 页面未找到”“Python 字符串方法速查”。<h1> 被跳过或重复，会导致搜索引擎降权、盲人用户无法快速定位主内容。
- 错误做法：
<h1>MyBlog</h1>放在页眉，每个页面都一样 - 正确做法：
<h1>如何用 <code>fetch()处理 401 错误</h1>（文章页）；<h1>用户登录</h1>（表单页） - SPA 应用需在路由切换后用 JS 动态更新
<h1>内容，不能靠 CSS 隐藏再显示
<h2>～<h6> 必须严格嵌套
标题层级不是“我想要多大字号就用多大标签”，而是反映内容逻辑结构：子章节必须比父章节低一级。跳级（如 <h2> 后直接写 <h4>）会让辅助技术完全混乱，Chrome DevTools 的 Accessibility 面板会标红警告。
- 允许：
<h2>→<h3>→<h4> - 禁止：
<h2>→<h4>（中间缺<h3>） - 禁止：
<h3>出现在<h2>之前（即没父级就先写子级） - CSS 可以重置所有标题的视觉样式，但语义层级不能靠
font-size模拟
别用标题标签做样式 hack
把 <h3> 当小号加粗文字、<h6> 当备注说明，是前端最常踩的坑。浏览器默认样式只是参考，实际渲染由 CSS 控制，但语义已固化 —— 屏幕阅读器仍会读作“heading level 3”，用户听到一堆“标题三级”毫无上下文。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：普通
<p>+font-weight: bold或<span class="label"> - 如果真需要强调某段文字的“副标题”属性，用
<h2>并确保它上面有<h1>，下面有对应内容区块 - 组件库中常见问题：
Card组件内部硬编码<h3>，导致嵌套时层级断裂
SSR/静态站生成器里的常见断裂点
Next.js、Nuxt、Hugo 等框架在生成 HTML 时，容易把布局组件中的 <h1>（如页眉 Logo）和页面内容的 <h1> 同时输出，造成重复。这并非模板语法错误，而是语义职责没切分清楚。
- Layout 文件里不要放
<h1>，用<div role="banner">或纯<header> - 页面组件（Page Component）负责提供唯一的
<h1>，并通过getStaticProps或setup()动态注入 - JSDOM 测试环境可能不校验标题层级，但 Lighthouse 和 axe 插件会立刻报
document-title和heading-order错误
真正难的不是写对标签，而是在组件拆分、动态路由、CMS 内容混排时，始终让每个 <h1>～<h6> 都能回答“它在整页结构里处在哪一层、为什么是这一层”。
