HTML5驗(yàn)證：精簡(jiǎn)代碼，提升網(wǎng)頁(yè)質(zhì)量

關(guān)鍵要點(diǎn)

• HTML5驗(yàn)證更注重元素的正確使用、屬性值的準(zhǔn)確性和必需屬性的完整性，而非代碼風(fēng)格。它仍然是確保您的標(biāo)記符合HTML5規(guī)範(fàn)的寶貴工具。
• XHTML和HTML5驗(yàn)證之間存在諸多差異，包括可選元素和屬性、大小寫(xiě)不敏感以及先前已棄用的元素的有效性。建議您選擇一種風(fēng)格並在整個(gè)HTML5項(xiàng)目中保持一致性。
• HTML5驗(yàn)證對(duì)於確保網(wǎng)頁(yè)正確格式化並能被瀏覽器解釋至關(guān)重要，從而提高性能、減少錯(cuò)誤並改善可訪問(wèn)性。有多種在線和離線工具可用於HTML5驗(yàn)證，對(duì)於那些希望遵守更嚴(yán)格準(zhǔn)則的用戶(hù)，可以使用更嚴(yán)格的驗(yàn)證工具。

(以下摘錄自Alexis Goldstein、Louis Lazaris和Estelle Weyl合著的書(shū)籍《HTML5 & CSS3 for the Real World, 2nd Edition》。該書(shū)在全球各地的商店有售，您也可以在此處購(gòu)買(mǎi)電子書(shū)版本。)

在上一章中，我們介紹了HTML5中的一些語(yǔ)法更改，並觸及了一些與驗(yàn)證相關(guān)的問(wèn)題。讓我們更詳細(xì)地?cái)U(kuò)展這些概念，以便您更好地理解頁(yè)面驗(yàn)證方式的變化。

HTML5驗(yàn)證器不再關(guān)注代碼風(fēng)格。您可以使用大寫(xiě)或小寫(xiě)字母，省略屬性中的引號(hào)，排除可選的閉合標(biāo)籤，並且可以隨意不一致，您的頁(yè)面仍然有效。

那麼，您可能會(huì)問(wèn)，什麼才算作HTML5驗(yàn)證器的錯(cuò)誤呢？它會(huì)提醒您元素的錯(cuò)誤使用、不應(yīng)包含的元素、缺少必需屬性、屬性值錯(cuò)誤等等。簡(jiǎn)而言之，驗(yàn)證器會(huì)讓您知道您的標(biāo)記是否與規(guī)範(fàn)衝突，因此在開(kāi)發(fā)頁(yè)面時(shí)它仍然是一個(gè)有價(jià)值的工具。

為了讓您了解HTML5與過(guò)於嚴(yán)格的XHTML有何不同，讓我們來(lái)看一些細(xì)節(jié)。這樣，您就可以理解在HTML5中什麼被認(rèn)為是有效的：

在基於XHTML的語(yǔ)法中，某些在XHTML中是必需的元素在HTML5中不再是必需的，才能使文檔通過(guò)HTML5驗(yàn)證；例如html和body元素。這是因?yàn)榧词鼓鷮⑺鼈兣懦谕?，瀏覽器也會(huì)自動(dòng)將它們包含在文檔中。

