Web標準:關于web標準的一些初學的知識
2024-07-11 08:20:59
供稿：網友
web 標準使您能通過最少的工作，生成可被最廣大受眾訪問的 web 站點。web 標準的承諾是：只需設計頁面一次，即可讓該頁以完全相同的方式在任何現代的瀏覽器中顯示和工作。例如，在按照標準生成以后，旨在在 microsoft internet explorer 中以某種方式顯示的頁可在其他瀏覽器（如，mozilla firefox、netscape navigator、opera、camino 和 safari）中以相同的方式顯示，而無需完成任何額外的工作。
web 標準的一個額外好處是 — 使 web 站點更易于為殘疾人士訪問。這是一個范圍廣泛的受眾群體，包括視力衰退的中年人士，剛剛在滑雪時跌斷胳膊的人士，以及完全失明的人士等。使用標準可避免無意中阻止那些具有暫時性或永久性身體殘疾的人士訪問 web 頁。
html 在正式的場合已經過時了。world wide web consortium (w3c) 于 2000 年 6 月 26 日發布了 xhtml 的第一個版本作為推薦標準。xhtml 標準的目標是取代 html。按照 w3c 的說法，“xhtml 是 html 的繼承者”(http://www.w3.org/markup/)。
xhtml 標準的制定者具有兩大目標：
在文檔結構和表示形式之間創建更明顯的分離。
將 html 重新表示為 xml 的應用程序。
為了實現第一個目標，w3c 一直在堅定地從 html 中刪除純粹描述性的元素和屬性（他們是從 html 4.0 開始這一過程的）。例如，xhtml 1.0 strict 不包含諸如 <font> 標記之類的元素或諸如 bgcolor 屬性之類的屬性，因為這些元素和屬性完全用于描述文檔的外觀，它們與文檔的結構沒有任何關系。
w3c 一直在努力使 web 站點設計人員和開發人員摒棄特定標記應當具有特定外觀這一觀念。例如，您可能會認為 <h1> 標記（標題標記）的用途是在頁中呈現大的加粗文本。這實際上是錯的。<h1> 標記用來在文檔中標記標題而不是其他任何東西。如何呈現標題標記由瀏覽器確定。視力衰退的人士使用的屏幕閱讀器可能利用抑揚頓挫的聲音來大聲朗讀標題標記的內容。不支持多個字體大小的 pda 可能用閃爍文本呈現標題標記的內容。
您不應當試圖使用諸如 <h1> 標記之類的頁元素來控制 web 頁的外觀。相反，您應當通過使用層疊樣式表來指示 web 頁的外觀。而且，您所使用的層疊樣式表應當是外部 層疊樣式表。請使用標記和屬性來標記文檔的結構，而使用樣式表來控制文檔的表示形式。
xhtml 的第二個目標是迫使 html 開發人員遵守更為嚴格的 xml 規則。按照 w3c 的說法，“xhtml 1.0 是 html 4.01 的作為 xml 1.0 應用程序的修訂”(http://www.w3.org/markup/)。換句話說，使用 xhtml 生成 web 頁時，實際上是在創建 xml 文檔。
xml 文檔具有比 html 文檔更嚴格的語法。例如，xml 區分大小寫，所有 xml 屬性都必須放在引號內，而且 xml 標記不能重疊。強迫 web 站點開發人員和設計人員遵守有更高要求的語言規則有很多好處。
好處之一，用 xhtml 標記編寫的頁具有更高的跨瀏覽器、跨設備和跨操作系統兼容性。如果在瀏覽器中打開傳統的 html 頁，瀏覽器將千方百計地呈現該頁。瀏覽器將試圖呈現該頁，即使您的 html 一團糟。例如，internet explorer（以及 firefox 和 opera）能夠很好地顯示下面的 html 頁。
<i><b>this is bold and italic</i> and this is bold </body></html>internet explorer 會恰當地顯示該頁 — 即使該頁缺少 <html> 和 <body> 開始標記，<b> 標記不具有匹配的結束標記，并且開始和結束 <i> 標記的大小寫不一致。所有主要的瀏覽器都能適應幾乎任何 html 標記“混合物”，并且不顧一切地呈現一些內容。
瀏覽器的這種適應行為是危險的，因為不同的瀏覽器（或相同瀏覽器的將來版本，或在不同操作系統上運行的相同瀏覽器）可能以不同方式呈現錯亂的 html。實際上，對于最新版本的 internet explorer、mozilla firefox 和 opera 而言，它們呈現無效 html 的方式驚人地一致。但是，一旦開始違反游戲規則，就不會得到任何保證。
然而，如果用 xhtml 的更嚴格的規則編寫 web 頁，那么 web 頁就更有可能以一致的方式與當前瀏覽器協作，并且它們將繼續與當前瀏覽器的未來新版本協作。對于任何公司而言，幾乎都不具備針對每個瀏覽器、在每個操作系統和每個設備上測試其 web 站點的資源。如果按照 web 標準編寫頁面，那么就不必具有這樣的資源。
xhtml 標準的版本
有三個版本的 xhtml 1.0，它們分別對應三個版本的 html 4.01：
xhtml 1.0 transitional
xhtml 1.0 strict
xhtml 1.0 frameset
xhtml 1.0 transitional 包含 html 4.01 transitional 中的全部標記和屬性。引入 xhtml 1.0 transitional 標準的目的是，使現有 html 設計人員和開發人員無需經歷太多的痛苦就能遷移到 xhtml。
xhtml 1.0 strict 與 xhtml 1.0 transitional 的不同之處在于，它在文檔結構和表示形式之間實施了一種更為明顯的分離。與 xhtml 1.0 transitional 不同，xhtml 1.0 strict 強迫您使用層疊樣式表來控制頁的外觀。
xhtml 1.0 frameset 文檔意在成為使用 <frameset> 標記將瀏覽器劃分為多個框架的文檔（xhtml 1.0 transitional 和 strict 頁不能包含 <frameset> 標記）。
w3c 還發布了 xhtml 1.1 以作為推薦標準（2001 年 5 月 31 日）。xhtml 1.1 非常類似于 xhtml 1.0 strict。二者的主要區別在于，可以用附加模塊擴展 xhtml 1.1 以便支持新元素。例如，可以生成特定的 xhtml 1.1 頁，該頁還包含 mathml（數學標記語言）、svg（可伸縮向量語言）或創建的自定義模塊中的元素。
最后，w3c 正在制訂 xhtml 2.0 推薦標準。因為 xhtml 2.0 仍然處于起草階段，并且當前沒有 web 瀏覽器支持該標準，所以我們不在本文討論它。
創建 xhtml 頁
與 html 頁不同，xhtml 頁必須是標準格式且有效的 xml 文檔。xhtml 1.0 推薦標準的第 4 部分對 html 和 xhtml 之間的區別進行了總結。這里給出生成有效 xhtml 頁的最重要需求的列表：
頁必須包含有效的 xhtml doctype。
有效的 xhtml 頁必須在其任何內容之前包含一個 xhtml doctype。當在 visual studio .net 2005 或 microsoft visual web developer 中創建新的 asp.net 頁時，該頁中將自動包含 xhtml 1.0 transitional 的正確的 doctype。下面列出四個標準的 xhtml doctype：
xhtml 1.0 transitional
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">xhtml 1.0 strict
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">xhtml 1.0 frameset
<!doctype html public "-//w3c//dtd xhtml 1.0 frameset//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">xhtml 1.1
<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">向頁中添加 doctype 會影響該頁在瀏覽器中的呈現方式。請參閱以下標題為“xhtml 和 doctype 切換”的一節。
根元素必須引用 xhtml 命名空間。
xhtml 頁的開始 <html> 標記必須指定默認命名空間 http://www.w3.org/1999/xhtml。以下是 xhtml 1.0 transitional 頁的有效開始 <html> 標記的示例：
<html xml:lang="en" lang="en">所有元素和屬性名都必須小寫。
xml 區分大小寫。因此，在 <p> 標記和 <p> 標記之間存在差異。只有前者是有效的 xhtml 段落標記。
屬性值必須始終放在引號內。
確保始終將屬性值放在雙引號或單引號中。例如，以下是無效的 xhtml。
<a href=somepage.aspx>next</a>在該示例中，href 屬性缺少引號。以下代碼是有效的 xhtml。
<a href="somepage.aspx" mce_href="somepage.aspx">next</a>您可以通過選擇菜單選項 tools、options、format，將 visual studio .net 2005 和 visual web developer 配置為自動將屬性值放在引號內。
所有具有開始標記的非空元素都必須具有匹配的結束標記。
如果具有開始 <p> 標記，則必須包含結束 </p> 標記來標記段落的結束。對于根本不包含任何內容的標記，例如 <br> 標記，可同時提供開始和結束標記 <br></br>，也可以使用空元素簡寫。
為使 xhtml 頁與現有的 html 瀏覽器向后兼容，需要小心處理打開和關閉標記的方式。例如，現有 html 瀏覽器傾向于將開始和結束 <br> </br> 標記錯誤地解釋為兩個 <br> 元素。因此，您應當使用空元素簡寫</br>。
此外，除非您小心地在結束斜杠之前添加一個空格，否則現有 html 瀏覽器在處理空元素簡寫時會出現問題。因此，應當使用 <br< b>[space] />（而不是）向頁中添加 <br> 元素。
不得存在重疊標記。
可以使標記嵌套，但是不允許使標記重疊。例如，以下 xhtml 是有效的。
<b><i>this is bold and italic</i></b>但是，以下 xhtml 是無效的。
<i><b>this is bold and italic</i></b>不得存在屬性最簡化。
所有屬性都必須具有值，即使該值看起來有一點兒奇怪。例如，標記<input type=”checkbox” checked />是無效的 xhtml，因為 checked 屬性不具有值。該標記應當寫成<input type=”checkbox” checked=”checked” />。
必須使用 id 屬性而不是 name 屬性。
在 html 中，可以使用 name 屬性來標識 <a>、<applet>、<form>、<frame>、<iframe>、<img> 和 <map> 元素。盡管可以使用 name 屬性生成 xhtml 1.0 transitional 頁，但在 xhtml 1.0 strict 和 xhtml 1.1 標準中已經將 name 屬性刪除。您應當改而使用 id 屬性來標識這些元素。
必須將 <script> 和 <style> 元素的內容包裝到 cdata 節中。
如果在腳本或樣式表中使用特殊字符（例如 < 或 &）或實體引用（例如 < 或 &），則需要將腳本或樣式表的內容標記為 cdata（字符數據）節，如下所示。
<script type="text/javascript"> <![cdata[ function isless(a, b) { if (a < b) return true; } ]]> </script>使用 cdata 節并非對所有瀏覽器都有效。例如，internet explorer 會將 <script> 標記中的 cdata 節視為語法錯誤。可以通過添加 javascript 注釋避免該問題，如下所示。
<script type="text/javascript"> /* <![cdata[ */ function isless(a, b) { if (a < b) return true; } /* ]]> */ </script>javascript 使用 /* 和 */ 來標志注釋的開始和結束。因此，cdata 節對 javascript 隱藏，但不對分析該頁的瀏覽器隱藏。總之，較好的做法是將樣式規則和腳本放在外部文件中，而從 xhtml 頁中引用這些文件。通過使用外部樣式表和腳本，能夠避免上述所有問題。
xhtml 和 doctype 切換
為 web頁指定 doctype 會影響瀏覽器呈現頁的方式。internet explorer、mozilla firefox 和 opera 全都支持一種名為“doctype 切換”（也叫“doctype 嗅探”）的功能。
引入 doctype 切換的目的是使瀏覽器能夠正確地呈現符合標準的 web 站點以及舊式 web 站點。大多數 web 站點被開發為呈現 html 頁而不是 xhtml 頁。瀏覽器通過判斷是否存在 doctype 來確定何時應該使用標準來呈現頁。
internet explorer 6+ 支持兩種呈現模式，分別叫做 quirks 模式和 standards 模式。當 internet explorer 呈現包含有效 xhtml（或 html 4.0）doctype 的頁時，它會以 standards 模式呈現該頁；否則，它會以 quirks模式呈現該頁（有關詳細信息，請參閱 css enhancements in internet explorer 6）。
opera 瀏覽器 (opera 7+) 支持與 internet explorer 相同的兩種呈現模式：quirks 和 standards（有關詳細信息，請參閱 http://www.opera.com/docs/specs/doctype/）。
mozilla firefox 1+ 支持三種呈現模式：quirks 模式、almost standards 模式和 standards 模式。firefox 的 almost standards 模式對應于 internet explorer 和 opera 的 standards 模式。當頁包含有效的 xhtml 1.0 transitional doctype（并且該頁被分配為 text/html mime 類型）時，firefox 會以 almost standards 模式呈現該頁。當頁包含 xhtml 1.0 strict 或 xhtml 1.1 doctype（或者該頁被分配為 xml mime 類型）時，該頁將以 standards 模式呈現（有關詳細信息，請參閱 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）。
可以通過臨時向頁中添加以下客戶端腳本（該腳本在最新版本的 internet explorer、firefox 和 opera 中有效）確定瀏覽器的當前呈現模式。
<script type="text/javascript"> alert( document.compatmode ); </script>您需要關心瀏覽器的呈現模式，因為它會影響將層疊樣式表應用于該頁的方式。如果將現有 html 頁轉換為 xhtml 頁，那么在瀏覽器中打開它們時，它們可能看起來非常不同。
例如，internet explorer 以不同方式計算頁元素的大小，這取決于呈現模式（它使用不同的 css box model）。在 quirks 模式下，元素的寬度是通過將元素的內容、內邊距、邊框和邊距相加而計算得到的。在 standards 模式下，元素的寬度是只考慮元素內容的寬度而計算得到的。
