Web標(biāo)準(zhǔn):關(guān)于web標(biāo)準(zhǔn)的一些初學(xué)的知識(shí)
我要評(píng)論 Web標(biāo)準(zhǔn)使您能通過(guò)最少的工作，生成可被最廣大受眾訪問(wèn)的Web站點(diǎn)。Web標(biāo)準(zhǔn)的承諾是：只需設(shè)計(jì)頁(yè)面一次，即可讓該頁(yè)以完全相同的方式在任何現(xiàn)代的瀏覽器中顯示和工作。例如，在按照標(biāo)準(zhǔn)生成以后，旨在在MicrosoftInternetExplorer中以某種方式顯示的頁(yè)可在其他瀏覽器（如，MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari）中以相同的方式顯示，而無(wú)需完成任何額外的工作。
Web標(biāo)準(zhǔn)的一個(gè)額外好處是—使Web站點(diǎn)更易于為殘疾人士訪問(wèn)。這是一個(gè)范圍廣泛的受眾群體，包括視力衰退的中年人士，剛剛在滑雪時(shí)跌斷胳膊的人士，以及完全失明的人士等。使用標(biāo)準(zhǔn)可避免無(wú)意中阻止那些具有暫時(shí)性或永久性身體殘疾的人士訪問(wèn)Web頁(yè)。
HTML在正式的場(chǎng)合已經(jīng)過(guò)時(shí)了。WorldWideWebConsortium(W3C)于2000年6月26日發(fā)布了XHTML的第一個(gè)版本作為推薦標(biāo)準(zhǔn)。XHTML標(biāo)準(zhǔn)的目標(biāo)是取代HTML。按照W3C的說(shuō)法，“XHTML是HTML的繼承者”(http://www.w3.org/MarkUp/)。
XHTML標(biāo)準(zhǔn)的制定者具有兩大目標(biāo)：
在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。
將HTML重新表示為XML的應(yīng)用程序。
為了實(shí)現(xiàn)第一個(gè)目標(biāo)，W3C一直在堅(jiān)定地從HTML中刪除純粹描述性的元素和屬性（他們是從HTML4.0開(kāi)始這一過(guò)程的）。例如，XHTML1.0Strict不包含諸如<font>標(biāo)記之類的元素或諸如bgcolor屬性之類的屬性，因?yàn)檫@些元素和屬性完全用于描述文檔的外觀，它們與文檔的結(jié)構(gòu)沒(méi)有任何關(guān)系。
W3C一直在努力使Web站點(diǎn)設(shè)計(jì)人員和開(kāi)發(fā)人員摒棄特定標(biāo)記應(yīng)當(dāng)具有特定外觀這一觀念。例如，您可能會(huì)認(rèn)為<h1>標(biāo)記（標(biāo)題標(biāo)記）的用途是在頁(yè)中呈現(xiàn)大的加粗文本。這實(shí)際上是錯(cuò)的。<h1>標(biāo)記用來(lái)在文檔中標(biāo)記標(biāo)題而不是其他任何東西。如何呈現(xiàn)標(biāo)題標(biāo)記由瀏覽器確定。視力衰退的人士使用的屏幕閱讀器可能利用抑揚(yáng)頓挫的聲音來(lái)大聲朗讀標(biāo)題標(biāo)記的內(nèi)容。不支持多個(gè)字體大小的PDA可能用閃爍文本呈現(xiàn)標(biāo)題標(biāo)記的內(nèi)容。
您不應(yīng)當(dāng)試圖使用諸如<h1>標(biāo)記之類的頁(yè)元素來(lái)控制Web頁(yè)的外觀。相反，您應(yīng)當(dāng)通過(guò)使用層疊樣式表來(lái)指示W(wǎng)eb頁(yè)的外觀。而且，您所使用的層疊樣式表應(yīng)當(dāng)是外部層疊樣式表。請(qǐng)使用標(biāo)記和屬性來(lái)標(biāo)記文檔的結(jié)構(gòu)，而使用樣式表來(lái)控制文檔的表示形式。
XHTML的第二個(gè)目標(biāo)是迫使HTML開(kāi)發(fā)人員遵守更為嚴(yán)格的XML規(guī)則。按照W3C的說(shuō)法，“XHTML1.0是HTML4.01的作為XML1.0應(yīng)用程序的修訂”(http://www.w3.org/MarkUp/)。換句話說(shuō)，使用XHTML生成Web頁(yè)時(shí)，實(shí)際上是在創(chuàng)建XML文檔。
XML文檔具有比HTML文檔更嚴(yán)格的語(yǔ)法。例如，XML區(qū)分大小寫(xiě)，所有XML屬性都必須放在引號(hào)內(nèi)，而且XML標(biāo)記不能重疊。強(qiáng)迫Web站點(diǎn)開(kāi)發(fā)人員和設(shè)計(jì)人員遵守有更高要求的語(yǔ)言規(guī)則有很多好處。
好處之一，用XHTML標(biāo)記編寫(xiě)的頁(yè)具有更高的跨瀏覽器、跨設(shè)備和跨操作系統(tǒng)兼容性。如果在瀏覽器中打開(kāi)傳統(tǒng)的HTML頁(yè)，瀏覽器將千方百計(jì)地呈現(xiàn)該頁(yè)。瀏覽器將試圖呈現(xiàn)該頁(yè)，即使您的HTML一團(tuán)糟。例如，InternetExplorer（以及Firefox和Opera）能夠很好地顯示下面的HTML頁(yè)。
<i><B>thisisboldanditalic</I>andthisisbold</body></HTML>InternetExplorer會(huì)恰當(dāng)?shù)仫@示該頁(yè)—即使該頁(yè)缺少<html>和<body>開(kāi)始標(biāo)記，<b>標(biāo)記不具有匹配的結(jié)束標(biāo)記，并且開(kāi)始和結(jié)束<i>標(biāo)記的大小寫(xiě)不一致。所有主要的瀏覽器都能適應(yīng)幾乎任何HTML標(biāo)記“混合物”，并且不顧一切地呈現(xiàn)一些內(nèi)容。
瀏覽器的這種適應(yīng)行為是危險(xiǎn)的，因?yàn)椴煌臑g覽器（或相同瀏覽器的將來(lái)版本，或在不同操作系統(tǒng)上運(yùn)行的相同瀏覽器）可能以不同方式呈現(xiàn)錯(cuò)亂的HTML。實(shí)際上，對(duì)于最新版本的InternetExplorer、MozillaFirefox和Opera而言，它們呈現(xiàn)無(wú)效HTML的方式驚人地一致。但是，一旦開(kāi)始違反游戲規(guī)則，就不會(huì)得到任何保證。
然而，如果用XHTML的更嚴(yán)格的規(guī)則編寫(xiě)Web頁(yè)，那么Web頁(yè)就更有可能以一致的方式與當(dāng)前瀏覽器協(xié)作，并且它們將繼續(xù)與當(dāng)前瀏覽器的未來(lái)新版本協(xié)作。對(duì)于任何公司而言，幾乎都不具備針對(duì)每個(gè)瀏覽器、在每個(gè)操作系統(tǒng)和每個(gè)設(shè)備上測(cè)試其Web站點(diǎn)的資源。如果按照Web標(biāo)準(zhǔn)編寫(xiě)頁(yè)面，那么就不必具有這樣的資源。
XHTML標(biāo)準(zhǔn)的版本
有三個(gè)版本的XHTML1.0，它們分別對(duì)應(yīng)三個(gè)版本的HTML4.01：
XHTML1.0Transitional
XHTML1.0Strict
XHTML1.0Frameset
XHTML1.0Transitional包含HTML4.01Transitional中的全部標(biāo)記和屬性。引入XHTML1.0Transitional標(biāo)準(zhǔn)的目的是，使現(xiàn)有HTML設(shè)計(jì)人員和開(kāi)發(fā)人員無(wú)需經(jīng)歷太多的痛苦就能遷移到XHTML。
XHTML1.0Strict與XHTML1.0Transitional的不同之處在于，它在文檔結(jié)構(gòu)和表示形式之間實(shí)施了一種更為明顯的分離。與XHTML1.0Transitional不同，XHTML1.0Strict強(qiáng)迫您使用層疊樣式表來(lái)控制頁(yè)的外觀。
XHTML1.0Frameset文檔意在成為使用<frameset>標(biāo)記將瀏覽器劃分為多個(gè)框架的文檔（XHTML1.0Transitional和Strict頁(yè)不能包含<frameset>標(biāo)記）。
W3C還發(fā)布了XHTML1.1以作為推薦標(biāo)準(zhǔn)（2001年5月31日）。XHTML1.1非常類似于XHTML1.0Strict。二者的主要區(qū)別在于，可以用附加模塊擴(kuò)展XHTML1.1以便支持新元素。例如，可以生成特定的XHTML1.1頁(yè)，該頁(yè)還包含MathML（數(shù)學(xué)標(biāo)記語(yǔ)言）、SVG（可伸縮向量語(yǔ)言）或創(chuàng)建的自定義模塊中的元素。
最后，W3C正在制訂XHTML2.0推薦標(biāo)準(zhǔn)。因?yàn)閄HTML2.0仍然處于起步階段，并且當(dāng)前沒(méi)有Web瀏覽器支持該標(biāo)準(zhǔn)，所以我們不在本文討論它。
創(chuàng)建XHTML頁(yè)
與HTML頁(yè)不同，XHTML頁(yè)必須是標(biāo)準(zhǔn)格式且有效的XML文檔。XHTML1.0推薦標(biāo)準(zhǔn)的第4部分對(duì)HTML和XHTML之間的區(qū)別進(jìn)行了總結(jié)。這里給出生成有效XHTML頁(yè)的最重要需求的列表：
頁(yè)必須包含有效的XHTMLDOCTYPE。
有效的XHTML頁(yè)必須在其任何內(nèi)容之前包含一個(gè)XHTMLDOCTYPE。當(dāng)在VisualStudio.NET2005或MicrosoftVisualWebDeveloper中創(chuàng)建新的ASP.NET頁(yè)時(shí)，該頁(yè)中將自動(dòng)包含XHTML1.0Transitional的正確的DOCTYPE。下面列出四個(gè)標(biāo)準(zhǔn)的XHTMLDOCTYPE：
XHTML1.0Transitional
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML1.0Strict
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML1.0Frameset
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML1.1
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">向頁(yè)中添加DOCTYPE會(huì)影響該頁(yè)在瀏覽器中的呈現(xiàn)方式。請(qǐng)參閱以下標(biāo)題為“XHTML和DOCTYPE切換”的一節(jié)。
根元素必須引用XHTML命名空間。
XHTML頁(yè)的開(kāi)始<html>標(biāo)記必須指定默認(rèn)命名空間http://www.w3.org/1999/xhtml。以下是XHTML1.0Transitional頁(yè)的有效開(kāi)始<html>標(biāo)記的示例：
<htmlxml:lang="en"lang="en">所有元素和屬性名都必須小寫(xiě)。
XML區(qū)分大小寫(xiě)。因此，在<p>標(biāo)記和<P>標(biāo)記之間存在差異。只有前者是有效的XHTML段落標(biāo)記。
屬性值必須始終放在引號(hào)內(nèi)。
確保始終將屬性值放在雙引號(hào)或單引號(hào)中。例如，以下是無(wú)效的XHTML。
<ahref=SomePage.aspx>Next</a>在該示例中，href屬性缺少引號(hào)。以下代碼是有效的XHTML。
<ahref="SomePage.aspx"mce_href="SomePage.aspx">Next</a>您可以通過(guò)選擇菜單選項(xiàng)Tools、Options、Format，將VisualStudio.NET2005和VisualWebDeveloper配置為自動(dòng)將屬性值放在引號(hào)內(nèi)。
所有具有開(kāi)始標(biāo)記的非空元素都必須具有匹配的結(jié)束標(biāo)記。
如果具有開(kāi)始<p>標(biāo)記，則必須包含結(jié)束</p>標(biāo)記來(lái)標(biāo)記段落的結(jié)束。對(duì)于根本不包含任何內(nèi)容的標(biāo)記，例如<br>標(biāo)記，可同時(shí)提供開(kāi)始和結(jié)束標(biāo)記<br></br>，也可以使用空元素簡(jiǎn)寫(xiě)。
為使XHTML頁(yè)與現(xiàn)有的HTML瀏覽器向后兼容，需要小心處理打開(kāi)和關(guān)閉標(biāo)記的方式。例如，現(xiàn)有HTML瀏覽器傾向于將開(kāi)始和結(jié)束<br></br>標(biāo)記錯(cuò)誤地解釋為兩個(gè)<br>元素。因此，您應(yīng)當(dāng)使用空元素簡(jiǎn)寫(xiě)</br>。
此外，除非您小心地在結(jié)束斜杠之前添加一個(gè)空格，否則現(xiàn)有HTML瀏覽器在處理空元素簡(jiǎn)寫(xiě)時(shí)會(huì)出現(xiàn)問(wèn)題。因此，應(yīng)當(dāng)使用<BR<b>[space]/>（而不是）向頁(yè)中添加<br>元素。
不得存在重疊標(biāo)記。
可以使標(biāo)記嵌套，但是不允許使標(biāo)記重疊。例如，以下XHTML是有效的。
<b><i>Thisisboldanditalic</i></b>但是，以下XHTML是無(wú)效的。
<i><b>Thisisboldanditalic</i></b>不得存在屬性最簡(jiǎn)化。
所有屬性都必須具有值，即使該值看起來(lái)有一點(diǎn)兒奇怪。例如，標(biāo)記<inputtype=”checkbox”checked/>是無(wú)效的XHTML，因?yàn)閏hecked屬性不具有值。該標(biāo)記應(yīng)當(dāng)寫(xiě)成<inputtype=”checkbox”checked=”checked”/>。
必須使用id屬性而不是name屬性。
在HTML中，可以使用name屬性來(lái)標(biāo)識(shí)<a>、<applet>、<form>、<frame>、<iframe>、<img>和<map>元素。盡管可以使用name屬性生成XHTML1.0Transitional頁(yè)，但在XHTML1.0Strict和XHTML1.1標(biāo)準(zhǔn)中已經(jīng)將name屬性刪除。您應(yīng)當(dāng)改而使用id屬性來(lái)標(biāo)識(shí)這些元素。
必須將<script>和<style>元素的內(nèi)容包裝到CDATA節(jié)中。
如果在腳本或樣式表中使用特殊字符（例如<或&）或?qū)嶓w引用（例如<或&），則需要將腳本或樣式表的內(nèi)容標(biāo)記為CDATA（字符數(shù)據(jù)）節(jié)，如下所示。
<scripttype="text/javascript"><![CDATA[functionisLess(a,b){if(a<b)returntrue;}]]></script>使用CDATA節(jié)并非對(duì)所有瀏覽器都有效。例如，InternetExplorer會(huì)將<script>標(biāo)記中的CDATA節(jié)視為語(yǔ)法錯(cuò)誤。可以通過(guò)添加JavaScript注釋避免該問(wèn)題，如下所示。
<scripttype="text/javascript">/*<![CDATA[*/functionisLess(a,b){if(a<b)returntrue;}/*]]>*/</script>JavaScript使用/*和*/來(lái)標(biāo)志注釋的開(kāi)始和結(jié)束。因此，CDATA節(jié)對(duì)JavaScript隱藏，但不對(duì)分析該頁(yè)的瀏覽器隱藏。總之，較好的做法是將樣式規(guī)則和腳本放在外部文件中，而從XHTML頁(yè)中引用這些文件。通過(guò)使用外部樣式表和腳本，能夠避免上述所有問(wèn)題。
XHTML和DOCTYPE切換
為Web頁(yè)指定DOCTYPE會(huì)影響瀏覽器呈現(xiàn)頁(yè)的方式。InternetExplorer、MozillaFirefox和Opera全都支持一種名為“DOCTYPE切換”（也叫“DOCTYPE嗅探”）的功能。
引入DOCTYPE切換的目的是使瀏覽器能夠正確地呈現(xiàn)符合標(biāo)準(zhǔn)的Web站點(diǎn)以及舊式Web站點(diǎn)。大多數(shù)Web站點(diǎn)被開(kāi)發(fā)為呈現(xiàn)HTML頁(yè)而不是XHTML頁(yè)。瀏覽器通過(guò)判斷是否存在DOCTYPE來(lái)確定何時(shí)應(yīng)該使用標(biāo)準(zhǔn)來(lái)呈現(xiàn)頁(yè)。
InternetExplorer6 支持兩種呈現(xiàn)模式，分別叫做Quirks模式和Standards模式。當(dāng)InternetExplorer呈現(xiàn)包含有效XHTML（或HTML4.0）DOCTYPE的頁(yè)時(shí)，它會(huì)以Standards模式呈現(xiàn)該頁(yè)；否則，它會(huì)以Quirks模式呈現(xiàn)該頁(yè)（有關(guān)詳細(xì)信息，請(qǐng)參閱CSSEnhancementsinInternetExplorer6）。
Opera瀏覽器(Opera7 )支持與InternetExplorer相同的兩種呈現(xiàn)模式：Quirks和Standards（）。
MozillaFirefox1 支持三種呈現(xiàn)模式：Quirks模式、AlmostStandards模式和Standards模式。Firefox的AlmostStandards模式對(duì)應(yīng)于InternetExplorer和Opera的Standards模式。當(dāng)頁(yè)包含有效的XHTML1.0TransitionalDOCTYPE（并且該頁(yè)被分配為text/htmlMIME類型）時(shí)，F(xiàn)irefox會(huì)以AlmostStandards模式呈現(xiàn)該頁(yè)。當(dāng)頁(yè)包含XHTML1.0Strict或XHTML1.1DOCTYPE（或者該頁(yè)被分配為XMLMIME類型）時(shí)，該頁(yè)將以Standards模式呈現(xiàn)（有關(guān)詳細(xì)信息，請(qǐng)參閱http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）。
可以通過(guò)臨時(shí)向頁(yè)中添加以下客戶端腳本（該腳本在最新版本的InternetExplorer、Firefox和Opera中有效）確定瀏覽器的當(dāng)前呈現(xiàn)模式。
<scripttype="text/javascript">alert(document.compatMode);</script>您需要關(guān)心瀏覽器的呈現(xiàn)模式，因?yàn)樗鼤?huì)影響將層疊樣式表應(yīng)用于該頁(yè)的方式。如果將現(xiàn)有HTML頁(yè)轉(zhuǎn)換為XHTML頁(yè)，那么在瀏覽器中打開(kāi)它們時(shí)，它們可能看起來(lái)非常不同。
例如，InternetExplorer以不同方式計(jì)算頁(yè)元素的大小，這取決于呈現(xiàn)模式（它使用不同的CSSBoxModel）。在Quirks模式下，元素的寬度是通過(guò)將元素的內(nèi)容、內(nèi)邊距、邊框和邊距相加而計(jì)算得到的。在Standards模式下，元素的寬度是只考慮元素內(nèi)容的寬度而計(jì)算得到的。
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化，要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流，文章內(nèi)容圍繞主題展相關(guān)資料，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-02-23- 這是我通過(guò)網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范，用于鞏固對(duì)html，css頁(yè)面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開(kāi)發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開(kāi)發(fā)協(xié)作，提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道，當(dāng)一個(gè)團(tuán)隊(duì)開(kāi)始指定并實(shí)行2017-01-21web前端開(kāi)發(fā)規(guī)范文檔(2014年版本)
這篇文章主要為大家介紹了前端開(kāi)發(fā)團(tuán)隊(duì)遵循和約定的代碼書(shū)寫(xiě)規(guī)范，意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0，但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少，在安裝過(guò)程中總會(huì)出現(xiàn)這樣那樣的問(wèn)題，基于這些問(wèn)題，下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29
