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

580 阅读1分钟

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(大于等于)