• 空元素（即沒(méi)有相應(yīng)的閉合標(biāo)籤或沒(méi)有任何內(nèi)容的元素）不需要使用閉合斜杠關(guān)閉；例如meta和br。
• 元素和屬性可以是大寫(xiě)、小寫(xiě)或混合大小寫(xiě)。
• 屬性值周?chē)恍枰?hào)。例外情況是使用多個(gè)空格分隔的值，或者URL作為值出現(xiàn)並且包含帶有等號(hào)（=）字符的查詢(xún)字符串。
• 在基於XHTML的語(yǔ)法中，某些在XHTML中是必需的屬性在HTML5中不再是必需的。例如，script元素的type屬性和html元素的xmlns屬性。
• 一些在XHTML中已棄用且因此無(wú)效的元素現(xiàn)在有效；一個(gè)例子是embed元素。
• 不出現(xiàn)在任何元素內(nèi)但直接放在body元素內(nèi)的雜散文本會(huì)使XHTML文檔無(wú)效；HTML5並非如此。
• 一些在XHTML中必須關(guān)閉的元素可以在HTML5中不關(guān)閉而不會(huì)導(dǎo)致驗(yàn)證錯(cuò)誤；例如p、li和dt。
• form元素不需要action屬性。
• 表單元素（例如input）可以作為form元素的直接子元素；在XHTML中，需要另一個(gè)元素（例如fieldset或div）來(lái)包裝表單元素。
• textarea元素不需要rows和cols屬性。
• 鏈接的target屬性以前在XHTML中已被棄用。它現(xiàn)在在HTML5中有效。
• 正如本章前面所討論的，塊級(jí)元素可以放在鏈接（a）元素內(nèi)。
• 如果＆字符（&）作為頁(yè)面上的文本出現(xiàn)，則不需要將其編碼為&。

這是一個(gè)相當(dāng)全面（儘管並非詳盡無(wú)遺）的XHTML嚴(yán)格模式和HTML5驗(yàn)證之間差異的列表。有些是風(fēng)格選擇，因此我們鼓勵(lì)您選擇一種風(fēng)格並保持一致性。我們?cè)谏弦徽轮懈攀隽艘恍┦走x的風(fēng)格選擇，歡迎您將這些建議融入您自己的HTML5項(xiàng)目中。

注意：更嚴(yán)格的驗(yàn)證工具

如果您想使用更嚴(yán)格的準(zhǔn)則來(lái)驗(yàn)證標(biāo)記的語(yǔ)法風(fēng)格，則可以使用一些工具來(lái)幫助您。其中一個(gè)工具是Philip Walton的HTML Inspector。要使用它，您可以在開(kāi)發(fā)階段將腳本包含在您的頁(yè)面中，然後在開(kāi)發(fā)者工具中打開(kāi)瀏覽器的JavaScript控制臺(tái)並運(yùn)行命令HTMLInspector.inspect()。這將在控制臺(tái)中直接顯示許多警告和建議，說(shuō)明如何改進(jìn)您的標(biāo)記。 HTML Inspector還允許您更改配置以根據(jù)自己的需求自定義工具。

總結(jié)

到目前為止，我們已經(jīng)了解了HTML5中幾乎所有新的語(yǔ)義和語(yǔ)法更改。其中一些信息可能一開(kāi)始難以消化，但別擔(dān)心！熟悉HTML5的最佳方法是使用它——從您的下一個(gè)項(xiàng)目開(kāi)始。嘗試使用我們?cè)谏弦徽轮薪榻B的一些結(jié)構(gòu)元素，或者本章中看到的一些文本級(jí)語(yǔ)義。如果您不確定某個(gè)元素的用途，請(qǐng)返回並閱讀有關(guān)該部分的內(nèi)容，或者更好的是，閱讀規(guī)範(fàn)本身。雖然該語(yǔ)言肯定比本書(shū)中的文本更枯燥（至少我們希望如此?。?guī)範(fàn)可以更完整地描述給定元素的預(yù)期用途。請(qǐng)記住，HTML5規(guī)範(fàn)仍在開(kāi)發(fā)中，因此我們介紹的內(nèi)容中的一些內(nèi)容在新的HTML5.1版本（或者如果您按照WHATWG的定義，則在HTML5“動(dòng)態(tài)標(biāo)準(zhǔn)”中）中仍然可能會(huì)發(fā)生變化。規(guī)範(fàn)將始終包含最新的信息。

在下一章中，我們將研究HTML5中引入的關(guān)鍵新功能部分：表單和與表單相關(guān)的功能。

HTML5文檔驗(yàn)證常見(jiàn)問(wèn)題解答（FAQ）

什麼是HTML5驗(yàn)證，為什麼它很重要？

