前言写网页和盖房子一模一样得先搭好骨架再填内容。今天聊聊拿到设计图该怎么拆分页面结构。一、先分清网页分两大层看不见的骨架 用户看得见的内容一个完整 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独立功能区块比如轮播区、新品推荐、图文介绍一块独立内容套一个 sectionarticle完整独立内容适合文章页、商品卡片能单独拎出来看一篇文章、一个商品div万能容器没有特殊含义纯用来布局、调样式实在分不出语义再用别全页面堆 div4. 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 classtop坏处两个自己后期维护分不清哪块是导航、哪块是正文搜索引擎识别不到页面重点影响网页收录排名。 能用 header/nav/main/article/section/aside/footer就不用 div。技巧 3层级嵌套别混乱从上到下顺序书写页面从上往下显示代码也要从上往下写头部→导航→主体→侧边→底部不要底部代码写到导航上面结构逻辑统一写 CSS 布局不容易出错。五、常见误区避坑一个页面写多个main官方规定页面只能有 1 个 main多写会造成浏览器识别混乱。所有小模块都套 section section 是有独立主题的大块区域几个文字、一个按钮没必要套 section直接 div 就行。nav 到处乱用 只有网站主导航、页面大目录用 nav文章内几个跳转链接不用套 nav。不分结构全部 div 堆砌 代码可读性极差同事接手、自己改需求都会崩溃。结尾总结拆分 HTML 页面结构核心思路一句话从上到下分大块主次内容分开装能用语义标签不用纯 div。先拆分视觉区域再对应 HTML5 标签搭建骨架最后填充文字图片和样式。
前言写网页和盖房子一模一样得先搭好骨架再填内容。今天聊聊拿到设计图该怎么拆分页面结构。一、先分清网页分两大层看不见的骨架 用户看得见的内容一个完整 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独立功能区块比如轮播区、新品推荐、图文介绍一块独立内容套一个 sectionarticle完整独立内容适合文章页、商品卡片能单独拎出来看一篇文章、一个商品div万能容器没有特殊含义纯用来布局、调样式实在分不出语义再用别全页面堆 div4. 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 classtop坏处两个自己后期维护分不清哪块是导航、哪块是正文搜索引擎识别不到页面重点影响网页收录排名。 能用 header/nav/main/article/section/aside/footer就不用 div。技巧 3层级嵌套别混乱从上到下顺序书写页面从上往下显示代码也要从上往下写头部→导航→主体→侧边→底部不要底部代码写到导航上面结构逻辑统一写 CSS 布局不容易出错。五、常见误区避坑一个页面写多个main官方规定页面只能有 1 个 main多写会造成浏览器识别混乱。所有小模块都套 section section 是有独立主题的大块区域几个文字、一个按钮没必要套 section直接 div 就行。nav 到处乱用 只有网站主导航、页面大目录用 nav文章内几个跳转链接不用套 nav。不分结构全部 div 堆砌 代码可读性极差同事接手、自己改需求都会崩溃。结尾总结拆分 HTML 页面结构核心思路一句话从上到下分大块主次内容分开装能用语义标签不用纯 div。先拆分视觉区域再对应 HTML5 标签搭建骨架最后填充文字图片和样式。
