前端之HTML5知识整理

1. html5语义化兼容性问题

<!-- 现象: IE8 以下版本不支持 html5 语义化标签 -->
<header>我是header标签， 我应该独占一整行</header>

解决方式:

1)在浏览器解析标签之前, 动态创建一下 header 标签, 浏览器就认识了

document.createElement("header");

2)默认行内, 需要转成块级

header {
  /* header 标签应该独占一整行 */
  display: block;
}

但是 html5 新增了很多语义化标签, 一个个创建太麻烦了, html5shiv 插件很好的解决这个问题

1.1 html5shiv解决兼容性问题

在head中 引入 html5shiv 插件包即可解决 IE 8 不识别 html5 语义化标签的问题

<script src="html5shiv.js"></script>

但是在支持html5语义化标签的浏览器中, 这个js的执行就没有必要, 消耗了性能

所以我们可以通过 CSS IE条件注释 做兼容性处理

1.2 CSS条件注释(了解)

CSS IE条件注释 专门用于兼容IE 低版本

所以只有 IE9 及 IE9以下版本 才认识，其他版本的浏览器或者 IE10以上 的版本会当成注释, 不会解析

它里面有判断IE版本的方式:

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。

用法实例:

在小于等于 IE 8 的浏览器中才会执行, 在IE9 中, 就是普通的注释, 不会解析执行

<!--[if lte IE 8]>
    <script>
      alert("呵呵, 小于等于IE8都会执行这段话");
    </script>
    <script src="html5shiv.js"></script>
<![endif]-->

大于 IE 8 的浏览器才执行, 只有 IE 9 认识, 其他浏览器, IE 10 及以上, 都将条件注释当成注释

<!--[if gt IE 8]>
   <script>
      alert("只有IE9才执行这句话");
   </script>
<![endif]-->

2. html5 新增类名操作(熟记)

四个操作样式类的方法, 很简单, 需要熟记
1) 添加类: dom.classList.add   
2) 移除类: dom.classList.remove