HTML布局核心在于CSS控制而非标签堆砌；<div>仅提供结构，需配合display:flex/grid等声明才能实现真正布局；<table>布局已被废弃，语义化标签不替代CSS定位。
<html> 标签本身不负责布局，真正起作用的是它内部的结构组织方式和后续 CSS 的控制逻辑。直接在 <html> 或 <body> 上写样式是反模式，容易失控。
为什么不能靠 <div> 堆砌就叫“布局”
很多人复制一段带 <div id="header"> 的代码就以为完成了布局，其实只是起了个名字。没有 CSS 的 display、flex 或 grid 声明，这些 <div> 依然按默认块级流垂直堆叠，毫无“布局感”。浏览器根本不认识你写的 id="sidebar" 是侧边栏——那只是个字符串。
- 语义化标签（如
<header>、<nav>、<main>）不是替代 CSS 的，它们只提供结构意义，不影响视觉排列 -
<table>用于布局已被明确废弃，即使能跑通，也会破坏可访问性与 SEO - 用
float实现多列在现代项目中基本等于自找麻烦：清除浮动、高度塌陷、响应式断裂问题频出
display: flex 和 display: grid 怎么选
二者不是互斥关系，而是分工不同：flex 擅长一维排列（行或列），grid 天然适合二维网格（行列同时控制）。新手常误以为“用了 grid 就不用 flex”，其实真实页面里二者嵌套极常见。
- 主容器用
grid划分区域（header / nav / main / aside / footer），各区域内再用flex排列按钮、表单项、卡片列表等 -
grid-template-areas写法直观但需注意：每个区域名必须在模板字符串中完整出现，且引号内空格敏感；grid-area值必须与之严格匹配 - 别给
<main>直接设display: grid后就不管子元素了——如果子项没设grid-column或没被自动轨道捕获，它们会全部挤在第一格里
HTML 模板里哪些地方最容易漏掉关键属性
一个看似完整的 HTML 模板，常因几个小疏忽导致布局失效或响应异常，尤其在移动端。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须写在<head>中，缺了它，max-width: 100%和flex在手机上大概率不生效 -
<html lang="zh-CN">不只是 SEO 需要，某些屏幕阅读器依赖该属性决定语音语调，也影响部分 CSS 伪类（如:lang()）行为 - 用
flex或grid时，父容器若没设height或min-height，子项的100vh可能计算为 0——因为父级高度未定义，vh失去参照基准 -
<progress>、<meter>这类语义化表单控件，不写value和max属性就是空白，不是“没样式”，是根本不会渲染
布局不是把标签摆好就结束，而是让每个节点都清楚自己在坐标系中的定位依据。最常被跳过的其实是“重置默认行为”：比如 box-sizing: border-box 没全局设，padding 就会撑大 width；margin 没归零，父子块会意外合并。这些细节不处理，再漂亮的模板结构也会在真实设备上错位。
