該執行個體向 HTML 添加的新的元素,并為該元素定義樣式,元素名為 <myHero> :
執行個體:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>為 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一個标題</h1>
<p>我的第一個段落。</p>
<myHero>我的第一個新元素</myHero>
</body>
</html>
注:JavaScript 語句 document.createElement("myHero") 是為了為 IE 浏覽器添加新的元素。
Internet Explorer 浏覽器問題
你可以使用以上的方法來為 IE 浏覽器添加 HTML5 元素,但是:Internet Explorer 8 及更早 IE 版本的浏覽器不支援以上的方式。
我們可以使用 Sjoerd Visscher 建立的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代碼是一個注釋,作用是在 IE 浏覽器的版本小于 IE9 時将讀取 html5.js 檔案,并解析它。
注意:國内使用者請使用百度靜态資源庫(Google 資源庫在國内不穩定):
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
針對IE浏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識别,這些新元素不能作為父節點包裹子元素,并且不能應用CSS樣式。
完美的 Shiv 解決方案
執行個體:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
學技術,從W3Cschool開始!
</article>
</body>
</html>
注:html5shiv.js 引用代碼必須放在 <head> 元素中,因為 IE 浏覽器在解析 HTML5 新元素時需要先加載該檔案。