HTML5驗(yàn)證是根據(jù)HTML5規(guī)範(fàn)的正式語(yǔ)法規(guī)則檢查網(wǎng)頁(yè)代碼的過(guò)程。這非常重要，因?yàn)樗梢源_保您的網(wǎng)頁(yè)正確格式化並且可以被瀏覽器正確解釋。這將帶來(lái)更好的性能、更少的錯(cuò)誤以及殘疾用戶(hù)的可訪問(wèn)性得到改善。此外，它還可以幫助SEO，因?yàn)樗阉饕娓矚g結(jié)構(gòu)良好且無(wú)錯(cuò)誤的網(wǎng)站。

如何驗(yàn)證我的HTML5文檔？

您可以使用W3C標(biāo)記驗(yàn)證服務(wù)等在線工具來(lái)驗(yàn)證您的HTML5文檔。只需輸入您的網(wǎng)頁(yè)URL或上傳您的HTML文件，該工具就會(huì)根據(jù)HTML5標(biāo)準(zhǔn)檢查它並報(bào)告任何錯(cuò)誤或警告。

什麼是最小有效的HTML5文檔？

最小有效的HTML5文檔是最簡(jiǎn)單的HTML5文檔，它仍然符合HTML5規(guī)範(fàn)設(shè)定的標(biāo)準(zhǔn)。它包括文檔類(lèi)型聲明、根元素（html）、head元素和body元素。

一些常見(jiàn)的HTML5驗(yàn)證錯(cuò)誤是什麼？

常見(jiàn)的HTML5驗(yàn)證錯(cuò)誤包括缺少閉合標(biāo)籤、元素嵌套不正確、使用已棄用的元素或?qū)傩砸约巴浽谖臋n開(kāi)頭包含文檔類(lèi)型聲明。

如何修復(fù)HTML5驗(yàn)證錯(cuò)誤？

修復(fù)HTML5驗(yàn)證錯(cuò)誤包括根據(jù)驗(yàn)證工具提供的錯(cuò)誤消息更正代碼。這可能包括添加缺少的標(biāo)籤、刪除或替換已棄用的元素或更正元素的嵌套。

文檔類(lèi)型聲明在HTML5驗(yàn)證中的作用是什麼？

文檔類(lèi)型聲明是HTML5文檔的第一行，它告訴瀏覽器頁(yè)面是用哪個(gè)版本的HTML編寫(xiě)的。它對(duì)於驗(yàn)證至關(guān)重要，因?yàn)樗梢詭椭鸀g覽器和驗(yàn)證工具正確解釋其餘代碼。

我可以驗(yàn)證包含CSS和JavaScript的HTML5文檔嗎？

是的，您可以驗(yàn)證包含CSS和JavaScript的HTML5文檔。但是，驗(yàn)證只會(huì)檢查HTML代碼。對(duì)於CSS和JavaScript，您需要使用單獨(dú)的驗(yàn)證工具。

使用HTML5驗(yàn)證器的優(yōu)勢(shì)是什麼？

使用HTML5驗(yàn)證器可以幫助您在錯(cuò)誤導(dǎo)致問(wèn)題之前捕獲並修復(fù)它們。它可以提高您網(wǎng)站的性能、可訪問(wèn)性和搜索引擎排名。它也是學(xué)習(xí)更多關(guān)於HTML和提高您的編碼技能的好方法。

我可以離線驗(yàn)證HTML5文檔嗎？

是的，有一些工具允許您離線驗(yàn)證HTML5文檔。這些工具包括您可以安裝在計(jì)算機(jī)上的軟件應(yīng)用程序和命令行工具。

HTML5驗(yàn)證和HTML5一致性檢查有什麼區(qū)別？

HTML5驗(yàn)證是關(guān)於根據(jù)HTML5規(guī)範(fàn)檢查代碼的語(yǔ)法。另一方面，一致性檢查是關(guān)於確保您的網(wǎng)頁(yè)遵循Web設(shè)計(jì)和可訪問(wèn)性的最佳實(shí)踐，以及語(yǔ)法正確。

以上是驗(yàn)證HTML5文檔 - 站點(diǎn)點(diǎn)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！