html布局核心在于css控制而非标签堆砌；仅提供结构，需配合display:flex/grid等声明才能实现真正布局；布局已被废弃，语义化标签不替代css定位。

标签本身不负责布局，真正起作用的是它内部的结构组织方式和后续 CSS 的控制逻辑。直接在 或 上写样式是反模式，容易失控。

为什么不能靠 <div> 堆砌就叫“布局” <p>很多人复制一段带 <code><div id="header"> 的代码就以为完成了布局，其实只是起了个名字。没有 CSS 的 <code>display、flex 或 grid 声明，这些 <div> 依然按默认块级流垂直堆叠，毫无“布局感”。浏览器根本不认识你写的 <code>id="sidebar" 是侧边栏——那只是个字符串。

• 语义化标签（如 <header></header>、<nav></nav>、<main></main>）不是替代 CSS 的，它们只提供结构意义，不影响视觉排列
• <table> 用于布局已被明确废弃，即使能跑通，也会破坏可访问性与 SEO <li>用 <code>float 实现多列在现代项目中基本等于自找麻烦：清除浮动、高度塌陷、响应式断裂问题频出

display: flex 和 display: grid 怎么选

二者不是互斥关系，而是分工不同：flex 擅长一维排列（行或列），grid 天然适合二维网格（行列同时控制）。新手常误以为“用了 grid 就不用 flex”，其实真实页面里二者嵌套极常见。


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 主容器用 grid 划分区域（header / nav / main / aside / footer），各区域内再用 flex 排列按钮、表单项、卡片列表等
• grid-template-areas 写法直观但需注意：每个区域名必须在模板字符串中完整出现，且引号内空格敏感；grid-area 值必须与之严格匹配
• 别给 <main></main> 直接设 display: grid 后就不管子元素了——如果子项没设 grid-column 或没被自动轨道捕获，它们会全部挤在第一格里

HTML 模板里哪些地方最容易漏掉关键属性

一个看似完整的 HTML 模板，常因几个小疏忽导致布局失效或响应异常，尤其在移动端。

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须写在 中，缺了它，max-width: 100% 和 flex 在手机上大概率不生效
• 不只是 SEO 需要，某些屏幕阅读器依赖该属性决定语音语调，也影响部分 CSS 伪类（如 :lang()）行为
• 用 flex 或 grid 时，父容器若没设 height 或 min-height，子项的 100vh 可能计算为 0——因为父级高度未定义，vh 失去参照基准
• <progress></progress>、<meter></meter> 这类语义化表单控件，不写 value 和 max 属性就是空白，不是“没样式”，是根本不会渲染

布局不是把标签摆好就结束，而是让每个节点都清楚自己在坐标系中的定位依据。最常被跳过的其实是“重置默认行为”：比如 box-sizing: border-box 没全局设，padding 就会撑大 width；margin 没归零，父子块会意外合并。这些细节不处理，再漂亮的模板结构也会在真实设备上错位。