aside 是语义化标签，表示与主内容相关但可移除的补充信息；其使用取决于移除后主内容是否仍完整可理解，需通过 css 布局实现视觉侧边效果，并添加 aria-label 提升可访问性。
aside 不是“侧边栏容器”，而是语义声明：它告诉浏览器、搜索引擎和屏幕阅读器——这段内容与主文有关联，但删掉它，主文依然成立、逻辑自洽。
aside 的语义边界：什么能放，什么不能放
判断是否该用 aside，只看一条标准：移除后，主内容是否仍完整可理解？
- ✅ 可放：文章旁的作者简介、术语解释卡片、相关代码示例、推荐阅读列表、引用来源说明
- ❌ 禁放：主导航（该用 nav）、登录表单（该用 form）、页脚信息（该用 footer）、全站广告横幅（语义弱、SEO 风险高）
- ⚠️ 注意：即使视觉上在右边，若内容与当前上下文无关（比如食谱页里塞天气预报），也不该用 aside
aside 的嵌套位置决定服务范围
它不是靠 class 或 CSS 定义“属于谁”，而是靠 DOM 层级绑定语义。
- 放在 article 内：只服务这篇文章，比如某篇教程旁的“兼容性备注”
- 放在 body 下、与 main 并列：服务整页，如右侧热门文章列表或分类导航
- 不能跨 article 复用：一个 aside 不能同时为两篇不同文章提供补充信息
让它“靠边”的关键不在标签，在 CSS
aside 默认就是普通块级元素，和 p、div 行为一致。要视觉上出现在侧边，必须靠现代布局控制。
- 推荐用 display: grid：父容器设
grid-template-columns: 1fr 260px，main 占第一列，aside 显式指定grid-column: 2 - 也可用 display: flex：父容器设
display: flex; gap: 1.5rem，aside 设flex: 0 0 260px - 绝对避免 float：易塌陷、响应式难控、无障碍支持差
- 移动端必须加
@media (max-width: 768px)，把 aside 设为display: block并自然流到 main 后方，否则会横向溢出
可访问性不能漏：给 aside 加 aria-label
屏幕阅读器默认只读 “complementary landmark”，用户不知道里面是什么。
- 给 aside 加
aria-label="相关链接"或aria-label="作者简介"，明确其作用 - 内部链接建议用语义化结构包裹，比如
<ul><li><a>…</a></li></ul> - 不要把 aside 塞进 header、footer、nav 或 main 里——它必须是 article、section 或 body 的直接子元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
