直接用aside更合理，因其原生表达“与主内容相关但可独立存在”的语义，提升SEO与可访问性；但需配合flex或grid布局控制视觉位置，且必须设flex-basis等属性防止窄屏撑破容器。
侧边栏用 aside 还是 div？语义和布局都得兼顾
直接用 aside 更合理——它原生表达“与主内容相关但可独立存在”的语义，对 SEO 和屏幕阅读器友好。但别指望它自动浮动或固定宽度，浏览器默认样式几乎为零，必须手动加 CSS。如果只图省事写成 div，后续想加无障碍支持或被爬虫正确识别时就得返工。
实操建议：
- 结构上把侧边栏放在
main外层同级，而非嵌套进main里，避免语义混乱 - 用
display: flex或display: grid控制整体布局，别依赖float（已过时且易塌陷） - 移动端优先：侧边栏默认收起，用媒体查询在 ≥768px 时展开
flex 布局中侧边栏宽度怎么设才不挤占商品列表？
常见错误是给侧边栏写死 width: 200px，结果商品区文字换行错乱、图片被压缩。更稳妥的方式是用 flex-basis + flex-shrink 组合控制弹性行为。
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.layout {
display: flex;
}
aside {
flex: 0 0 240px; /* 不放大、不缩小、基准宽240px */
}
main {
flex: 1; /* 剩余空间全给商品区 */
min-width: 0; /* 防止内容溢出导致 flex 崩溃 */
}注意：min-width: 0 很容易被忽略，但商品卡片里如果有长链接或未断行文本，没它就会撑破容器。
商品卡片用 article 标签，但每个字段该用什么语义化标签？
别全堆 div。标题用 h3（按层级接上级 heading），价格必须包在 span 里并加 aria-label="价格"，图片必须有 alt 属性——哪怕只是“蓝色T恤”，也不能留空或写“图片”。
典型结构片段：
<article> <h3>纯棉圆领T恤</h3> <img src="tshirt.jpg" alt="蓝色纯棉圆领T恤正面图"> <p>经典版型，透气亲肤</p> <span aria-label="价格">¥89.00</span> </article>
为什么强调这个？搜索引擎和读屏软件靠这些标签理解内容权重；用户粘贴网页到微信时，h3 和 img 的 alt 文本会作为摘要显示。
侧边栏筛选项交互失效？检查这三处 DOM 和事件绑定
常见现象：点击“价格区间”按钮没反应，或选完分类后商品不刷新。问题往往不在 JS 逻辑，而在 HTML 结构松散。
排查重点：
- 所有筛选控件（
input[type="checkbox"]、select）必须有name属性，否则 FormData 无法收集值 - 不要用
onclick写内联事件，改用addEventListener绑定到父容器（委托处理），避免动态增删选项后事件丢失 - 侧边栏里的
form标签不能遗漏，否则提交时浏览器不会触发submit事件
复杂点在于：筛选状态要同步更新 URL 参数（方便分享和返回），但很多人直接改 window.location.href 导致页面重载——其实该用 history.pushState() 配合前端渲染，这个边界容易被跳过。
