长文排版核心是建逻辑骨架：H1唯一前置定主旨，H2平级划模块，H3/H4限三层内自然延展，语义与样式分离，禁用无语义标题模拟。

长文排版不是堆标题，而是建骨架。核心原则是：用层级表达逻辑关系，而非视觉节奏；用语义锚定内容结构，而非靠字号制造“重点感”。复杂不等于嵌套深，而在于模块清晰、路径可溯。

主干必须唯一且前置：H1 定位整页主旨

H1 只能有一个，必须出现在主内容区开头附近，精准概括全文核心。例如技术文档页，H1 应是“React 19 中 useActionState 的使用与边界”，而不是“开发者文档”或网站名。SPA 路由切换时需动态更新 H1 文本，不能靠 CSS 隐藏旧标题——服务端首屏 HTML 必须含有效 H1，否则爬虫和读屏器首次加载就失去锚点。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

模块划分靠 H2，同级并列不嵌套

每个一级内容区块（如“背景”“实现原理”“代码示例”“注意事项”）都以 H2 开头，彼此平级。H2 不是“小一号的 H1”，而是独立的信息单元，能被单独理解。禁止在 H1 后跳过 H2 直接写 H3；也禁止把多个 H2 套进一个 div 再统一封装——结构扁平才利于导航。检查方式很简单：打开 Chrome DevTools → Elements → 搜索

，确认它们都直接隶属于 H1 下，且顺序连续。

细分控制在三层内，H4 及以下慎用

H3 仅用于 H2 下的自然延展，比如在“代码示例”H2 下，可设“客户端调用”H3、“服务端响应”H3；再往下若需展开，“错误处理流程”可用 H4，但仅限必要场景。真实项目中，H5/H6 几乎不用——法律条文、API 参数表等极细分文档除外。嵌套超三层（如 H2→H3→H4→H5）会显著增加认知负荷，尤其对注意力障碍用户。真需要更细颗粒度？优先用

、

或带语义 class 的

，而非硬塞标题标签。

立即学习“前端免费学习笔记（深入）”；

语义与样式彻底分离，标题不是视觉工具

可以用 CSS 把 H3 设得比 H1 还大，只要 DOM 层级正确，辅助技术仍能准确解析结构。但绝不能用

或 模拟标题——语义为零，SEO 和无障碍全失效。起步建议重置默认样式：
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; }
强调句用 ，副标题必须有上层标题支撑，否则就是语义断裂。