HTML5不提供布局功能，布局由CSS的display: flex和display: grid实现；语义标签仅用于结构标注，不影响布局；移动端适配需viewport设置与媒体查询配合。
HTML5 本身不提供“布局系统”，真正负责页面布局的是 CSS —— 尤其是 display: flex 和 display: grid。盲目套用 HTML5 语义标签（如 ）而忽略 CSS 布局逻辑，反而会导致结构混乱、响应失效或可访问性下降。
用 display: grid 做整体容器布局
现代页面主结构（如页眉、侧边栏、主体、页脚）用 grid 最直接。它天然支持二维定位，无需浮动或负 margin。
常见错误：把 grid 用在深层嵌套元素上，导致层级失控；或只设 grid-template-columns 却漏掉 grid-template-rows 或 grid-template-areas，让内容溢出。
- 用
grid-template-areas命名区域，配合grid-area分配子元素，语义和视觉同步 - 避免固定像素列宽，优先用
fr、minmax()和auto-fit实现响应式 - 注意
grid容器的gap会作用于所有行列，若需不对称间距，改用padding或伪元素
.layout {
display: grid;
grid-template-areas:
"hd hd hd"
"nav main aside"
"ft ft ft";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 300px;
min-height: 100vh;
}
header { grid-area: hd; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: ft; }
用 display: flex 处理组件级对齐
flex 适合一维排列：导航菜单、卡片列表、表单控件组、按钮组等。它比 grid 更轻量，兼容性也更好（IE10+）。
立即学习“前端免费学习笔记（深入）”；
常见错误：对父容器设了 flex，却忘了子项默认 flex-basis: auto，导致宽度撑满或坍缩；或滥用 flex-wrap: wrap 而没设 min-width，造成小屏下错行断裂。
- 横向居中用
justify-content: center，垂直居中需同时设align-items: center且父容器有明确高度 - 让子项等宽填充，用
flex: 1（等价于flex: 1 1 0），而非width: 25% - 响应式断点中，优先改
flex-direction（如从row切到column），比重写整个布局更可靠
HTML5 语义标签不是布局工具，而是结构标注
、、 等标签不自带样式，也不影响布局流。它们的作用是向浏览器、屏幕阅读器和搜索引擎声明内容角色。
常见错误：用 HTML5 页面在手机上乱排，90% 是因为没设 常见错误：用 最易被忽略的一点：CSS Grid 和 Flex 的 替代 aria-labelledby 或标题，导致辅助技术无法识别；或把多个无关模块塞进一个 ，违反“每个页面仅一个 ” 的规范。
必须且只能出现一次，且不能嵌套在 、、 内 应包裹一组导航链接，不是所有链接都该放进去
移动端适配必须靠 CSS 媒体查询 + viewport 设置
，或媒体查询断点与实际设备宽度脱节。max-width: 480px 做移动断点，但现代手机物理像素远超此值；或在 @media 里只调字体大小，却不重排 grid 区域或切换 flex-direction。
@media (min-width: 768px) 增强device-width，统一用 width（即视口宽度），防止横竖屏切换时样式错乱min-content / max-content 行为在不同浏览器中仍有细微差异，尤其是 Safari 对 fit-content 的解析。上线前务必在真机上验证关键断点下的高度塌陷与文字折行。
