背景：网页大量使用div来分隔内容，滥用现象使得网页制作似乎就只剩下了div，在这种不好的现象下，诞生了web语义化。
web语义化：简单来说就是用特定的语言来定义特定的事物，便于搜索引擎识别。
它分为两部分：html语义化和css命名语义化。
html语义化
人们通过肉眼来判断内容的语义，搜索引擎通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎，所以使标签语义化很重要。
部分标签语义
详情请参考:W3schoolhtml手册
div 语义：Division(分隔)
span 语义：Span(范围)
ol 语义：Ordered List(排序列表)
ul 语义：Unordered List(不排序列表)
li 语义：List Item(列表项目)
一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。比如使用一个div来定义一个p标签。
使用h1-hn（权重由高到低）的时候要注意它的权重，最好只有1个页面只有一个h1，不然对搜索引擎不友好。
css命名语义化
一般而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。
使用语义化方式的话，我们在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。
注意：结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css
