HTML5標準學習-文件結構詳解-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5標準學習-文件結構詳解

黄舟

Mar 27, 2017 pm 03:34 PM

說起HTML的結構，很多人都能說得頭頭是道，一般來說答案可能是這樣的：

一個DOCTYPE，一個html，裡面有head和body元素。

這當然不能說是不正確的，但是如果問到一個最小的HTML來源檔案必須有哪一些東西的話，恐怕很少有人能正確地做出回答。

先來回答這個問題，一個最簡的HTML5原始碼檔案需要的內容如下：

<!DOCTYPE html>

是的，就這樣，一個字元不多，一個字元不少，除了大小寫可任意變化外，其他的任何內容都是不能變動的。

那麼究竟是怎麼樣的規則，導致一個最簡的源碼檔案必須有doctype宣告呢？根據標準，一個HTML文檔有以下內容組成（嚴格依照順序）：

一個BOM標記，且這個BOM標記必須為U+FEFF。
0-n個空格或註解。
DOCTYPE宣告。
0-n個空格或註解。
一個HTML元素。
0-n個空格或註解。

這裡存在著一些和HTML4的不同，一個HTML4的最簡單原始碼檔案是這樣的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<title>这里是标题</title>

兩者的差異是顯而易見的：

HTML5把DOCTYPE修改為更簡單的，這個已經眾所皆知了。
在HTML4中多了一個<title></title>標籤。

這裡的重點就是<title></title>標籤了，關於這個標籤，在HTML4.01標準中是這麼說的：

#Every HTML document must have a TITLE element in the HEAD section.

也即是說，HTML4要求<title></title>標籤是必須存在的。

而在HTML5的標準中，又是這麼說的：

There must be no more than one title element per document.

HTML5中只設定了<title></title>標籤數量的上限，卻沒有指明下限，也就是說，沒有<title></title>的文檔已經被視為一個合法的文檔了。

對於DOCTYPE，HTML4中設定了6種DOCTYPE，HTML5中將DOCTYPE分為3種，這個在以後的章節中再具體說明。

再回過來看文檔組成，除去這樣並沒有多大意義的元素之外，組成的列表中還說明有一個HTML元素，但是最簡的源碼中卻沒有這東西。這是因為在HTML的規範中，一直存在著「隱式標籤」這樣的概念，關於隱式標籤，大致可以這麼解釋：

一部分元素，當滿足特定的前提條件時，其開始標籤或結束標籤可以在來源碼中省略。在這種情況下，被省略的標籤稱為「隱式標籤」。

需要注意的是，這裡的省略指的是在原始碼中省略，而在最終成型的DOM樹中，這個標籤是存在的，因此才稱為隱式標籤。因此上面最簡的源碼結構，在生成DOM樹後，其真正的結構是這樣的：

<!DOCTYPE html>

最後，再總結一下XHTML中的一些規範：

因為是XML，所以為了表示這是一個HTML文檔，必須有一個命名空間，其值為www.w3.org/1999/xhtml。
因為是XML，所以MIME type不能是text/html了，text/xml、application/xml、application/xml+html都是比較好的選擇。
因為是XML，必須有根元素，根元素為，也就是的開始與結束標籤不能省略了。
因為是XML，所有元素只要有了開始標籤，就不能沒有結束標籤，或是自閉合。
因為是XML，所有元素都得嚴格遵守大小寫，元素名稱必須為小寫。

因為是XML，文件變得嚴格了許多，也因為是XML，其可讀性和規範性提高了不少。但最終，我們始終要在HTML的寬容性和XML的規範性之間找到最佳的平衡點，一味地追求極端始終是個錯誤。

以上是HTML5標準學習-文件結構詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。