Web標準:關(guān)于web標準的一些初學的知識

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