HTML语义化标签无默认布局能力，需CSS的flex/grid等属性实现；浏览器仅赋予极简样式，如nav默认block、无自动横排；语义结构须配合正确CSS，否则破坏可访问性与规范。
HTML语义化标签本身不提供布局能力，必须配合 CSS 的 display 属性（如 flex、grid）才能形成可用的现代布局；直接写 <header><nav></nav></header> 而不加任何 CSS，页面照样是垂直堆叠、无间距、无对齐的“裸结构”。
为什么 header、nav 等标签默认不自动横向排列
浏览器对 HTML5 语义标签只施加极简默认样式：比如 header 和 main 有轻微上下 margin，nav 没有特殊 display 值，它和 div 一样默认是 display: block。这意味着：
- 即使你把
nav放在header里，它也不会自动靠右或横排——得手动写display: flex或display: inline-block - 不同浏览器对
aside的 margin 处理略有差异，不能依赖“它应该有空隙” - 所有语义标签都继承
box-sizing: content-box，padding 会撑大宽度，容易在 Flex/Grid 容器中溢出
用 display: flex 组织导航与主内容流
适合大多数单行导航 + 垂直内容流的场景，比如顶部栏含 logo + 菜单 + 用户入口，主体是左主栏 + 右侧栏。
- 给
header加display: flex; align-items: center; justify-content: space-between;，再控制子元素 flex 分配（如logo固定宽，nav占剩余空间） - 主内容区若含
main和aside，不要各自设 width 百分比，而是把它们包进一个容器（如section.layout-main），对该容器设display: flex; gap: 1.5rem;，再分别设main { flex: 1; }和aside { width: 300px; } - 避免对
nav内部a直接设float: left—— float 已被废弃，且会脱离文档流，导致父容器高度塌陷
用 display: grid 划分整页骨架时，grid-area 必须显式声明
CSS Grid 不会自动识别语义标签名，header 不等于 grid-area: header，必须手动绑定。
立即学习“前端免费学习笔记（深入）”；
- 先在 body 上定义网格区域：
grid-template-areas: "header header" "nav main" "footer footer"; - 再逐个设置：
header { grid-area: header; }、nav { grid-area: nav; }、main { grid-area: main; } -
main必须是body的直接子元素，否则grid-area无法生效；如果用了框架或组件库，要确认它没把main包进额外的div - 不要用
grid-area: "header"这种字符串写法——语法错误，正确是grid-area: header;（无引号）
容易被忽略的语义边界与 CSS 干预风险
最常踩的坑不是“不会写 Flex”，而是误以为加了语义标签就万事大吉，结果用 CSS 把语义逻辑悄悄破坏了。
-
main只能出现一次，且不能嵌套在article或section里；但有人为实现“局部主内容”而写<section><main>...，这违反规范，会被 Lighthouse 标为可访问性问题 - 用
display: contents会让父元素“消失”于无障碍树，如果加在nav上，整个导航菜单对屏幕阅读器不可见 - 响应式中用
display: none隐藏aside没问题，但若换成visibility: hidden或opacity: 0，它仍占据语义位置，可能误导辅助技术 - 所有交互类（如
.is-open、.active）应加在语义标签上，而不是另套一层div——否则语义锚点就断了
