101
《JavaScript設計與開發新思維》——2.2 HTML5入門
本節書摘來自異步社區《JavaScript設計與開發新思維》一書中的第2章，第2.2節，作者：【美】Larry Ullman著，更多章節內容可以訪問雲棲社區“異步社區”公眾號查看
2.2 HTML5入門
我寫這本書的時候已經臨近2012年，HTML5是一個奇妙的東西，它已經以某種形式存在了數年，但是不久之前XHTML2.0停止發展之後，HTML5才成為了Web開發的事實標準。HTML5還沒有正式地標準化和發布，這意味著不管何時出現HTML5的最終實現方案，無疑都會與現在討論的HTML5不同。通常，由於Web瀏覽器普遍存在而又多變，明智的人應該避開這類新事物。但是你可以采取許多方法，在兩個方麵上都得到最大的益處：使用一些HTML5特性，而又不破壞用戶的體驗。我們首先來看一個普通的HTML5模板，然後學習最好的新型HTML5表單元素。
提示： HTML5不隻是一個單獨的標準，相反，它是對HTML標準與一組其他的新特性的統稱。
2.2.1 一個HTML5模板
下麵這個代碼塊展示了一個HTML5模板，我將把它作為本書中所有HTML腳本的基礎。仔細觀察這段代碼，然後我將詳細介紹它的特殊性。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Template</title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
</head>
<body>
<!-- template.html -->
</body>
</html>
從第一行開始，我們已經說過，簡單的HTML5 DOCTYPE將使瀏覽器處於標準模式，這是我們的第一個目標。接下來是一個html元素，其中包含head和body元素。奇怪的是，HTML5不需要head元素，但是不使用它我感覺不安。不管是否使用head，HTML5仍然需要一個title標記。你還應該習慣於指出編碼（也就是使用中的字符集）。正如你所看到的那樣，meta標記也得到了簡化（第4行）。如果你不熟悉字符集和編碼，應該對這一主題展開研究，因為UTF-8編碼支持所有語言的字符，我們通常使用它。你還會看到，我已經為html開始標記（第2行）添加了lang屬性，但是它也不是必需的。
注意： 編碼必須在文檔的開頭指明，所以始終將它放在head開始標記之後，title元素之前。
這就是一個HTML5文檔的基本語法。在本章的下一小節中，我將重點介紹在本書中使用HTML5的主要原因：一些新穎且非常實用的表單元素。但是，現在我要先介紹兩個有關HTML5模板的知識。首先，如果你和本書中的例子一樣，打算使用外部樣式表，正確的語法是：
<link rel="stylesheet" href="css/styles.css">
你可能注意到，HTML5中的link元素不使用type屬性，因為rel屬性的值為stylesheet時，假定類型為text/css。
其次，HTML5定義了許多語義元素，如article、footer、header、nav和section。這些標記的創建是通過挖掘Web上最常見的ID和類元素確定的。例如，在HTML4中，許多設計人員使用一個ID為header的div表現頁麵最開始的部分；然後相應地用CSS設置div的樣式和位置，而在HTML5中，你隻需要創建一個header元素，然後設置樣式即可。大部分老的瀏覽器無法處理HTML5，但在遇到這些新的HTML標記時也沒有問題，仍然能夠正確地應用樣式。遺憾的是，Internet Explorer 9以前的版本無法為未知元素應用樣式，也就是說運行IE8或者更早版本的用戶無法看到正確格式化的文檔。這個問題的解決方案是一段巧妙的、被稱為“HTML5 shiv”的JavaScript，這段代碼由一群非常能幹的人創建，它生成新類型的元素，效果是使Internet Explorer發現這些元素並且正確地設置樣式。HTML5 shiv程序庫的源代碼已經公開，目前存在於Google Code上，使用如下代碼可以加入它：
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
上述代碼塊以“條件注釋”開始和結束，這種注釋隻在Internet Explorer中得到支持。注釋中的特殊條件檢查當前瀏覽器版本是否低於（lt）IE9。如果條件成立，則自動向頁麵添加script標記。因為這些條件注釋僅對IE有意義，其他瀏覽器將不會試圖加載這個腳本。
你可能已經注意到，這個script標記和link標記類似，也不使用type屬性—假定為text/javascript。
在第3章“行業工具”中，我將列舉一些HTML驗證器。在本書寫作的時候，這些驗證器都是實驗性的，但是HTML5也處於不明確的試驗階段！
注意： 本書的例子中很少有需要包含HTML5 shiv的新元素，但是我將堅持使用這個模板（包括shiv）。
2.2.2 HTML5表單元素
我決定不顧HTML5尚未定稿這一事實，在本書中使用HTML5，原因有二。第一個原因是HTML5明顯是Web開發的未來。另一個原因是HTML5提供的新表單元素有利於更好的用戶體驗。特別是下列新的輸入域類型：
email
number
range
search
tel
url
這些元素用於讓用戶輸入電子郵件地址、用“微調框”輸入數字（圖2.2）、用滑動塊輸入數字、搜索詞和電話號碼或者URL。對於支持這些元素的瀏覽器，內建的客戶端驗證將確保輸入的數據有效。例如，URL輸入域隻允許用戶輸入一個URL（圖2.3，在輸入域類型得到支持時）。這些輸入域類型還有額外的好處。例如，當iPhone等移動設備上電子郵件輸入域得到焦點時，將會為用戶提供一個輸入電子郵件地址的鍵盤。另一個例子是，Search輸入域類型的樣式類似Mac的標準搜索框，帶有圓角（圖2.4，但是不會自動包含“Search…”文本）。
使用這些新的元素是安全的，因為對於不支持它們的瀏覽器，用戶將得到一個標準的文本輸入框。而且，瀏覽器默認情況下還會在同一行內渲染未知的元素，所以使用這些新的輸入域類型甚至不會影響你的布局！
HTML5表單還定義了一些值得考慮的新輸入域屬性。第一個是autofocus，它指出該元素在表單加載時獲得瀏覽器的焦點：
<input type="text" name="username" autofocus>
注意： 在編寫本書的時候，在所有瀏覽器中，Opera對這些新輸入域類型的支持最好。
第二個屬性是placeholder，該屬性設置了輸入域應有的初始文本值（參見圖2.4）：
<input type="search" placeholder="Search... ">
HTML5還引入了required屬性，它與HTML5的自動表單驗證綁定，存在required屬性時，用戶為元素提供的數據必須通過相關驗證。例如，如果一個電子郵件地址是必需的，用戶必須在此輸入語法有效的電子郵件地址。當一個元素不是必需的時候，不需要提交任何數據，但是如果提供了數據，它仍然必須通過驗證（圖2.5和圖2.6）。
Primary Email: <input type="email" name="email1" required>
Secondary Email: <input type="email" name="email2">
為了限製文本元素提交的文本總數，可以使用maxlength屬性。這個屬性已經出現多年，但是現在綁定得更加緊密（不同的瀏覽器對過多文本的響應方式不同），甚至可以應用到文本區域（Textarea元素）：
<textarea name="comments" rows="8" cols="40" maxlength="300">
</textarea>
最後，在form開始標記添加novalidate屬性可以禁用自動表單驗證：
<form action="somepage.php" method="get" novalidate>
預先警告，本書中的一些示例（特別是在前幾章）使用JavaScript執行驗證。如果你用支持HTML5的瀏覽器測試這些例子，就需要為表單添加novalidate屬性，否則瀏覽器不會讓無效的數據進入JavaScript。
現在你已經知道了使用HTML5的意義，讓我們回到JavaScript吧！
HTML5 與XHTML
XHTML要求嚴格的XML語法，這是我對它的喜愛程度超過HTML的原因之一（強製嚴格的行為能減少錯誤）。更嚴格的XHTML有幾條不適用於HTML的規則，特別是： - 沒有結束標記的元素如img、input和br，必須在開始標記中用斜杠結束，如： < img src="file.png" alt="img" /> - 如上述代碼，屬性必須加上引號 - 屬性始終需要設值，如： < option value="yes" selected="selected">Yes< /option> 但是，HTML5和較早版本的HTML一樣，不要求嚴格的XML語法。這種做法蘊含了許多意義，包括這樣的事實：上述的規則均不適用於HTML5。上述的兩個XHTML代碼片斷可以寫成如下的有效HTML5： < img src=file.png alt=img> < option value=yes selected>Yes< /option> 個人觀點，我願意去掉斜杠結束符和屬性值（在恰當的時候），因為這樣語法會更清晰而且不影響代碼的含義。但是，我仍然建議為屬性加上引號。原因之一是這樣做能夠突出屬性值。其次，有些場合下，你必須為屬性值加上引號，例如在屬性裏有空格的時候： < img src="file.png" alt="My Vacation"> 最後，因為一些屬性可能必須加上引號，所以如果所有屬性都例行地加上引號，代碼的一致性就會更好—更好的一致性總是代表著更好的編碼。
提示： HTML5還創建一個新的pattern屬性，可將元素驗證與一個正則表達式綁定。
最後更新：2017-06-09 16:31:46