标准html页面布局规范核心是语义化结构（用header/main/aside/footer等html5标签而非div堆砌）、flex/grid主容器控制（父容器设display:flex+min-height:100vh，子项合理设flex值）、css模块化协作（bem命名、base与module样式分离、禁用id选择器和内联样式）。
标准HTML页面的布局规范，核心是语义化结构 + Flex/Grid 主容器控制 + CSS 模块化协作，不是靠 div 堆砌或 inline-style 硬写。
用 HTML5 语义标签定义结构，别再只用 <div>
<p>浏览器和辅助工具依赖标签含义理解页面逻辑。只用 <code><div> 会让 <code><nav></nav>、<main></main>、<aside></aside> 这些标签失去意义，也增加后期样式覆盖成本。
-
<header></header> 包含站点标识、主导航，不用于每个模块顶部的“小标题”
-
<main></main> 必须唯一，且不能嵌套在 <article></article> 或 <section></section> 内
-
<aside></aside> 是与主内容相关但可独立存在的内容（如侧边推荐），不是所有“右边那栏”都该用它
- 避免
<div class="header"> 这类伪语义写法——既没语义，又多一层 class 维护负担
<h3>Flex 布局做主容器，别让 <code>float 或 position: absolute 控制整体结构
<header></header> 包含站点标识、主导航，不用于每个模块顶部的“小标题”<main></main> 必须唯一，且不能嵌套在 <article></article> 或 <section></section> 内<aside></aside> 是与主内容相关但可独立存在的内容（如侧边推荐），不是所有“右边那栏”都该用它<div class="header"> 这类伪语义写法——既没语义，又多一层 class 维护负担
<h3>Flex 布局做主容器，别让 <code>float 或 position: absolute 控制整体结构现代主结构（比如 header + main + aside + footer 垂直堆叠）用 display: flex + flex-direction: column 最稳。常见错误是只给子元素设 flex: 1，却忘了父容器没开 Flex 上下文。
- 根容器（如
或包裹层）必须先设display: flex和min-height: 100vh，否则flex: 1在子元素上无效 - 侧边栏固定宽、内容区自适应？用
flex: 0 0 240px（不伸缩、不收缩、宽 240px）+flex: 1，比百分比更可靠 - 加
min-width: 0到 flex 项目中——否则内部长 URL 或中文连续无空格文本会撑破容器，overflow: hidden不生效 - 绝对定位只用于浮层、下拉菜单等脱离文档流场景；拿它排 header/main/footer，后续响应式和可访问性基本就放弃了
CSS 协作要靠命名约束和作用域隔离，不是靠 !important 或内联 style
多人协作时，样式冲突往往来自 class 名随意、选择器过深、全局污染。BEM 或类似前缀规则不是形式主义，是降低理解成本的实际手段。
- 公共样式（字体、重置、常用间距）抽到
base.css，用g-前缀（如g-mt-16）明确作用域 - 模块级样式用
m-前缀（如m-product-card），禁止在其中写body > .m-product-card这种强耦合选择器 - 避免使用 ID 选择器写样式——ID 天然唯一，无法复用，还容易和 JS 的
getElementById产生隐式绑定冲突 - 外部样式表（
<link rel="stylesheet">）是默认选项；style标签只用于极简 demo；style=""属性仅限动态开关（如display: none临时隐藏）
响应式不是“加个 @media 就完事”，而是从结构层预留弹性
很多响应式问题其实出在 HTML 结构僵硬：比如把导航写成固定 4 项 <ul><li>...</li></ul>，移动端根本没法折叠；或者用 width: 100% 强撑图片，却不设 max-width: 100% 和 height: auto。
- 导航建议用
<nav></nav>+<button aria-expanded></button>+<ul></ul>组合，结构本身支持折叠/展开语义 - 图片必须带
alt，且容器设max-width: 100%，否则在窄屏上溢出不可滚动 - Grid 布局中慎用
grid-template-areas——名字一改全盘重写；优先用grid-template-columns: 240px 1fr+grid-column: 2显式控制 - IE11 不支持 Grid，如果仍需兼容，Flex 是更稳妥的降级方案，而不是退回 float
真正卡住进度的，往往不是某个属性不会写，而是结构没想清就急着加样式，或者改一个 class 影响了三个不相关的模块。语义标签定骨架，Flex/Grid 定流向，CSS 命名定边界——这三件事没对齐，后面所有样式和交互都是在补洞。
