语义化标签
<header>：页眉，是简介形式的内容。
- 如果它是 body 的子元素，那么就是网站的全局页眉
- 如果它是 article 或section 的子元素，那么它是这些部分特有的页眉
<nav>：包含页面主导航功能。其中不应包含二级链接等内容
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section>、<div>等元素表示
- 存放每个页面独有的内容。每个页面上只能用一次
<main>，且直接位于<body>中
<article>：包围的内容即一篇文章，与页面其它部分无关
<section>：与 article 类似，但 section 更适用于组织页面使其按功能分块
<aside>：定义核心内容之外的内容（如侧边栏）
<footer>：定义文档或 section 的页脚
页面布局整体思路
Step1：确定页面的版心，既是页面的主题部分
Step2：分析页面中的行模块，以及每个行模块中的列模块
Step3：每行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置
Step4：制作 HTML 结构。遵循先有结构，后有样式的原则，结构永远重要
Step5：先理清楚布局结构，后写代码实现整体布局和具体属性
网页布局总结
一个完整的网页，是标准流、浮动、定位一起完成的布局，每个都有自己的专门用法。
标准流
可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位
定位最大的特点是有层叠的效果，就是可以让多个盒子前后叠压显示。如果元素自由在某个盒子内移动就用来定位布局。
常见布局技巧
margin 负值使用
使用场景，多个盒子一行浮动排列时，相邻边框会出现 double 现象，可以通过设置 margin 对应位置为负值，就可以使边框重合。
行内块的巧妙运用
盒子里面的行内块元素和行内元素可以通过 text-align: center 将其全部水平居中显示。