标题标签是语义骨架而非字号开关，必须逐级使用且每个页面仅一个<h1>；跳级、重复或滥用会破坏SEO与可访问性，样式应交由CSS控制。
标题标签不是字号开关，是语义骨架
HTML 的 <h1> 到 <h6> 不是用来调大字体的——那是 CSS 的事。它们是告诉浏览器、搜索引擎和屏幕阅读器“这段文字在整页内容里排第几级”的结构信号。
比如你写一个食谱页：<h1> 只能是“苹果派食谱”这一个主题；<h2> 是“食材准备”“制作步骤”这类一级分块；<h3> 才该出现在“制作步骤”下面，比如“揉面团”“预热烤箱”。跳着用（比如 <h1> 后直接 <h4>）会让所有机器解析出错：SEO 抓不到大纲，盲人用户听到的目录是断的。
- 每个页面只用 1 个
<h1>：它代表页面唯一核心，多一个就稀释权重 - 必须逐级使用：从
<h1>→<h2>→<h3>……不能跳，也不能倒着用 - 别用
align属性居中/对齐：HTML5 已不支持，改用 CSS 的text-align
浏览器默认样式只是参考，不是标准
Chrome、Firefox 默认让 <h1> 显示为 2em，<h2> 是 1.5em，但这只是渲染习惯，不是语义规则。你完全可以用 CSS 把 <h6> 设成比 <h1> 还大，只要结构没乱，机器照样认得清。
真正要警惕的是：不同浏览器对 margin 和 line-height 的默认值有细微差异，所以项目起步时建议重置：
立即学习“前端免费学习笔记（深入）”；
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }
- 不要依赖默认大小判断层级是否合理——检查 DOM 结构，而不是眼睛看
- 移动端尤其要注意：某些旧版 iOS Safari 对
<h6>的行高处理异常，若真要用，加line-height: 1.2显式声明 -
<h6>使用率仅占全部标题的 5%，多数场景根本用不到；真需要极细颗粒度，优先考虑用<dl>或语义化 class
SEO 和可访问性怎么被标题悄悄影响
爬虫不是读字，是读结构。<h1> 文本几乎 100% 被当成本页关键词主干；<h2> 是次级锚点，常出现在搜索结果摘要里。如果把“联系我们”这种通用模块设成 <h1>，等于告诉 Google：“这页核心就是联系我”，内容再丰富也白搭。
- 关键词自然融入
<h1>和<h2>，但别堆砌，比如“苹果派 苹果派做法 苹果派食谱”会被判定为 spam - 屏幕阅读器按标题层级生成导航菜单，跳级或重复
<h1>会导致用户迷失在语音目录里 - 用浏览器开发者工具的「Accessibility」面板，右键检查标题节点，能立刻看到它被识别为第几级结构元素
常见错误现场还原
这些不是“写法不对”，是结构逻辑崩了：
❌ 错误：为了视觉上小一点，把副标题写成 <h4>，而它实际是 <h2> 下的第一层子模块
✅ 正确：保持 <h3>，然后用 CSS 控制字体大小和间距
❌ 错误：文章列表页里每篇文章都套一个 <h1>
✅ 正确：列表页的 <h1> 是“最新文章”，每篇用 <h2>；点进单篇后，那篇才拥有自己的 <h1>
- 用
<p>+font-size模拟标题？语义全丢，SEO 归零，无障碍失效 - 用
<div class="title-h2">替代<h2>？DOM 树里没有 heading 节点，爬虫和读屏器直接忽略 - 后台 CMS 自动生成标题时，务必校验是否意外插入多个
<h1>——这是线上最隐蔽的 SEO 漏洞之一
标题结构一旦写错，修复成本远高于样式；它不像颜色或间距，改完就能看见效果——它是藏在机器理解底层的逻辑线，断了就得重理整页骨架。
