先說點(diǎn)基礎(chǔ)的。
HTML的發(fā)展歷程
我們在學(xué)習(xí)HTML的過程中，總是聽到HTML5這個詞，這到底是是什么意思呢。大概可以這么想就是相當(dāng)于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的嚴(yán)格模式，注意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的嚴(yán)格模式
快捷方式：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>
上門的幾個版本都有共同特點(diǎn)，都包含一個繁雜的DTD，或者稱之為DOCTYPE 文件類型。再來看看我們目前的HTML5的版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
沒有了復(fù)雜的DOCTYPE
快捷方式：html:5
</body>
</html>
是否有種耳目一新的感覺呢。當(dāng)然了HTML5不只是這里簡單的改變了這個DTD的內(nèi)容。我們今天討論一下其中比較簡單的一部分：語義化標(biāo)簽。
語義化標(biāo)簽
語義化是所有計算機(jī)語言追求的目標(biāo)，就是說你只要看到寫出來的內(nèi)容就知道他是什么定西。比如HTML5中引入了header標(biāo)簽標(biāo)示網(wǎng)頁的頭部，footer標(biāo)示網(wǎng)頁的底部，字面意思也可以理解成網(wǎng)頁的腳部。這些標(biāo)簽的加入使得HTML的代碼具有了更高的可讀性。
比如，我們之前的網(wǎng)頁結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="header">網(wǎng)頁的頭部</div>
<div class="nav">網(wǎng)頁的主體內(nèi)容</div>
<div class="footer">網(wǎng)頁的腳部</div>
</body>
</html>
這里網(wǎng)頁的每一個部分都是使用div來實現(xiàn)的。幾乎沒有任何可讀性。但是在HTML5中我們的結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<section></section>
<footer></footer>
</body>
</html>
基本上我們一眼就能夠看出來每一部分代碼的作用以及內(nèi)容。這對我們開發(fā)以及維護(hù)來說是非常友好的，同時也非常的有利于網(wǎng)頁SEO的。
但是問題來了：語義化標(biāo)簽在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的運(yùn)行結(jié)果如下圖。
但是在IE8運(yùn)行如下
黃色的部分是開發(fā)者工具選中時的盒子模型，這說明IE8以下沒有將header按照正常的標(biāo)簽進(jìn)行樣式渲染。說白了就是不認(rèn)識他，那應(yīng)該如何處理這種情況呢。
方法一
- 第一步標(biāo)簽必須設(shè)置為塊標(biāo)簽
header{
width: 100%;
height: 200px;
background: red;
display:block;
}
- 第二部使用js創(chuàng)建對應(yīng)的標(biāo)簽(必須添加在網(wǎng)頁的頭部)
<script>
document.createElement('header');
</script>
這里創(chuàng)建的標(biāo)簽不需要手動添加在DOM中，網(wǎng)頁就會識別這樣的標(biāo)簽了。
運(yùn)行結(jié)果如下：
缺點(diǎn)：這種方式雖然能夠解決這個問題，但是每一種語義化的標(biāo)簽都需要js去創(chuàng)建標(biāo)簽，這是很不合理的。
方法二
在第一種方法的基礎(chǔ)上，我們在不確定哪些語義化標(biāo)簽可能會用到需要去創(chuàng)建，我們可以使用html5shiv.js插件實現(xiàn)這部分工作。
插件源碼地址：https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js
CDN地址：https://www.bootcdn.cn/html5shiv/
只需要在頁面中引入對應(yīng)的腳本，就能夠?qū)崿F(xiàn)語義化標(biāo)簽的兼容。
<script src="html5shiv.js"></script>
當(dāng)然插件介紹還可以兼容其他一些瀏覽器比如低版本的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]-->
關(guān)于上面的條件注釋語法，可以觀看我的另一篇文章。HTML條件注釋
