h5语义化标签兼容低版本浏览器

h5的语义化标签：就是让富有含义的标签，比如<header>,<footer>,<nav>等等。

语义化标签的作用：

1. 开发角度，可提高代码的可读性可维护性
2. 网站发布者的角度（即客户），搜索引擎优化（seo），有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。

语义化标签的兼容问题： IE9一下版本的浏览器是不支持h5中的语义化标签的，它会把语义化标签当做行内元素。

语义化标签的兼容办法：

1. js解决:语义化标签需要动态创建document.createElement('header'),同时设置块级元素,但是如果有大量的语义化标签，会造成大量的代码。不推荐
2. 使用插件（html5shiv.js）：插件的引入必须在head标签内，在页面在页面结构之前，提前解析h5标签。

注意：谷歌，火狐大部分浏览器都支持语义化标签，无需插件的支持，只有在IE9以下的浏览器才需要去加载插件。因此，引入插件时需要对其做一下优化，可避免在不需要插件支持的浏览器去加载插件。

优化插件的方法：条件注释。条件注释，网页的任何地方都可以判断浏览器版本。其写法：

<!--[if lte IE 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->
//意思是：如果当前浏览器版本小于等于IE8，则加载插件。
//固定写法：
<!--[if lte IE 8]>
    do something...
<![endif]-->
语法：lt（小于）、lte（小于等于）、gt（大于）、gte（大于等于）

复制代码

转载于:https://juejin.im/post/5c4828c36fb9a04a0b22847f