main不能嵌套header，因其语义为页面唯一主内容区，嵌套会误导浏览器和读屏器视为独立文档，导致导航混乱与seo权重分散；正确做法是全局header置于main外层。

用

划分全局区域时，为什么

不能嵌套

因为 main 的语义是“页面唯一主内容区”，它本身不带头尾结构；如果在 main 里再放 header，等于暗示这个“主内容”还有自己的独立页眉——这违背了语义层级。浏览器和读屏器会把它理解成嵌套文档，导致导航跳转混乱、SEO 权重分散。

常见错误现象：main 里出现 header + h1 + 内容，结果搜索引擎把 h1 当作子页面标题索引，主页面标题反而被弱化。

• 正确做法：全局 header 放在 main 外层，main 内部直接用 h1 或 section + h2 表达内容层级
• 例外情况：只有当 section 或 article 自身构成完整可独立分发的单元（比如一篇博客），才允许其内部包含局部 header
• 检查方法：用 Chrome 开发者工具 → Elements 面板右键元素 → “Accessibility” 标签，看 main 是否被识别为“landmark”，且无嵌套 landmark 冲突

用

分块时，漏掉

到

标题会有什么后果

section 不是装饰性容器，它是有语义的“主题区块”。W3C 明确要求：每个 section 必须有标题（h2–h6），否则它就退化为普通 div，辅助技术无法识别其结构意图，SEO 也不会赋予额外权重。

使用场景：产品介绍页拆成「功能亮点」「技术参数」「用户评价」三块，每块用 section 包裹，但第二块忘了加 h3 —— 这块内容在屏幕阅读器中会直接接续上一块的末尾朗读，中间无停顿、无上下文提示。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 性能影响：无直接性能损耗，但可访问性 API 调用失败率上升，部分合规检测工具（如 axe）会报 landmark-no-label 错误
• 替代方案：若真无合适标题，改用 div + aria-labelledby 指向附近可见文本，但不如原生标题可靠
• 注意：article 同样强制要求标题，aside 和 nav 则不要求（因其语义已明确）

Flexbox 布局中，main 和 aside 并排却错位，常见原因是什么

错位往往不是 CSS 写错了，而是 HTML 结构没对齐。Flex 容器只对**直系子元素**生效，如果 main 和 aside 被包在额外的 div 里，或者中间夹了注释、空格文本节点，它们就不再是 flex 项目的同级关系。

错误示例：<div class="layout"> <!-- 注释 --><main>...</main><aside>...</aside> </div> —— 注释会被当作文本节点计入 flex 子项，导致 main 和 aside 实际排在第 2、3 位，宽度计算异常。

• 排查步骤：打开开发者工具 → Elements → 选中 flex 容器 → 看右侧“Computed”面板里的 flex-direction 和子元素数量是否匹配预期
• 安全写法：确保 main 和 aside 是容器的直接子元素，中间无注释、无空格换行（或用 <!-- --> 替代换行）
• 兼容性提醒：IE11 对 flex: 1 解析不稳定，建议显式写 flex: 1 1 0 避免收缩异常

Grid 布局用 grid-template-areas 时，如何避免移动端失效

grid-template-areas 是字符串声明，空格和换行都算分隔符。如果媒体查询里只改了 grid-template-areas 值但没同步更新子元素的 grid-area，或者字符串里多了一个不可见空格，整个 grid 就会回退到默认流式布局——看起来像“失效”，其实是语法错误触发降级。

典型错误：@media (max-width: 768px) { .container { grid-template-areas: "header" "nav" "main" "aside" "footer"; } } —— 字符串末尾多了空格，或 aside 元素没设置 grid-area: aside，导致该区域空白。

• 验证技巧：在 DevTools 中 hover grid-template-areas 属性，Chrome 会高亮显示每个命名区域对应的实际元素；若某区域无高亮，说明 grid-area 值不匹配
• 参数差异：桌面端用 "header header nav nav" "main main aside aside"，移动端必须严格按单列顺序写，且所有区域名必须存在，不能留空格占位
• 容易忽略的点：Grid 区域名区分大小写，Header 和 header 是两个不同区域

实际项目里，最常被跳过的不是怎么写，而是写完后有没有用无障碍检测工具跑一遍 DOM 结构。语义标签一旦嵌套错位或标题缺失，后期补救成本远高于初始设计时多花两分钟核对。

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