aside 作为文章目录必须嵌套在 article 内且为直接子元素，包裹在 nav 中，语义上属于全文导航；CSS 应用 flex 或 grid 布局控制位置，小屏下需回归流式布局并确保可访问性。
aside 作为文章目录时，必须嵌套在 article 内部
直接把 aside 放在 main 外层或和 main 并列，会导致语义断裂——它就不再是“这篇文章的目录”，而变成“整页的辅助内容”。浏览器、读屏器、搜索引擎都会认为这个目录和当前文章无关。
正确结构是：article 包裹整篇文章（含标题、正文、目录），aside 是它的直接子元素，且紧跟在 header 或首段之后：
<article> <header><h1>如何用 fetch 处理错误</h1></header> <aside><h2>本文目录</h2><nav><ul>...</ul></nav></aside> <section><h2>基础用法</h2><p>...</p></section> </article>
-
aside不能放在section或div里，否则语义范围被压缩到那个区块，而非全文 - 目录本身应包裹在
nav中（因为它是导航链接集合），nav可以合法出现在aside内 - 删掉整个
aside后，article仍需能独立传达完整信息——目录只是快捷入口，不是内容本身
目录 aside 的 CSS 必须用 flex/grid，禁用 float 和 position
写了 aside 但目录还在正文下方？不是标签没生效，是它默认就是块级元素，和 p 一样垂直堆叠。要让它靠右（或左侧），必须用现代布局控制父容器（即 article）：
- 推荐
display: flex：article { display: flex; flex-direction: row; gap: 1.5rem; }，再设aside { flex: 0 0 240px; }，主内容区域（如第一个section或包裹正文的div）设flex: 1 - Grid 更精准：
article { display: grid; grid-template-columns: 1fr 240px; gap: 1.5rem; }，然后aside { grid-column: 2; }，其余内容用grid-column: 1 - 绝对不要用
float: right——article容器会塌陷，后续内容上浮进目录区；也别用position: absolute，会让目录脱离文档流，读屏器可能跳过 - 必须显式设宽度（
flex-basis或width），否则窄屏下目录可能撑破容器或文字折行混乱
小屏下目录必须自然下移，不能 display: none
移动端强行保留右侧目录，轻则横向滚动，重则文字重叠、点击错位。更严重的是，用 display: none 隐藏目录等于告诉搜索引擎和读屏器“这不存在”，尤其当目录含锚点链接时，会切断可访问性路径。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
正确响应式写法是让 aside 在小屏回归流式布局：
@media (max-width: 768px) {
article {
display: block;
}
aside {
width: 100%;
margin-top: 1.5rem;
order: 2; /* 确保它出现在正文之后 */
}
}- 不依赖
display: flex或grid，改用block+margin让它自然沉到主内容下方 - 用
order控制 DOM 顺序无关的视觉位置（比如 HTML 中aside写在前面，但小屏要放最后） - 避免用
visibility: hidden或opacity: 0——它们仍占用空间或被读屏器读取，语义未断但体验错乱
目录内容本身要语义合规，不能塞导航以外的东西
aside 里放目录，只应包含指向本文锚点的链接（a[href^="#"]），以及必要的标题（如 h2）。混入其他类型内容会污染语义边界：
- 允许：
nav+ul+ 锚点链接；简短说明（如“点击跳转至对应章节”） - 禁止：全站搜索框、用户登录入口、广告 banner、无关的“热门文章”列表——这些不属于本文附属信息，该用
section、form或页面级aside - 警惕“伪目录”：用 JavaScript 动态生成的目录若没同步写入 DOM 锚点（如
id="section-2"），会导致链接失效，且 SEO 无法索引 - 如果目录项超过 10 条，考虑加折叠逻辑（
details/summary），但折叠状态需通过 CSS 控制，不能靠 JS 移除 DOM 节点
最易忽略的一点：目录的 h2 标题不是装饰，它是语义层级的一部分。删掉它，aside 就只剩一堆无上下文的链接，读屏器会朗读为“链接、链接、链接……”，失去导航意义。
