HTML5语义化标签兼容IE8-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38859502/article/details/100069110

写此博客前提：朋友想学习前端知识，让我帮着布置一些作业，不知道该怎么帮，又在网上找了些视频学习怎么给她讲，同时也是自己在回顾一下以前学习的东西，今天在视频上看到的是关于html5新特性的东西，简单记录一下

html5的优点：跨平台

html5的缺点：PC端浏览器支持不是特别好，造成用户体验不佳（IE低版本不支持）

一、html5几个常用新特性

1、语义化标签

2、画布（Canvas）

3、表单控件（calendar,date,time，email,url,search）

4、本地离线存储 localStorage

5、一些API

二、语义化标签

语义化标签在用法上与div无区别，只是比div多了些语义化（此前提是兼容了IE）

1、列举几个语义化好的内容标签

（1）header

（2）footer

（3）nav

（4）section

（5）artical

（6）aside

2、解决语义化标签低版本IE问题的方法（3种）

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        nav {
            width: 200px;
            height: 200px;
            background: red ;
        }
        div {
            width: 200px;
            height: 200px;
            background: yellow ;
        }
    </style>
</head>
<body>
    <script type="text/javascript">

    </script>

    <nav>这是导航区域：提现语义性</nav>
    <div>这是导航区域：没有语性</div>

</body>

以上代码nav标签在谷歌生效，但在IE8没有生效

（1）document.createElement('nav');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        nav {
            width: 200px;
            height: 200px;
            background: red ;
            /* display: block; */
        }
        div {
            width: 200px;
            height: 200px;
            background: yellow ;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.createElement('nav')  //创建nav
    </script>

    <nav>这是导航区域：提现语义性</nav>
    <div>这是导航区域：没有语性</div>

</body>
</html>

在IE8下展示

需在nav标签下添加diaplay:block,将其设置为块级元素即可，这里就不在贴代码和展示效果了，很简单。

（2）以上方法若出现多个语义标签需要重复document.createElement，并设置css的display:block,这样就很麻烦了。这时可以通过引用js插件解决出现多个语义标签的兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        nav {
            width: 200px;
            height: 200px;
            background: red ;
            /* display: block; */
        }
        div {
            width: 200px;
            height: 200px;
            background: yellow ;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> //引用的插件地址
    </script>

    <nav>这是导航区域：提现语义性</nav>
    <div>这是导航区域：没有语性</div>

</body>
</html>

（3）以上代码也并不是最简洁的，若在谷歌上，也请求了兼容插件的地址，实际上时没有用的

上图全红的地方实际上并没有用，这样来看，兼容IE8的插件地址的求请在谷歌上其实是浪费的，所以，可以写成如下形式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        nav {
            width: 200px;
            height: 200px;
            background: red ;
        }
        div {
            width: 200px;
            height: 200px;
            background: yellow ;
        }
    </style>
     <!-- 腻子程序：终极解决方案 -->
    <!--[if lte IE 8]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
        </script>
    <![endif]-->
</head>
<body>
    <nav>这是导航区域：提现语义性</nav>
    <div>这是导航区域：没有语性</div>
</body>
</html>

注意上面的腻子程序：终极解决方案即为最佳解决方案！！