aside是标记可删掉也不影响主内容完整性的附属信息的语义容器；判断标准唯有一条：删除后主内容是否仍表意完整、逻辑自洽，适用于术语解释、作者简介等弱关联补充，禁用于导航、页脚等全局结构。

aside 不是“做侧边栏的标签”，它是标记“可删掉也不影响主内容成立”的附属信息的语义容器。

什么时候该用 aside 而不是 div

只看内容逻辑，不看位置或样式。删掉整个 aside 块后，主内容是否依然表意完整、逻辑自洽？

• ✅ 适合：aside 包裹某篇技术文章里的“浏览器兼容性说明表”、“术语解释卡片”、“本文作者的其他两篇相关文章”
• ❌ 不适合：全局导航菜单、页脚版权栏、右侧固定客服浮窗、纯广告位（无上下文关联）
• ⚠️ 容易误判：把“视觉上在右边”的所有区块都塞进 aside——这会让屏幕阅读器错误播报为“附属内容”，也干扰 SEO 对主干结构的识别

aside 嵌套在 article 里 vs 放在 body 顶层

作用域由父元素决定，不是由 CSS 浮动或 flex 排列决定的。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 嵌在 article 内：语义上仅服务于该篇文章，比如某篇博客正文里的“引用来源”或“背景时间线”
• 放在 body 下、与 main 并列：属于全站级附属信息，例如首页右上角的“本周热门话题”或“编辑推荐”栏
• 不能跨层级混用：比如在 section 外、article 内又放一个独立 aside，会模糊其归属关系，让语义变得模糊

aside 需要配合 CSS 才能“看起来像侧边栏”

浏览器对 aside 的默认渲染就是普通块级元素（display: block），没有任何浮动、宽度或定位效果。

• 必须手动写 CSS 控制布局，比如 float: right、flex 子项或 grid-area
• 不要指望加了 aside 就自动右对齐——没样式就和 div 渲染效果完全一样
• 响应式场景下尤其要注意：小屏时强行保持“侧边栏”布局反而损害可读性，建议用媒体查询重排，而非硬撑视觉结构

最常被忽略的一点：语义错位比样式错位更难修复。一旦把导航栏、登录框之类结构性内容塞进 aside，后续做无障碍适配或 SEO 优化时，得回溯整页 HTML 重构，而不是改几行 CSS 就能解决。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！