html页面布局基础是语义化结构：、、等不可用替代，因浏览器和屏幕阅读器依赖其语义识别内容角色；必须唯一且不嵌套，须与邻近内容相关，可嵌套使用，仅用于无语义场景。
HTML 页面布局的实现基础不是某种 CSS 技术，而是语义化结构本身。没有合理的 HTML 骨架，再高级的 Flex 或 Grid 也只会让错乱的内容“整齐地错乱”。
为什么 <header></header> <main></main> <aside></aside> 这些标签不能用 <div> 全部代替<p>浏览器和辅助技术（如屏幕阅读器）依赖语义化标签理解内容角色。用 <code><div class="header"> 替代 <code><header></header>，CSS 样式可能一样，但：
- 屏幕阅读器无法自动识别该区域是页眉，会跳过导航提示
- 搜索引擎对
<main></main> 内容赋予更高权重，而 <div class="main"> 无此语义<li>
<code><nav></nav> 触发键盘 Tab 顺序优化，<div class="nav"> 不会自动获得导航流行为<p>常见错误现象： </p>
<ul>
<li>页面在 VoiceOver 或 NVDA 中朗读顺序混乱 </li>
<li>Lighthouse 报告 “Missing landmark elements”（缺少地标元素） </li>
<li>
<code><main></main> 没有被声明为唯一主内容区（页面中出现多个 <main></main> 会触发 W3C 验证警告）
<main></main> 内容赋予更高权重，而 <div class="main"> 无此语义<li>
<code><nav></nav> 触发键盘 Tab 顺序优化，<div class="nav"> 不会自动获得导航流行为<p>常见错误现象： </p>
<ul>
<li>页面在 VoiceOver 或 NVDA 中朗读顺序混乱 </li>
<li>Lighthouse 报告 “Missing landmark elements”（缺少地标元素） </li>
<li>
<code><main></main> 没有被声明为唯一主内容区（页面中出现多个 <main></main> 会触发 W3C 验证警告）使用场景建议：
- 必须且只能有一个
<main></main>，且不应嵌套在<article></article>或<section></section>内 -
<aside></aside>应与邻近<article></article>或<section></section>内容相关（比如博客侧边的同类文章推荐），而非放广告横幅 -
<footer></footer>在直接子级表示页面页脚；在<article></article>内部则表示该文章的结尾信息（如作者、发布时间）
<div> 不是布局失败时的“万能补丁”<p>很多人一写不好 Flex 布局，就退回用一堆 <code><div> + <code>class="wrapper" class="inner" class="col-left" —— 这本质是把结构责任推给 CSS，反而加剧维护难度。
关键区别在于：
<div> 是无语义的通用容器，不传达任何内容意图 <li> <code><section></section>表示一个主题性内容区块（需有标题<h2></h2>等）-
<article></article>表示可独立分发、复用的内容单元（如一篇博客、一条新闻） - 用
<div> 包裹整个三栏结构，却不拆分 <code><header></header><main></main><aside></aside>→ 后续想用display: grid控制 header 跨列时，缺乏语义锚点，只能靠 class 名硬匹配 - 在
<main></main>外又套一层<div class="container"> → 容器本应由 CSS 控制宽高/居中，不该污染语义层 <li>所有响应式断点都靠 JS 动态加 class（如 <code>is-mobile），而不是用<picture></picture>、<source media></source>或语义化结构配合媒体查询 -
<header></header>是的第一个子元素（除非有 skip-link） -
<main></main>紧跟其后，且早于<aside></aside>和<footer></footer> -
<footer></footer>是最后一个块级子元素 - 浏览器解析 HTML 时，遇到
<script></script>会阻塞后续 DOM 构建；若<footer></footer>里塞了未 defer 的统计脚本，可能拖慢<main></main>内容渲染 -
<main></main>越早出现在源码中，搜索引擎越快提取核心文本，LCP（最大内容绘制）指标更优 - 哪部分是用户真正要找的“主内容”？
- 哪部分可以被独立缓存或预加载？
- 哪部分在小屏下应该被折叠、延后加载，而不是单纯隐藏？
这些判断一旦出错，所有 CSS 布局技巧只是在加固一个错误的前提。
容易踩的坑：
现代布局常忽略这点：视觉上用 Flex/Gird 重排，但屏幕阅读器仍按 HTML 顺序读取。如果代码里 <aside></aside> 写在 <main></main> 前面，即使 CSS 让它显示在右边，盲人用户仍会先听到侧边栏内容。
必须保证：
性能影响：
真正难的不是怎么让三栏并排，而是想清楚：
