前言
写网页和盖房子一模一样，得先搭好骨架再填内容。今天聊聊，拿到设计图该怎么拆分页面结构。
一、先分清：网页分两大层，看不见的骨架 + 用户看得见的内容
一个完整 HTML 文件，最外层固定两层，所有页面通用，不用每次重新想：
1. <html>：整个网页的外壳
所有代码都包在这个标签里，相当于房子整体地基，只有一对。
2. <head>：后台配置区（用户看不见）
这里不放图文，只给浏览器、搜索引擎看配置，常用内容：
meta：设置文字编码、手机适配title：浏览器标签上显示的标题- 引入 CSS 样式、网站图标
3. <body>：用户肉眼能看到的全部页面
我们平时写的 logo、文字、图片、按钮，全写在 body 里面，页面结构拆分，拆的就是 body 里面的区域。
二、肉眼拆分页面：通用 5 大区域（90% 网站都长这样）
随便打开一个网站，从上到下肉眼划分，固定 5 块：头部 (header)、导航 (nav)、主体 (main)、侧边栏 (aside)、页脚 (footer)，我拿逛淘宝、看博客举例子，超好理解。
1. header 页面头部（页面最顶部）
大白话：网站门头招牌，全站每个页面基本一模一样 里面放什么：网站 logo、网站名字、登录注册按钮、顶部小公告 小知识点：header 不只是页面顶部，文章、模块内部也能单独用 header 做小标题区。
2. nav 导航栏（菜单）
大白话：商场导视牌，点链接跳转到不同页面 里面放什么：首页、商品分类、关于我们、资讯、联系我们 注意：只有页面主菜单用 nav，小按钮链接不用套 nav，别滥用。
3. main 页面核心主体（整个页面最重要）
重点规则：一个页面只能写 1 个 main！ 大白话：用户进网站真正想看的内容，每个页面 main 内容都不一样 细分模块（main 里面继续拆）：
- section：独立功能区块，比如轮播区、新品推荐、图文介绍，一块独立内容套一个 section
- article：完整独立内容，适合文章页、商品卡片，能单独拎出来看（一篇文章、一个商品）
- div：万能容器，没有特殊含义，纯用来布局、调样式，实在分不出语义再用，别全页面堆 div
4. aside 侧边栏（次要辅助内容）
大白话：主线内容之外的边角信息，不看也不影响理解页面 常见场景：
- 博客右侧：热门文章、作者简介、标签云
- 商品页侧边：优惠券、相关推荐 管理后台左侧菜单栏也能用 aside 承载。
5. footer 页脚（页面最底部）
大白话：网站底部备注信息，全站统一 里面放：版权文字、备案号、联系方式、隐私协议、网站地图
三、两种常见页面布局拆分案例，直接照抄
案例 1：博客文章页（左右分栏）
从上到下结构顺序：
html
预览
<body>
<!-- 1.页面头部logo+顶部导航 -->
<header>
<nav>网站菜单</nav>
</header>
<!-- 2.页面核心内容 -->
<main>
<!-- 左边正文 -->
<article>
<header>文章标题区</header>
<section>文章段落1</section>
<section>文章段落2</section>
</article>
<!-- 右边侧边栏推荐 -->
<aside>热门文章、作者信息</aside>
</main>
<!-- 3.页面底部 -->
<footer>版权、联系方式</footer>
</body>案例 2：官网首页（通栏无侧边）
html
预览
<body>
<header>
<nav>主导航</nav>
</header>
<main>
<section>首页轮播大图</section>
<section>公司介绍模块</section>
<section>产品展示模块</section>
<section>客户案例模块</section>
</main>
<footer>底部信息</footer>
</body>四、新手必看：划分结构 3 个实用技巧，少走弯路
技巧 1：先分区，再写代码，别上来写标签
拿到设计图第一步别敲代码，拿文字简单划分区域：顶部、导航、轮播、产品、侧边、底部，规划好再写 HTML，逻辑不会乱。
技巧 2：优先用语义标签，少无脑堆 div
很多新手不管什么区域全用<div class="top">，坏处两个：
- 自己后期维护分不清哪块是导航、哪块是正文；
- 搜索引擎识别不到页面重点，影响网页收录排名。 能用 header/nav/main/article/section/aside/footer，就不用 div。
技巧 3：层级嵌套别混乱，从上到下顺序书写
页面从上往下显示，代码也要从上往下写：头部→导航→主体→侧边→底部，不要底部代码写到导航上面，结构逻辑统一，写 CSS 布局不容易出错。
五、常见误区避坑
- 一个页面写多个
<main>官方规定页面只能有 1 个 main，多写会造成浏览器识别混乱。 - 所有小模块都套 section section 是有独立主题的大块区域，几个文字、一个按钮没必要套 section，直接 div 就行。
- nav 到处乱用 只有网站主导航、页面大目录用 nav，文章内几个跳转链接不用套 nav。
- 不分结构，全部 div 堆砌 代码可读性极差，同事接手、自己改需求都会崩溃。
结尾总结
拆分 HTML 页面结构核心思路一句话：从上到下分大块，主次内容分开装，能用语义标签不用纯 div。
先拆分视觉区域，再对应 HTML5 标签搭建骨架，最后填充文字图片和样式。