HTML5入门之样板和兼容IE浏览器篇
如果你看好HTML5，你一定會用HTML5來重構您的網站，不妨來嘗試一下，如何構建一個完整的HTML 5 Web頁面？
不可忽視的 DOCTYPE (文檔類型)
在所有 HTML 文檔中規定文檔類型很重要，這樣瀏覽器才能了解所預期的文檔類型.。<!DOCTYPE> 聲明告知瀏覽器文檔所使用的 HTML 規范。
HTML5有了新的改變，HTML 5 是使用新的doctype，它為我們省去了HTML4 和 XHTML 難以記憶的公共標識符（PUBLIC）和DTD.
因為以前的HTML 4.01 基于 SGML，HTML 4.01 中的 doctype 需要引用一個 DTD，HTML 5 不基于 SGML，也不需要引用 DTD，但是需要聲明文檔類型讓瀏覽器按照它們應該的方式來運行。
在 HTML5 中，文檔類型聲明很簡單：
<!DOCTYPE html>
在所有 HTML 文檔中規定文檔類型很重要，這樣瀏覽器才能了解所預期的文檔類型。
HTML5的文檔類型聲明，夠清爽的吧，也非常容易記住，而且此標簽沒有結束標簽 ， 對大小寫也不敏感。與現在廣泛使用的版本要簡單得多了，而且保持了向后兼容。
Google 的做法:
如果我們打開谷歌主頁的源代碼，我們會發現Google也在那么做。全部寫于一行的源代碼：
<!doctype html><html><head><title>Google</title><script>...
諷刺地說,谷歌的搜索和結果頁是不作驗證的，因為他們喜歡使用 一些像 <font> 等不提倡和廢棄的標簽，還有一些其他的錯誤，但沒關系。
他們可以仍然可以利用HTML 5解析規則(例如，在的沒有類型屬性的<style> 和 <script> 元素)通過使用正確的DOCTYPE,成為合格的文檔。
HTML 5 minified
如果你想得到一個更簡單的HTML5文檔，以下的寫法，使你得到一個更加迷你的文檔。
<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>
它通過了completely valid HTML 5。
HTML 5 complete & compatible
這是一個有效的和完整的HTML 5的樣板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
HTML5的兼容性處理
我們在上的代碼中發現了這樣的一段代碼：
它是作用就是使IE8和更低IE版本支持HTML5.
這就是我們最關心的瀏覽器對HTML5的支持問題。目前 HTML5 的structural elements
將在 (Firefox 3+, Safari 3+, Opera 9+, Chrome 1+)等瀏覽器中得到了支持。
如果你想了解更多的兼容數據，請看《CSS3 和 HTML5 兼容性測試 》日志。
如果要使用這些HTML5的新元素，第一步，我們要做的是將它們聲明為CSS的塊級元素：
/* Declaring HTML5 elements */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
display: block;
}
一個完整的HTML5的重置樣式表。
重置樣式源代碼來源：?HTML5 Reset Stylesheet文章。
我們要想得到IE8和以下版的支持，需要通過JavaScript支持。
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
我們建議你使用Remy Sharp’s的谷歌代碼托管 的JavaScript 來支持HTML5，并把它放在 頁面的< head > 里。
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
我們再來看一下完整的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
需要我們值得我們注意的是，我們必須保證我們的IE 瀏覽器沒有禁用JavaScript，對不對？
如果我們在個人的博客或設計論壇上應用了HTML5，當然不用擔心IE的JavaScript是否被禁用，出現問題當然不會有麻煩。如果你在新的商業項目上采用了HTML5，如果你的用戶禁用了IE瀏覽器的JavaScript的話，HTML5的新元素和相關的結構將被丟棄，就會出現網頁“裸奔”的效果（你是否覺得似曾相識），哈哈。
這個時候，就會有用戶自動找上門來，麻煩來了。你是否有個念頭想拋棄IE，但是你已經有點極端的傾向了。對于網絡應用程序，IE還是擔當者重要的角色，我們的國民都在使用IE，就連那些好用的國產瀏覽器也是IE的核心。放棄了IE就等于放棄了用戶，后果你已經想到了。
你也許會認為IE如果缺乏沒有JavaScript支持這些新的元素意味著你不能使用所有 HTML5新標簽。
但有兩個方面，我們仍然可以從中受益，一方面是HTML5為我們提供了豐富的語義，我們可以使用HTML5的語義名稱作為&<div>的類名，也算是向HTML5過渡吧，無論在 HTML4/XHTML1.0或HTML5中都可以使用。
你可能已經在使用一組標準的id 名稱或class名稱，好處是你得到了一組標準的類名語義。HTML5基本上是HTML4/XHTML1的一個超集，所以，只要不使用HTML5的新的內容，是可以在IE中工作的。
以上這些舉措，可以簡化未來的工作。
來源：http://cssrainbow.cn
版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明文章引用地址：http://www.iefans.net/html5-yangban-jianrong-ie/?作者：iefans
轉載于:https://www.cnblogs.com/ws_zst/archive/2013/05/22/3092195.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的HTML5入门之样板和兼容IE浏览器篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 国六b的实施影响买车吗
- 下一篇： 前端性能优化：使用媒体查询加载指定大小的