【逆战】HTML5新语义化标签 （二）
一、 分栏布局
column：分栏，将一段文字按照一定宽度分成多个栏目（类似于报纸界面）
值：
-count : 分栏的个数
-width : 分栏的宽度
-gap : 栏与栏的间距
-rule : 分栏的边线
-span : num | all （合并分栏）
注：-count -width 不要一起去写，容易冲突。
二、伪类与伪元素
#elem:after{}
#elem:hover{}
以上两种写法在旧版本中是对的规范的，但在新版本css3中第一个不规范。
在 CSS2.1的时候 : #elem:after{}是合规的
在 CSS3的时候 : #elem:after{} 单冒号不合规 #elem::after{}双冒号合规
#elem:hover{} 单冒号合规 #elem::hover{} 双冒号不合规
区别：
伪类是单冒号 -> :hover :active :visited :link ...
伪元素是双冒号 -> ::after ::before ...
伪类只会对操作的元素起作用，相当于样式添加到了元素身上；而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。
三、link标签的扩展
1、 引入style样式表，用于css与html分开写的时候引用css的
<link rel="stylesheet" href="./iconfont/iconfont.css">
2、提前去进行域名的dns解析，这样在进入网址时就会加快速度
<link rel="dns-prefetch" href="//static.360buyimg.com">
3、给网页头部添加小图标，格式固定的只能是.ico或.cur，跟制作鼠标小手文件类型一样。
<link rel="icon" type="/image/x-icon" href="./favicon.ico">
四、扩展meta标签
元信息（辅助信息）
1、编码格式，必须要写
<meta charset="UTF-8">
2、这是用于移动端的可视窗口设置，可以加上属性user-scalable=no使用户在移动端不能进行缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3、对网页内容做描述
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息">
4、用于填写html关键词
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,安全购物,电子商务">
注：3和4两个都是网页的描述信息，有助于搜索引擎搜索，即是搜索关键词。
5、指定引擎去渲染页面。有的浏览器可能有多个引擎，chrome : webkit blink ..
<meta name="renderer" content="webkit">
6、ie浏览器用什么方式渲染，edge最新版进行渲染，ie9 ie10 -> edge
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7、每隔多长时间可以对浏览器进行刷新，5就是5秒刷新一次
<meta http-equiv="refresh" content="5" url="">
8、在指定的时间内，请求资源会走缓存，提高加载网址的速度。
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
五、CSS Hack
CSS Hack 解决那些古老的浏览器兼容性问题。我们一直用的就是chrome浏览器，但是还有很多其他浏览器，当然这些浏览器都可以称为高级浏览器。
Hack分类
下载：下载ieTester工具 , 可以在服务器环境下进行测试新旧版本浏览器的测试。
1. CSS属性前缀法
_ + * \9 \0 ...
div {_background: red;}
div {_background: red \9;}等
2. 选择器前缀法（选择器前加*）
*html
3. IE条件注释法
<!--[if IE]>…<![endif]-->
IE6 BUG 非常多：
IE6高度的最小值是19px ,解决 overflow:hidden;
IE6双边距问题margin和float，解决 display:inline;
