HTML页面布局

根据所需要设计页面的效果图，去设计分析页面所需要的的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是你是最基本的相当于骨架，你需要去搭建好这么一个架构，既是为了美观好看，同样的也是为了后期的维护。