html5中语义化标签及兼容性

  • buju01
  • IE7
  • IE8
  • IE8s
  • 1564657437453

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进。

其实,HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。在2014年10月29日,万维网联盟(即W3C)宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

首先,我们来了解一下一些常用的HTML5是语义化标签。如下表:

标签描述
<header> 定义了文档的头部区域
<nav> 定义导航链接的部分。
<canvas> 标签定义图形,比如图表和其他图像。
该标签基于 JavaScript 的绘图 API
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<footer> 定义 section 或 document 的页脚。

我们用这些常用的语义标签来定义一个如下的页面的基本结构:

目前  ,所有主流浏览器都支持h5(chrome、firefox、safari…),但是IE9及以上可支持h5(有选择的支持),IE8及以下不支持h5(IE8完全不支持html5语义标签,原因是不认识语义标签,所以无法解析这些标签,也就是意味着所写的样式无效,如下图)。

若想让它正常显示,则有以下方式:

方式一:手动创建标签

JavaScript 语句 document.createElement(“要添加的元素”) 是为了为 IE 浏览器添加新的元素。

<body>
		<script>
		/*手动创建语义标签,并在styled的选择器中 display:block;*/
		document.creatElement("header");
		document.creatElement("nav");
		document.creatElement("main");
		document.creatElement("article");
		document.creatElement("aside");
		document.creatElement("footer");
		</script>
</body>

但考虑到IE9浏览器中行级元素在设置宽高时会失效,因而要将 HTML5 元素定义为块元素。否则显示如下图:

HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是块级 元素。 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block,如下方式:

header, section, footer, aside, nav, main, article, figure {
   display: block;
}

此时添加之后显示如下:(已可以正常显示)

这样做要将所有的语义化标签均用 document.createElement(“要添加的元素”) 来声明,很繁琐而且代码冗余严重,我们不得不考虑更好的方法。

方式二:引入第三方插件

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-IE8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。 所以该插件作用就是解决h5在IE浏览器中的兼容性问题。

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

要注意的是, html5shiv.js 引用代码必须放在<head>元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

这样就成功解决HTML5在了IE浏览器的兼容性问题。

案例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5基本页面布局</title>
    <!--第二种方法-->
    <!--该插件作用就是解决h5在IE8和IE9中的兼容性问题。-->
    <!-- html5shiv.min.js:一般情况下IE8及以下浏览器不支持html5,引入这个文件可解决兼容性问题 -->
    <script src="../js/html5shiv.min.js"></script>
    <style type="text/css">
        .*{
            padding:0;
            margin: 0;
        }
        header{
            width:100%;
            height: 100px;
            background-color: #00a8ff;
        }
        nav{
            width: 100%;
            height: 50px;
            background-color: yellow;
        }
        /*IE9:浏览器中行级元素在设置宽高时会失效
          IE8:不支持h5(IE8完全不支持html5语义标签,  原因是不认识语义标签,所以无法解析这些标签,
               也就是意味着所写的样式无效)。*/
        main{
            display: block;/*将行级元素转化为块级元素*/
            width: 100%;
            height:500px;
            background: #000;
        }
        main > article{
            width: 75%;
            height: 500px;
            background-color: red;
            float: left;
        }
        main > aside{
            width: 25%;
            height: 500px;
            background-color:  green;
            float: right;
        }
        footer{
            width: 100%;
            height: 100px;
            background-color: deepskyblue;
        }

    </style>

</head>
<body>
    <!--01 语义标签的定义结构-->
    <header>头部</header>
    <nav>导航栏</nav>
    <main>
        <article>左边</article>
        <aside>右边</aside>
    </main>
    <footer>底部</footer>
    <!--02 用div可定义的结构-->
    <!--    <div class="header"></div>-->
    <!--    <div class="nav"></div>-->
    <!--    <div class="main">-->
    <!--    <div class="left"></div>-->
    <!--    <div class="right"></div>-->
    <!--    </div>-->
    <!--    <div class="footer"></div>-->

    <!--若想让IE8及以下正常显示所以语义元素标签,则有以下方式:-->
    <!--第一种方法-->
    <script>
        /*手动创建语义标签,并在styled的选择器中 display:block;*/
        document.creatElement("header");
        document.creatElement("nav");
        document.creatElement("main");
        document.creatElement("article");
        document.creatElement("aside");
        document.creatElement("footer");
    </script>
</body>
</html>

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注