语义化HTML是CSS、JS、浏览器调度和SEO协同优化的前提；main元素具备原生识别能力，支持快速定位、首屏优化与SEO，而div.main需额外匹配，延迟至少一个渲染周期。
语义化 HTML 本身不提速，但它是让 CSS、JS、浏览器调度和 SEO 真正协同的前提——没这层结构，所有优化都像在迷雾里调参数。
为什么 <main></main> 比 div.main 更容易做首屏优化
浏览器对 <main></main> 有原生识别能力：解析阶段就能标记“这是主内容区”，配合 fetchpriority="high" 或服务端 SSR hydration 跳过非关键区域，能减少主线程阻塞。而 div.main 需要 JS 或 CSS 类名匹配，晚至少一个渲染周期。
-
<main></main>是唯一支持document.querySelector('main')原生快速定位的语义节点，CSS 关键样式内联时必须与它对齐，否则内联失效 - 搜索引擎和 Lighthouse 把
<nav></nav>、<aside></aside>视为低优先级，会延迟渲染或跳过快照生成，降低首屏 LCP 压力 - 用
<picture></picture>+<source media></source>包裹在<section></section>内时，媒体查询在 HTML 解析阶段就生效，避免等 CSSOM 构建完才加载图片
display: contents 什么时候该用、什么时候不该用
它让父元素不参与盒模型，但子元素语义保留——适合需要 Grid/Flex 布局又不想破坏语义层级的场景，比如把 <header></header> 当作纯语义容器，实际布局由子元素撑开。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 适用：用
<article></article>包裹标题+正文+时间，但想让标题和正文并排布局，可给article设display: contents，再用article > *做 Grid - 慎用：如果子元素依赖父元素的 stacking context（如 z-index、opacity），
display: contents会抹掉该上下文，导致遮挡异常 - 不能用于替换可访问性角色：比如把
<nav></nav>改成display: contents后，屏幕阅读器可能丢失导航意图信号
嵌套超过 4 层就该警惕性能拐点
DOM 节点数每增加 1000，V8 编译耗时平均上升 12ms；深度超 6 层时 layout shift 分数明显恶化。语义标签不是越多越好，而是越准越轻。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<main></main>→<section></section>→<article></article>或<aside></aside>，中间不插div.wrapper类包裹层 -
<footer></footer>和<header></header>应直接挂载在body下，不要套在div#layout里——这会干扰辅助技术对“页面边界”的判断 - 用
section必须带h2–h6标题，否则不如用div；无主题的section只是多一层 DOM 开销
最容易被忽略的是：语义结构一旦定型，CSS 就不该再用标签选择器写布局规则。写 aside { float: right } 看似省事，实则把视觉逻辑硬编码进语义层，下次改版就得动 HTML——这不是协同，是耦合。
