选对h1–h6的关键是按内容父子关系嵌套而非字号：页面仅一个h1锚定主题，h2–h6逐级从属，禁跳级倒序；动态渲染需校验level为1–6整数；语义与样式分离，禁用div模拟标题。
选对 h1 到 h6 的关键是让 DOM 层级真实反映内容的父子关系，不是看字号大小，而是看“谁属于谁”。一个页面只有一个 h1，它必须直指当前页核心主题；后续标题必须严格按逻辑嵌套，不能跳、不能倒、不能绕。
h1 必须唯一且锚定页面意图
首页用“品牌名 + 主定位”，文章页直接用文章标题，产品页写具体产品名称。避免在页眉、轮播图、侧边栏里各自塞一个 ——这会让搜索引擎和读屏器失去焦点。服务端首屏 HTML 里就要有它，不能等 JS 加载完再插入。
h2–h6 按实际从属关系逐级使用
每个 h2 应是 h1 的直接子模块（比如“订单确认”页下的“收货信息”“支付方式”“订单明细”）；每个 h3 必须隶属于某个 h2（如“收货信息”下的“收件人”“电话”“地址”）；h4 及以下只在真有四级以上逻辑时才出现。
- 允许：
→
→
→
→
→
- 禁止：
→
→
→
动态渲染时 level 值必须安全可控
React/Vue 中用
- 起步建议重置默认样式：h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; }
- h5 和 h6 在绝大多数业务场景中不该出现；真要用，需满足：存在四级以上嵌套逻辑 + 移动端显式声明
line-height: 1.2
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
