如何用HTML5制作網頁？
時間：2010-06-19 作者：網友 來源：互聯網根據你們詢問的人，HTML 5不是邁向創造更語義化的網絡的下一個重要步伐，就是用一系列不完整的標簽和標記大雜燴讓網絡陷入困境的災難。
爭論雙方的問題在于，很少的站點在自然環境下使用HTML 5，所以現在所認識到的問題的理論解決方案仍然在很大程度上未經考驗。
即便如此，我們不難發現下一代網絡標記工具的好處和潛在的問題。
內容章節
- HTML 5有什么不同？
- 最終，一個任何人都可以記住的文檔類型
- 最基本的語義結構
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
- 把他們放在一起
- 為新元素編寫樣式
- 兼容老的瀏覽器
- 現在你可以使用HTML 5了，但你會用么？
HTML 5有什么不同？
首先，我們通過HTML 5表達什么？First off， what do we mean by HTML 5？理論上，我們表達所有的事——新的語義結構標簽，例如canvas或者離線儲存等API規范，以及新的內聯語義標簽。盡管如此，我們把實際的原因 （PS：瀏覽器支持問題）僅僅局限于結構標簽。canvas，離線儲存，本地視頻或者地理定位API都很絕妙，然而他們還不能被所有瀏覽器一致的支持。
“但是等等”你說，“大多數瀏覽器也都不支持新的結構元素！”這是真的，但他們中的絕大多數將 會很樂意去接受你想要創建的任何標簽。甚至連IE6也可以處理新標簽，盡管如果你想要使用CSS設置樣式，你需要一點JavaScript的幫助。
當你對新標簽設置樣式時，你需要記住一件事，那就是未知標簽在大部分瀏覽器中沒有默認樣式。他 們同時被認為是行級元素。盡管如此，由于大部分HTML 5的新標簽可以構造，我們將讓他們擁有塊級元素的行為。解決方法是確認你在CSS樣式中包含了display:block;。
為了幫助了解當今HTML 5的一些新玩意兒，我們現在就進入正題，開始使用一些新的結構元素。
最終，一個任何人都可以記住的文檔類型
我們創建HTML 5文檔第一件需要做的事情就是使用新的文檔類型。現在，如果你還清楚的記得HTML 4或者XHTML 1.x的文檔類型，你真是一個比我們更強的淘氣鬼。每當我們新建一個頁面，我們必須打開一個舊的文件，剪切并粘貼文檔類型定義。
這真是痛苦，也是為什么我們喜歡新的HTML 5文檔類型。你準備好了么？他出現了：
<!DOCTYPE html>
不會太難記。簡單并且容易理解。不區分大小寫。
這個構想是停止HTML版本化，使向后兼容變得更容易。從長遠看是否成功是另外的事情，但至少 他節省了你輸入的平均時間。
最基本語義結構
我們已經將我們的頁面定義為HTML 5文檔。到現在為止，一切都還不錯。現在，這些我們已經聽說的新標簽到底是什么？
在我們鉆研新標簽前，想想你一般網頁的結構，大概像這樣：
<html>
<head>
...stuff...
</head>
<body>
<div id="header">
<h1>My Site</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id=content>
<h1>My Article</h1>
<p>...</p>
</div>
<div id="footer">
<p>...</p>
</div>
</body>
</html>
- 相關推薦
- 能讓IE支持HTML5的解決方案
- 谷歌棄Gears瀏覽器插件 轉重點開發HTML5
- 采用HTML5搭建的多個網站嘗鮮試用
- 體驗HTML5 Canvas對象的強大 五款在線繪圖應用示例
- HTML5新特性：用鏈接預取功能給網站提速
- 神奇的HTML5動畫效果演示網站
- 網頁設計師必收藏的十五個HTML5資源
- 十三個網站案例讓你提前體驗HTML5和CSS3的魅力
- 基于HTML5的繪圖程序Muro，支持Wacom手寫繪圖板
- HTML5的一些的趣味小應用
- HTML5、CSS和JavaScript與Web移動應用的未來趨勢
- 十款基于HTML5開發的精彩WEB應用(HTML5網站演示)
- 學好HTML5必備的七個在線資源推薦
- HTML5教程之表單功能詳解
- 四個HTML 5標簽、屬性、事件及瀏覽器兼容性速查表分享
- 15個采用HTML5實現的網站界面設計欣賞
- HTML5的革新：語義更明確簡潔的結構
- 21款效果驚艷基于HTML5的應用程序欣賞
- 16個頗具創意的HTML5網站設計
- 能讓IE瀏覽器也支持HTML5標準的辦法
- 25個超炫的HTML5+CSS3網頁應用案例欣賞
- 2012年Web開發有關HTML5的14個預測
- 新手入門：HTML5是什么？
- 35個WEB開發必備的實用HTML5教程
- 18個國外HTML5網站布局編碼教程分享
- 10款HTML5框架推薦，WEB開發必備利器
- 8款很酷基于HTML5技術的網站設計欣賞
- 詳解有關于HTML5的七個誤解
- 10個超炫酷的HTML5和JS技術實驗性演示網站
- 8個優秀的基于HTML5的信息圖網站欣賞
- 網頁使用HTML5代碼需兼容IE的寫法分享
- HTML5新手入門教程之第一篇：什么是HTML5？
- 從9個不同的方面深入分析HTML5的性能
- Google推薦：HTML5代碼的15條規范
- HTML5能否成為未來移動互聯網的APP？
- HTML5大綱算法對結構的影響 網頁優化必學
