html布局核心是结构自带表现意图：语义标签定逻辑骨架，flex/grid控流，响应式写在css中；误用div替代语义标签会切断seo、无障碍及维护链。
HTML 页面布局不是“怎么摆元素”，而是“如何让结构自带表现意图”——语义标签定骨架，Flexbox 或 Grid 控制流，响应式逻辑写在 CSS 里，而不是靠 JS 拼凑。
为什么 <header></header> 和 <main></main> 不只是换了个标签名
它们是浏览器、辅助技术、搜索引擎理解页面逻辑的锚点。比如 <main></main> 必须唯一，且不能嵌套在 <article></article> 或 <aside></aside> 内；<nav></nav> 被屏幕阅读器识别为导航区，按快捷键可直接跳转。误用 <div class="header"> 看似一样渲染，但会切断这些隐含语义链。
<ul><li>SEO：Google 明确表示会利用语义标签判断内容主次，<code><main></main> 区域权重高于同级 <div>
<li>无障碍：NVDA / VoiceOver 依赖这些标签生成导航树，<code><section></section> 配合 <h2></h2> 才能形成可跳转的逻辑区块
main { color: var(--text-primary); } 比 .content-wrapper { color: #333; } 更易定位、更难误改
display: flex 失效的三个高频原因
最常见的是父容器没开上下文，或者子元素被其他规则覆盖。Flex 不是“设了就灵”，它需要干净的继承链和明确的尺寸约束。
- 父容器未设
display: flex或display: inline-flex：仅给子项加flex: 1完全无效 - 子元素是
float或position: absolute：这些会脱离文档流，Flex 容器对其失去控制权 - 父容器高度为
auto且无内容撑开：当所有子项用align-items: center垂直居中时，若父容器没高度，视觉上会“消失”——加min-height: 100vh或临时border可快速验证
grid-template-areas 怎么写才不踩坑
命名区域必须严格对应，空格数、换行数、引号包裹缺一不可。它不是字符串拼接，而是网格轨道的可视化映射。
- 每行引号内列数必须一致：例如
"header header" "nav main" "footer footer"合法；"header" "nav main"会报错，因第一行列数为 1，第二行为 2 - 空白区域用
.（英文句点）占位，不能留空格或写none - 子元素的
grid-area值必须与模板中名称完全匹配，大小写敏感，且不能带引号 - 响应式时别硬改整个
grid-template-areas，建议用@media重定义grid-template-columns和grid-column，保持区域名稳定
移动端布局里最容易被忽略的 viewport 细节
<meta name="viewport" content="width=device-width, initial-scale=1"> 是起点，但不是终点。真正在意体验的人会补上两处：
-
maximum-scale=1和user-scalable=no要慎用：禁用缩放会破坏低视力用户的可访问性，WCAG 2.1 明确反对 - iOS Safari 对数字+单位组合（如
123px）有自动字体放大机制，需加-webkit-text-size-adjust: 100%到或 - 某些安卓 WebView 在横屏时会错误触发
width=device-width，导致内容横向溢出，此时用width=1+initial-scale=1更稳
真正难的不是写出一个能跑的布局，而是让每个标签、每条 CSS 规则都承担明确的职责：结构归 HTML，流向归 Flex/Grid，断点归媒体查询，视觉节奏归 typography 和 spacing。一旦混用，比如用 float 做主栏、靠 z-index 修位置、拿 JS 强制重排，后续维护成本会指数级上升。
