本文介绍如何使用HTML5进行网页布局设计，重点讲解语义化标签如header、nav、section、article、aside和footer等的应用场景及意义，帮助前端开发者更好地构建清晰且易于维护的网页结构。
根据所需要设计页面的效果图，去设计分析页面所需要的的html布局。最简单的可以使用div进行布局，结合css样式对div盒子进行定位。例如：
这样的布局有利于爬虫软件的读取，以及后期人员的代码阅读及维护。
这里提一下，侧边栏aside和正文article为了方便截图我设置了固定宽高400px。如果有需要可以设置height：calc（100vh - （头部+导航+底部的高度）） ，同样也可以由这两个盒子内部的元素去撑开父元素的高度，根据需求来。
其次html5又新增了许多的语义化标签。接下来我修改一下上图的布局。
可以看到页面的头部标签换成了header，主体部分有main标签包裹，导航栏换成了nav标签，内容部分换成了section标签，侧边栏正文分别换成了aside和article标签，底部换成了footer标签。
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
| video，audio | 定义多媒体的空间，分别是视频和音频 |
| time | 定义日期/时间 |
还有些新的html5新增的元素，大家如果有需求可以私聊我，我就不在这一一列举了。
总的一句话，学习前端，html是你是最基本的相当于骨架，你需要去搭建好这么一个架构，既是为了美观好看，同样的也是为了后期的维护。
扫一扫
1744