HTML5语义化标签构建页面骨架：用、、、、替代无意义div，明确内容角色，提升可访问性、SEO与维护性；唯一且不嵌套，须包裹导航链接，表相关辅助内容，按就近原则归属。
直接用 <div> + <code>display: flex 就能快速搭出可用的静态页面，不需要浮动、不用清浮动、不依赖 JavaScript。现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）都原生支持，写法干净，调试直观。
怎么用 HTML5 语义标签组织页面骨架
别一上来就写一堆 <div class="header">。先用语义化标签把结构立住，既利于可访问性，也方便后续加样式：
<ul>
<li>
<code><header></header> 放 logo 和主导航，不是“页头图片”才用它
<nav></nav> 必须包裹在 <header></header> 或独立区域里，不能裸写在 <main></main> 只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 里<aside></aside> 不等于“右边栏”，它表示与主内容相关但可独立存在的辅助信息（比如作者简介、同类文章推荐）<footer></footer> 是它所在最近的 <article></article> 或 <section></section> 的结尾，不是全站底部——全站底部建议用 <footer role="contentinfo"></footer>
错误示范：<div id="footer">；正确写法：<code><footer>© 2026 张三</footer>。语义标签本身不带样式，但浏览器默认有 margin/padding，记得用 normalize.css 或自己重置。
Flexbox 布局三步写完导航栏和主体结构
传统浮动布局容易塌陷、需要清除、响应式改起来痛苦。Flex 一行声明就能解决对齐、换行、顺序、伸缩问题：
立即学习“前端免费学习笔记（深入）”；
- 导航栏水平居中 + hover 下划线：
nav ul { display: flex; justify-content: center; }+nav a:hover::after { content: ""; display: block; width: 50px; height: 2px; background: #007bff; margin: 4px auto 0; } - 左中右三栏（侧边栏固定 240px，主内容自适应）：
.container { display: flex; }，.sidebar { flex: none; width: 240px; }，.main { flex: 1; } - 按钮组右对齐：
.actions { display: flex; justify-content: flex-end; gap: 8px; }（gap比margin更可靠，不会影响第一个/最后一个子元素）
注意：不要给 Flex 容器设 width: 100% 再加 margin: 0 auto 居中——它默认就是块级，直接设 max-width: 1200px + margin: 0 auto 即可。另外，flex-wrap: wrap 在移动端会自动折行，比媒体查询更轻量。
为什么用 CSS Grid 而不是嵌套 Flex 做整体页面框架
Flex 是一维的（只能管行或列），Grid 是二维的（同时管行和列）。当你需要“头部占满、导航在左、主内容在右下、侧边在右上、底部占满”这种混合定位时，嵌套两层 Flex 很快就失控，而 Grid 用几行代码就能定义清楚：
- 基础页面网格：
body { display: grid; grid-template-areas: "header header" "nav main" "nav aside" "footer footer"; grid-template-rows: auto 1fr auto; grid-template-columns: 240px 1fr; } - 每个区域用
grid-area指定位置：header { grid-area: header; }，nav { grid-area: nav; } - 响应式只需改
grid-template-areas：@media (max-width: 768px) { body { grid-template-areas: "header" "nav" "main" "aside" "footer"; } }
兼容性提醒：IE10/11 只支持旧版 Grid 语法（-ms-grid），如果必须支持 IE，优先选 Flex；否则 Grid 是目前最接近“所见即所得”的布局方案。别为了“炫技”强行用 Grid 做简单列表——Flex 更合适。
真正卡住人的从来不是标签怎么写，而是没想清楚“这个区域是内容的一部分，还是容器的一部分”。比如 <aside></aside> 放广告位，但它在 DOM 结构里属于 <main></main> 的兄弟节点，而不是子节点——这直接影响 CSS 选择器路径和可访问性顺序。写之前多问一句：这个元素在逻辑上属于谁？
