22個HTML 5第一講
html5 技巧一：當今科技發(fā)展的速度真驚人，稍不留神，就可能無法跟上它的步伐。新一代的HTML-HTML5的發(fā)展也不停的帶給我們新的驚喜，我們將通過這篇文章向大家介紹一些HTML技巧。
1. 新的文檔類型（Doctype）
- <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
- “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- 上面這個既麻煩又難記的XHTML文檔類型你還在使用嗎？ 如果還是這樣的話，現(xiàn)在該切換到新的HTML5文檔類型了。
- <!DOCTYPE html>
現(xiàn)在只要這么簡單的15個字符就可以了。（注意：你的doctype的申明需要出現(xiàn)在你html文件的***行。）
2. 圖形（Figure）元素
你還在考慮用下面的代碼來標記圖片嗎？
- <mg src=http://www.css3-html5.com/HTML5-Tutorial/”path/to/image” alt=”About image” />
- <p>Image of Mars. </p>
上面的代碼它不能以簡單而且富有語義關(guān)聯(lián)的方式與圖形的標題關(guān)聯(lián)，因為它僅僅是用段落標記以及圖片元素包裹，而 HTML5通過引進<figure>元素，改進了這一點。當結(jié)合 <figcaption> 元素使用時，我們就可以將圖形標題與圖形配對起來。代碼如下：
- <figure>
- <img src=http://www.css3-html5.com/HTML5-Tutorial/”path/to/image” alt=”About image” />
- <figcaption>
- <p>This is an image of something interesting. </p>
- </figcaption>
- </figure>
3. 重新定義<small>
原來你可以利用<small>元素來創(chuàng)建與logo密切相關(guān)的副標題。不過，現(xiàn)在HTML5修改了這個用法，<small>元素被重新定義了，或者更恰當?shù)卣f，它現(xiàn)在用來代表小字或其他邊注（如，網(wǎng)站底部的版權(quán)聲明）。
4. 不再需要腳本、鏈接類型
很可能你仍然像下面的代碼一樣給你的鏈接和腳本標簽添加類型的屬性。
- <link rel=”stylesheet” href=http://www.css3-html5.com/HTML5-Tutorial/”path/to/stylesheet.css” type=”text/css” />
- <script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中，這已經(jīng)不再需要了。 意味著說這兩個標簽分別代表著樣式和腳本。因此，我們可以將它們的類型屬性都刪除掉。代碼如下：
- <link rel=”stylesheet” href=http://www.css3-html5.com/HTML5-Tutorial/”path/to/stylesheet.css” />
- <script src=”path/to/script.js”></script>
5. 使用還是不使用引號
記住，HTML5與XHTML不同，如果你不喜歡的話你不必用引號將屬性包裹起來。不過，要是你覺得用引號會讓你覺得更加舒服的話，當然也不會有任何問題。
- <p class=myClass id=someId> Start the reactor.
6. 使你的內(nèi)容可編輯
HTML5其中一個非常強大的功能就是"contenteditable"，顧名思義它將允許用戶編輯元素（包括他的子元素）內(nèi)包含的任何文本內(nèi)容。它的用途非常廣，如，簡單的任務清單或是基于wiki的站點也非常實用，此外，它還有一個優(yōu)勢就是利用了本地的存儲。
- <!DOCTYPE html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″>
- <title>untitled</title>
- </head>
- <body>
- <h2> To-Do List </h2>
- <ul contenteditable=”true”>
- <li> Break mechanical cab driver. </li>
- <li> Drive to abandoned factory
- <li> Watch Video of self </li>
- </ul>
- </body>
- </html>
或者，按照第五條技巧所說的，你也可以將第九行的代碼寫成這樣（不用引號）：
- <ul contenteditable=true>
7. 電子郵件輸入
如果我們應用"電子郵件"類型來指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結(jié)構(gòu)的字符串輸入。雖然說內(nèi)置的表單驗證很快就會到來，但是我們也不能完全依靠這個。比較舊的瀏覽器不理解這種"電子郵件"類型，它們只會簡單地返回到普通的文本框。
- <!DOCTYPE html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″>
- <title>untitled</title>
- </head>
- <body>
- <Form action=”" method=”get”>
- <label for=”email”>Email:</label>
- <input id=”email” name=”email” type=”email” />
- <button type=”submit”> Submit Form </button>
- </form>
- </body>
- </html>
在說到瀏覽器所支持和不支持的元素以及屬性時，你必需知道當前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時才支持電子郵件驗證。不過，它不支持占位符屬性（下面即將要講到的）。***，雖然你可以使用這種形式的驗證，不過不要過分依賴它。
