为什么不能嵌套在里？
因为语义冲突——
常见错误现象：main被包裹在header中，DevTools 里看到元素层级正常，但 Lighthouse 可访问性检测报“main not at top level”警告，SEO 工具提示主内容权重被稀释。
- 每个 HTML 文档只能有一个
main，且必须是body的直接子元素或仅嵌套在article内 - 若用 JS 动态插入内容到
main，记得同步设置aria-live="polite"，否则屏幕阅读器不触发播报 - IE 不支持
main，需用document.createElement('main')或 polyfill，但更推荐用div role="main"兜底
flex-wrap + min-width 防塌陷的实际写法
单纯设 display: flex 和 flex-wrap: wrap 不够，子项没最小宽度限制，小屏下会被压扁甚至文字强制换行，破坏卡片/按钮组的视觉完整性。
关键不是“加了 flex 就自动响应”，而是控制子项收缩底线：
- 给 flex 子项设
min-width: 280px或min-width: 15rem（后者适配字体缩放） - 避免对 flex 容器同时设
width: 100%和max-width: 1200px：前者让容器撑满视口，后者又截断内容，小屏下出现横向滚动条 - 安卓部分 WebView 对
flex-direction: column-reverse支持不稳定，会导致键盘焦点顺序与 DOM 顺序不一致，慎用
加 width/height 属性防抖动
图片加载前若没预留空间，加载瞬间会把下方内容往下顶，尤其在卡片流、列表页中明显破坏滚动节奏——这不是 JS 问题，是 HTML 层面的布局缺失。
srcset 和 sizes 解决分辨率适配，但不解决占位问题：
- 必须为
<img>或<picture></picture>设置width和heightHTML 属性（非 CSS） - 例如：
<img src="a.jpg" style="max-width:90%" style="max-width:90%">，浏览器据此计算 aspect ratio，提前分配空间 - 若用 CSS 控制尺寸（如
width: 100%; height: auto），仍需配合aspect-ratio: 16/9或 padding-top hack 补位
移动端断点别只写 768px
硬套像素值断点，在高 DPI 设备或用户调大系统字号时失效。内容撑不住才是真实触发条件，不是屏幕宽多少。
优先用 em 写断点，基于字体尺寸而非设备像素：
-
@media (min-width: 48em)等价于 48 × 用户默认字号（通常 16px → 768px），能随系统缩放自适应 - 断点应由内容决定：导航栏第 5 项开始换行？此时设断点切汉堡菜单；侧边栏文本行宽超 85 字符？触发单列布局
- 避免嵌套媒体查询，统一用移动优先写法：基础样式写小屏，再用
min-width逐级增强，漏掉中间状态的风险更低
语义标签和响应式逻辑不是“加了就完事”的装饰，它们在 DOM 构建阶段就决定了渲染路径、可访问性树结构和 JS 操作边界——这些地方一旦出错，后面所有 CSS 动画和 JS 交互都只是在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
