HTML语义化标签无默认布局效果，必须用CSS显式定义样式；如nav需display:flex才能横排，main与aside需父容器设flex或grid并合理设置子元素flex属性，grid-area须显式绑定，语义与样式需双层协同。

HTML语义化标签本身不带布局效果，必须靠CSS显式定义尺寸、位置和排列方式；不写CSS，

和

在页面上看起来完全一样。

为什么直接写 <nav> 不会自动横排

浏览器对 <nav> 只施加极小的默认 margin（比如 1em 上下），内部链接仍按块级元素垂直堆叠。它不是“导航组件”，只是“这里是一段导航内容”的声明。

• 必须手动加 display: flex 或 display: inline-block 才能让菜单项并排
• 老式浮动（float: left）需要额外清除，现代项目优先用 Flexbox
• 如果 nav 里混了 <button> 或 <form>，它们默认 display 类型不同，更得统一控制

main 和 aside 的宽度不能靠“语义”推断

CSS 不会因为用了 <main> 就自动让它占 70% 宽度——这完全是开发者职责。常见错误是只设 main { width: 70%; } 却忘了父容器没设 display: flex 或 display: grid，结果宽度失效或溢出。

• 推荐把 <main> 和 <aside> 包进一个共同父容器，再设 display: flex
• main 写 flex: 1（自适应剩余空间），aside 写 width: 300px 或 flex: 0 0 300px
• 别在 main 上直接设 float：它语义上是“唯一主内容区”，浮动会破坏文档流，影响后续 <footer> 定位

Grid 布局中 grid-area 必须和语义标签显式绑定

写 grid-template-areas: "header nav" "main main" "footer footer" 只是定义区域名称，不等于 <header> 就自动落到 “header” 区域——必须为每个标签单独指定 grid-area。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• header { grid-area: header; }
• nav { grid-area: nav; }
• main { grid-area: main; }
• 漏掉任意一条，该标签就会按常规文档流渲染，脱离 Grid 控制

最容易被忽略的是：语义标签的嵌套规则（比如 <main> 不能出现在 <article> 内部）和 CSS 的 display 属性之间没有隐式联动。你得同时守好两层契约——HTML 层确保结构合法，CSS 层确保样式生效，缺一不可。