<main>标签必须且只能出现一次，须直接位于<body>下、与<header><footer><nav>同级并列，仅包裹当前页面独有核心内容，重复或嵌套会导致Lighthouse报错、屏幕阅读器识别错乱及SEO权重稀释。
<main></main> 必须唯一且直接包裹首屏核心内容，否则关键资源调度失效、SEO 权重稀释、辅助技术识别错乱。
为什么 <main></main> 不能嵌套或重复
浏览器和爬虫依赖 <main></main> 唯一性做关键路径判断：Lighthouse 会报“Multiple <main></main> elements”错误；屏幕阅读器默认只朗读第一个 <main></main>；服务端渲染 hydration 时若存在多个，document.querySelector('main') 返回的节点可能不是预期区域。
- 一个页面中只能有一个
<main></main>，且不应被<div class="wrapper"> 或 <code><section></section>包裹 - 若需分区块，用
<section></section>或<article></article>作为<main></main>的直接子元素 - 动态插入内容（如 tab 切换）时，避免用 JS 创建第二个
<main></main>，改用aria-live+role="region"替代 - 不兼容 IE，但 2026 年绝大多数项目已无需支持
- 注意：该属性会让伪元素
::before/::after失效，且无法设置 background、border 等装饰属性
display: contents 什么时候能替代无意义的包裹层
当你要用 CSS Grid 或 Flex 布局，又不想破坏语义结构时，display: contents 是比 <div class="container"> 更干净的选择——它让父元素不生成盒模型，子元素直接参与父容器的布局流，同时保留原有语义层级。
<ul>
<li>适用场景：<code><header></header> 内部需要 Grid 对齐 logo 和 nav；<nav></nav> 下用 Flex 排列菜单项但不想多一层 DOM
Grid 布局中 grid-template-areas 的命名陷阱
区域名不是随便起的字符串，必须是合法 CSS 标识符：不能含空格、斜杠、中文、连字符（除非转义），否则整个声明被忽略，回退到普通文档流。
立即学习“前端免费学习笔记（深入）”；
- 正确：
grid-template-areas: "header nav" "main main" "footer footer"; - 错误：
grid-template-areas: "page-header top-nav"（含连字符）、"页头 导航"（含中文） - 区域名大小写敏感，
Header和header被视为不同区域 - 每个区域名在模板中出现次数不限，但必须与实际元素的
grid-area值完全一致
语义标签 + 关键 CSS 内联为何常失效
内联样式白写了，往往是因为 HTML 结构和 CSS 选择器对不上——比如你给 <header></header> 写了内联关键样式，但实际 HTML 里写的是 <div class="header">。
<ul>
<li>关键 CSS 提取必须基于真实 DOM 结构：先写语义标签，再据此提取对应选择器</li>
<li>避免用类名覆盖语义标签样式，例如 <code>header.header 这种冗余写法，既削弱语义又增加 specificity 冲突风险
<div id="header">，而客户端 hydrate 时才替换为 <code><header></header>，内联样式会短暂错位甚至 FOUC
真正难的不是选哪个标签，而是让每个标签在 DOM、CSS、JS、辅助技术和 SEO 四个层面都保持行为一致——稍有偏差，协同就断链。
