HTML5页面布局需语义化标签理清逻辑，CSS Grid搭主框架、Flex处理组件对齐，配合移动端适配策略实现结构清晰、样式可控、响应及时。
HTML5 页面布局本身不负责视觉排布，真正提升用户体验的关键在于：用语义化标签理清内容逻辑，再用 CSS（尤其是 Flexbox 和 Grid）精准控制呈现方式。结构清晰 + 样式可控 + 响应及时，三者缺一不可。
先按功能划分核心区域，别堆 div
用户打开页面第一眼看到的不是代码，而是信息区块。提前明确以下五类区域，能大幅降低认知负担：
-
页眉（
） ：放 logo、主标题、搜索框——让用户秒懂这是什么网站 - 主导航（：只放一级入口链接，避免塞进“友情链接”或“隐私政策”这类次要内容
-
主内容（
） ：每个页面只能有一个，承载当前任务核心，比如文章正文、商品列表或表单 - 侧边栏（：放辅助信息，如相关推荐、分类导航、作者简介，和主内容有逻辑关联但非必需
- 页脚（：版权、联系方式、法律条款等元信息，位置固定在底部，方便用户快速查找
用 Grid 搭主框架，让结构一眼可读
整体页面骨架适合用 CSS Grid 控制，它天然支持二维布局，比浮动或老式 flex 更直观稳定：
- 用 grid-template-areas 命名区域（如 "hd nav main"），再配合 grid-area 给每个语义标签分配位置，HTML 结构和视觉顺序完全对齐
- 列宽优先用 fr 或 minmax(200px, 1fr)，避免写死像素值，让侧边栏在小屏下自动收缩或隐藏
- 设 min-height: 100vh 防止页脚塌陷，同时用 grid-template-rows: auto 1fr auto 确保主内容区撑满视口剩余空间
用 Flex 处理组件内对齐，减少错位感
导航菜单、卡片组、表单控件这些局部模块，用 Flex 更轻量高效：
立即学习“前端免费学习笔记（深入）”；
- 导航项横向排列时，加 justify-content: center 居中，再配 align-items: center 垂直对齐文字和图标
- 登录表单里两个输入框+按钮，设父容器 display: flex; flex-direction: column;，再给按钮加 margin-top: auto，让它自动贴底，避免空隙突兀
- 小屏切换时，把 flex-direction: row → column，比重写整个 grid 更快更稳
移动端适配不是“加个媒体查询”就完事
真正的移动友好，是从结构设计阶段就考虑触控与阅读习惯：
- 所有点击区域（按钮、链接）最小尺寸设为 44×44px，符合手指触控精度
- 用 viewport meta 确保缩放正确：
- 侧边栏在手机上默认隐藏，用 checkbox + ~ 选择器或 JS 控制显隐，不依赖 JavaScript 也能降级可用
- 字体大小用 rem 或 clamp()，例如 font-size: clamp(1rem, 2.5vw, 1.25rem);，兼顾小屏可读与大屏舒适
