main 必须是 body 的直接子元素且仅含主内容，否则辅助技术因语义冲突忽略它；article 用于可独立理解的内容并需带标题，section 仅为逻辑分组；标题须按层级连续使用，h1–h6 不可跳级；nav、aside、time 等需正确语义化以保障大纲完整性。
main 必须唯一且直接包裹核心内容，否则浏览器和屏幕阅读器生成的大纲会断裂或跳过主体——这不是样式问题，是结构失效。
为什么 main 放错位置会导致大纲“消失”
很多页面把 main 套在 div class="wrapper"> 里，或者让它包裹 nav、aside。结果是：辅助技术直接忽略整个 main 区域，因为语义冲突（main 表示“用户要操作的唯一主内容”，而导航/侧边栏显然不是）。
- ✅ 正确写法：
main是body的直接子元素，内部只含文章标题、正文、评论入口等不可删减内容 - ❌ 错误写法：
<div class="layout"><main>...</main></div>—— 这会让大纲生成器把main当作普通容器，不提升层级权重 - ⚠️ 注意：
main内可以有多个article，但每个article不能再嵌套main
article 和 section 混用时，大纲层级怎么崩的
错误常出现在博客列表页：把每篇文章都用 section 包裹，结果大纲里看不到独立文章节点——因为 section 不自带大纲锚点，它只是逻辑分组；而 article 才是大纲生成器识别“可独立分发单元”的关键标签。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 判断标准很实在：把这块内容单独复制出来，还能不能被理解？能 → 用
article；不能 → 用section -
article必须带标题（h1–h6），否则部分读屏器不会将其纳入导航树 -
section如果没配标题，就等于“无意义分块”，会被大纲生成器跳过或合并
标题层级（h1–h6）错位后，大纲直接变平
常见错误是全局 h1（网站名）之后，文章主标题用 h2，导致大纲里没有“文章”这一级节点。浏览器和 SEO 工具会认为内容缺失主干，降权或跳过索引。
- 单篇文章页中，
article内部的标题应从h1开始，哪怕页面已有全局h1—— 因为article创建了新的大纲上下文 - 禁止跳级：
h1后直接h3，中间层级丢失，读屏器无法构建完整导航路径 -
h1不是“最大字号开关”，改样式请用 CSS 类；语义和视觉必须分离
time、nav、aside 这些小标签漏掉，大纲细节就残缺
大纲不只是标题树，还包括可跳转的语义区块。比如没用 nav 包主导航，屏幕阅读器就无法一键跳到菜单；没用 time datetime="2024-03-15"，发布日期对机器就是纯文本，无法提取结构化数据。
-
nav只包真正起导航作用的链接（顶部菜单、左侧栏目），页脚友情链接不用它 -
aside不等于“右边栏”，而是指与主内容相关但可分离的信息（如“作者简介”“相关推荐”） -
time必须带datetime属性，格式为YYYY-MM-DD或完整 ISO 8601，否则机器不可读
真正难的不是记住每个标签怎么写，而是每次敲下 <div> 前，先问一句：这块内容如果剥离所有样式，还剩下什么含义？</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
