HTML5 结构标签在 PDF 生成中基本无效，因 PDF 工具不解析语义，仅处理 DOM 与 CSS；需依赖显式 CSS（如 break-before、bookmark-level）或工具专用语法实现排版与目录功能。
HTML5 结构标签在 PDF 生成时基本无效，绝大多数 工具 只把它们当普通容器处理，不保留语义或自动应用样式。
为什么
、
、
在 PDF 里没反应
PDF 不是 浏览器，不解析 HTML 语义；主流转换工具（如 wkhtmltopdf、WeasyPrint、Puppeteer）默认只读取 DOM 结构和 CSS，忽略元素的语义类型。比如
和
在渲染结果上完全等价。
- wkhtmltopdf 0.12.x 及更早版本：完全无视 HTML5 标签，连基础样式都不识别
- WeasyPrint 52+：能识别标签名，但仅用于 CSS 选择器匹配（如
article {margin: 1em;}），不触发任何内置排版逻辑 - Puppeteer + Chrome：渲染效果最接近浏览器，但导出 PDF 时仍丢失语义元数据（如无障碍属性、文档大纲）
想让 PDF 有章节结构？得靠显式 CSS 或工具专用标记
生成带目录、页眉页脚、分章的 PDF，不能依赖 HTML5 标签本身，而要结合 CSS 或工具扩展语法。
- 用
@page和break-before: page控制分页：section {break-before: page;} - WeasyPrint 支持
bookmark-level生成 PDF 大纲：h1 {bookmark-level: 1;} section h2 {bookmark-level: 2;} - wkhtmltopdf 需通过
--outline参数 +
- Puppeteer 无法直接导出带书签的 PDF，需先生成含
pdf-lib）注入大纲
兼容性陷阱：别在 CSS 里过度依赖 HTML5 标签选择器
某些旧版转换器对 HTML5 标签的 CSS 支持不完整，容易导致样式失效或布局错乱。
立即学习 “ 前端免费学习笔记（深入）”；
- wkhtmltopdf 0.12.6 不支持
nav a:hover这类组合选择器中的 HTML5 标签名，必须写成div.nav a:hover并加 class - 部分工具会把未知标签（如
）当作内联元素处理，导致display: block不生效，需强制重置：main, article, section {display: block;} - 如果用 CSS Grid/Flex 布局配合
真正起作用的是你写的 CSS 规则和工具接受的标记扩展，不是 HTML5 标签名字本身。别指望加个
就自动跑到每页底部，那得靠 @page :first {@bottom-center { content: "……"} } 或工具专属指令。
