解讀 HTML5：建議、技巧和技術

作者: sofish 發布時間: 2010-09-02 20:53 閱讀: 1107 次推薦: 0 原文鏈接 [收藏]

摘要：無論你想簡單了解，還是深入學習HTML5。這篇文章將會有助于您進一步了解和學習HTML5。

　　現今我們能用 HTML5 嗎，能用它做些什么呢，是否真的是 Flash 殺手？想必你也注意到了這些日漸增長且常被問起的類似問題，被討論著，甚至被回答過。在我看來，你必須自己回答這些基本的問題。

　　這篇文章的本意是想幫你通過一些基本指南的學習，以輕松學習代碼模板。一旦你熟悉了這些基本，并想更進一學習，你還將會找到更多提供了建議、技巧和技術的有用資源。

　　HTML 5 特性

　　官方詳細的文檔是尋找 HTML5 特性的最好地方，當然你還可以輕松通過 W3Schools 來學習HTML5 標簽。我們將會在文章中涉及到以下的特性：

語義化標記
Form 表單增強功能
視頻/音頻
畫布（Canvas）
可編輯內容
拖放
穩健的數據存儲

　　檢測瀏覽器支持

　　在你開始嘗試 HTML5之前，需要知道各主流瀏覽器的支持狀況。這些有用的資源，將可以幫助你向著正軌走：

　　你還可以運行 Javascript（用Javascript 檢測瀏覽器特性）來檢測 HTML5 特性的支持。你還應該用用Modernizr：一個非常不錯的檢測 HTML5/CSS3 本地支持的 Javascript 庫。如果你選擇用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。

　　你可能也會想留意不斷變化的"瀏覽器市場份額分享"—這些信息對于你決定用何種解決或折衷的方法將會是非常必要的。

　　值得注意的變更點

　　除了新的特征，你還應該記下這些重要的變更點：

簡潔的 DOCTYPE HTML5 只需一個簡潔的文檔類型：<!DOCTYPE html>。它有意不使用版本，因此文檔將會適用所有版本的HTML。
簡單易記的語言標簽你并不需要在<html> 中使用xmlns 或xml:lang 標記。<html lang="en"> 將對 HTML5 有效。
簡單易記的編碼類型你現在可以在 meta 標簽中使用"charset"：<meta charset="utf-8″/>
不需要閉合標簽在 HTML5 中，空標簽（如：br、img 和 input ）并不需要閉合標簽。
廢棄的標簽下面這些標簽并不被 HTML5 支持：
<acronym>、<applet>、<basefont>、<big>、
<center>、<dir>、<font>、<frame>、<frameset>、
<noframes>、<s>、<strike>、<tt>、<u> 和<xmp>

　　簡單代碼示例:

1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>HTML5 Document</title>
6 </head>
7 <body>
8
9 </body>
10 </html>

　　你可以使用HTML5 Validator 或 W3C Markup Validation Service 來測試你的 HTML5 文檔。

　　語義化標記

　　HTML5 新增的一些新標簽除了不僅僅是更具語義的<div> 標簽的替代品，并不提供額外的功能。這些都是新增的標簽：<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。
　　這些標簽被除了IE 外的所有現代瀏覽器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName)的方法，讓你可以用來創建新的 HTML5 標簽。代替自己創建這些元素，你還可以用HTML5 Enabling Script 或 IE Print Protector —這些腳本將幫助 IE 正常處理 HTML5 元素的渲染。
你可能會想到添加 CSS Reset 到這些新元素上。這里是一些可以用在你以 HTML5 為基礎的項目的CSS Reset：

　　簡單代碼示例: 兼容 IE 的 HTML5 頁面布局

1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>HTML5 Semantic Markup Demo: Cross Browser</title>
6 <link rel="stylesheet" href="html5reset.css" type="text/css" />
7 <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
8 
11 </head>
12 <body>
13 <header>
14 <hgroup>
15 <h1>Page Header</h1>
16 <h2>Page Sub Heading</h2>
17 </hgroup>
18 </header>
19 <nav>
20 <ul>
21 <li><a href="#">Home</a></li>
22 <li><a href="#">Projects</a></li>
23 <li><a href="#">Portfolio</a></li>
24 <li><a href="#">Profile</a></li>
25 <li><a href="#">Contact</a></li>
26 </ul>
27 </nav>
28 <article>
29 <header>
30 <h1>Article Heading</h1>
31 <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
32 </header>
33 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
34 <section>
35 <header>
36 <h1>Section Heading</h1>
37 </header>
38 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
39 <footer>
40 <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
41 </footer>
42 </section>
43 <section>
44 <header>
45 <h1>Section Heading</h1>
46 </header>
47 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
48 <figure>
49 <img src="item-1.png" alt="Club">
50 <img src="item-2.png" alt="Heart">
51 <img src="item-3.png" alt="Spade">
52 <img src="item-4.png" alt="Diamond">
53 <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
54 </figure>
55 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
56 <footer>
57 <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
58 </footer>
59 </section>
60 <footer>
61 Article Footer
62 </footer>
63 </article>
64 <aside>
65 <header>
66 <h1>Siderbar Heading</h1>
67 </header>
68 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
69 </aside>
70 <footer>
71 Page Footer
72 </footer>
73 </body>
74 </html>

注意：沒有一個 div標簽，id 或 class 屬性被使用到—簡潔、小巧和更語義化的標記(View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 來檢測你的 HTML5 文檔。