先说点基础的。
HTML的发展历程
我们在学习HTML的过程中，总是听到HTML5这个词，这到底是是什么意思呢。大概可以这么想就是相当于HTML的第五个版本，那么之前的版本是什么样子呢。
下面请看早期的HTML4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
这是HTML4的严格模式，注意DTD里面的strict.dtd
快捷方式： html:4s
</body>
</html>
HTML4的松散模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
这是HTML4的松散模式，注意DTD里面的loose.dtd
快捷方式： html:4t
</body>
</html>
再早起有XHTML的版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
XHTML的严格模式
快捷方式：html:xs
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
XHTML的松散模式
快捷方式：html:xt
</body>
</html>
上门的几个版本都有共同特点，都包含一个繁杂的DTD，或者称之为DOCTYPE 文件类型。再来看看我们目前的HTML5的版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
没有了复杂的DOCTYPE
快捷方式：html:5
</body>
</html>
是否有种耳目一新的感觉呢。当然了HTML5不只是这里简单的改变了这个DTD的内容。我们今天讨论一下其中比较简单的一部分：语义化标签。
语义化标签
语义化是所有计算机语言追求的目标，就是说你只要看到写出来的内容就知道他是什么定西。比如HTML5中引入了header标签标示网页的头部，footer标示网页的底部，字面意思也可以理解成网页的脚部。这些标签的加入使得HTML的代码具有了更高的可读性。
比如，我们之前的网页结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="header">网页的头部</div>
<div class="nav">网页的主体内容</div>
<div class="footer">网页的脚部</div>
</body>
</html>
这里网页的每一个部分都是使用div来实现的。几乎没有任何可读性。但是在HTML5中我们的结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<section></section>
<footer></footer>
</body>
</html>
基本上我们一眼就能够看出来每一部分代码的作用以及内容。这对我们开发以及维护来说是非常友好的，同时也非常的有利于网页SEO的。
但是问题来了：语义化标签在IE中存在一些问题。请看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
width: 100%;
height: 200px;
background: red;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<footer></footer>
</body>
</html>
在Chrome的运行结果如下图。
Chrome运行结果
但是在IE8运行如下
IE8以下如下
黄色的部分是开发者工具选中时的盒子模型，这说明IE8以下没有将header按照正常的标签进行样式渲染。说白了就是不认识他，那应该如何处理这种情况呢。
方法一
- 第一步标签必须设置为块标签
header{
width: 100%;
height: 200px;
background: red;
display:block;
}
- 第二部使用js创建对应的标签(必须添加在网页的头部)
<script>
document.createElement('header');
</script>
这里创建的标签不需要手动添加在DOM中，网页就会识别这样的标签了。
运行结果如下：
缺点：这种方式虽然能够解决这个问题，但是每一种语义化的标签都需要js去创建标签，这是很不合理的。
方法二
在第一种方法的基础上，我们在不确定哪些语义化标签可能会用到需要去创建，我们可以使用html5shiv.js插件实现这部分工作。
插件源码地址：https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js
CDN地址：https://www.bootcdn.cn/html5shiv/
只需要在页面中引入对应的脚本，就能够实现语义化标签的兼容。
<script src="html5shiv.js"></script>
当然插件介绍还可以兼容其他一些浏览器比如低版本的Safari以及FF。
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
最后： 不是所有的浏览器都有必要加载这么一段js脚本，所以需要我们按需加载一下。
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
关于上面的条件注释语法，可以观看我的另一篇文章。HTML条件注释
网友评论