網(wǎng)站設(shè)計的標(biāo)準(zhǔn)時代的XHTML+CSS教程

2020-03-24 19:15:58

字體：大中小

供稿：網(wǎng)友

讓我們趕緊跟上新時代的步伐，一起來了解一下網(wǎng)站標(biāo)準(zhǔn)吧。一．為什么要建立網(wǎng)站標(biāo)準(zhǔn) 我們大部分人都有深刻體驗，每當(dāng)主流瀏覽器版本的升級，我們剛建立的網(wǎng)站就可能變得過時，我們就需要升級或者重新建造一遍網(wǎng)站。例如1996-1999年典型的“瀏覽器大戰(zhàn)”，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個新版本來支持這種新技術(shù)或新設(shè)備，例如支持手機(jī)上網(wǎng)的WAP技術(shù)。類似的問題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費(fèi)。如何解決這些問題呢？有識之士早已開始思考，需要建立一種普遍認(rèn)同的標(biāo)準(zhǔn)來結(jié)束這種無序和混亂。商業(yè)公司(Netscape、Microsoft等)也終于認(rèn)識到統(tǒng)一標(biāo)準(zhǔn)的好處，因此在W3C（W3C.org）的組織下，網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。簡單說，網(wǎng)站標(biāo)準(zhǔn)的目的就是：提供最多利益給最多的網(wǎng)站用戶
確保任何網(wǎng)站文擋都能夠長期有效
簡化代碼、降低建設(shè)成本
讓網(wǎng)站更容易使用，能適應(yīng)更多不同用戶和更多網(wǎng)路設(shè)備
當(dāng)瀏覽器版本更新，或者出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。
對于網(wǎng)站設(shè)計和開發(fā)人員來說，遵循網(wǎng)站標(biāo)準(zhǔn)就是使用標(biāo)準(zhǔn)；對于你的網(wǎng)站用戶來說，網(wǎng)站標(biāo)準(zhǔn)就是最佳體驗。訪問量排名世界第4，中國第1的新浪網(wǎng)站，也遭遇非標(biāo)準(zhǔn)DHTML的問題。在最新發(fā)布的Netscape7和Mozila1.6瀏覽器中，新浪首頁的漂浮廣告全部失效，層疊擠在頁面左下角。也許那些廣告主認(rèn)為損失這些潛在的用戶無所謂。（截圖日期2004年4月12日）
二．什么是網(wǎng)站標(biāo)準(zhǔn) 網(wǎng)站標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。我們來簡單了解一下這些標(biāo)準(zhǔn)： 1．結(jié)構(gòu)標(biāo)準(zhǔn)語言（1）XML XML是The Extensible Markup Language(可擴(kuò)展標(biāo)識語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0，參考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其他語言的語。XML最初設(shè)計的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。關(guān)于XML的好處和技術(shù)規(guī)范細(xì)節(jié)這里就不多說了，網(wǎng)上有很多資料，也有很多書籍可以參考。（2）XHTML XHTML是The Extensible HyperText Markup Language可擴(kuò)展標(biāo)識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0（參考http://www.w3.org/TR/xHTML1）。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對成千上萬已有的站點(diǎn)，直接采用XML還為時過早。因此，我們在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行擴(kuò)展，得到了XHTML。簡單的說，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。 2. 表現(xiàn)標(biāo)準(zhǔn)語言 CSS是Cascading Style Sheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2（參考http://www.w3.org/TR/CSS2/）。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問及維護(hù)更加容易。 3.行為標(biāo)準(zhǔn) （1）DOM DOM是Document Object Model文檔對象模型的縮寫。根據(jù)W3C DOM規(guī)范（http://www.w3.org/DOM/），DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單理解，DOM解決了Netscaped的javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計師和開發(fā)者一個標(biāo)準(zhǔn)的方法，讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對像。 (2) ECMAScript ECMAScript是ECMA(European Computer Manufacturers Association)制定的標(biāo)準(zhǔn)腳本語言（javascript）。目前推薦遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。三．遵循標(biāo)準(zhǔn)的網(wǎng)站與傳統(tǒng)網(wǎng)站的區(qū)別傳統(tǒng)網(wǎng)站只是印刷媒體的延伸，設(shè)計目標(biāo)是保證在4-6個主流瀏覽器版本中看起來一致。通常的特征是：以表格為基礎(chǔ)的布局。
內(nèi)容與表現(xiàn)方式混雜在一起。典型的例子是 font 標(biāo)簽。
垃圾代碼（非標(biāo)準(zhǔn)代碼）。
不易用的代碼。
語義不正確的代碼。比如 b 不解釋的話，你根本不明白這是字體加粗的意思。
而采用網(wǎng)站標(biāo)準(zhǔn)建立的網(wǎng)站是一個能夠接受各種用戶和各種設(shè)備的廣泛的交流溝通工具。一般特征是：語義正確的標(biāo)識。即使用能夠表達(dá)含義的標(biāo)簽。保證代碼可以在文本瀏覽器、PDAs、搜索引擎中被正確理解。
正確有效的代碼。通過W3C代碼校驗（http://validator.w3.org/）的就是正確代碼。
對人、機(jī)都易用的代碼。能夠接受廣泛的用戶和設(shè)備的訪問，
用CSS分離表現(xiàn)層和內(nèi)容。使代碼更簡潔、下載速度更快，批量修改和定制表現(xiàn)形式更容易。四．采用網(wǎng)站標(biāo)準(zhǔn)的好處對網(wǎng)站瀏覽者的好處：文件下載與頁面顯示速度更快；
內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；
內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等）
用戶能夠通過樣式選擇定制自己的表現(xiàn)界面
所有頁面都能提供適于打印的版本
對網(wǎng)站所有者的好處：更少的代碼和組件，容易維護(hù)
帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當(dāng) ESPN.com 使用 CSS改版后，每天節(jié)約超過兩兆字節(jié)（terabytes）的帶寬。
更容易被搜尋引擎搜索到
改版方便，不需要變動頁面內(nèi)容
提供打印版本而不需要復(fù)制內(nèi)容
提高網(wǎng)站易用性。在美國，有嚴(yán)格的法律條款（Section 508）來約束政府網(wǎng)站必須達(dá)到一定的易用性，其他國家也有類似的要求。五．怎么改善現(xiàn)有網(wǎng)站我們大部分的設(shè)計師依舊在采用傳統(tǒng)的表格布局、表現(xiàn)與結(jié)構(gòu)混雜在一起的方式來建立網(wǎng)站。學(xué)習(xí)使用XHTML+CSS的方法需要一個過程，使現(xiàn)有網(wǎng)站符合網(wǎng)站標(biāo)準(zhǔn)也不可能一步到位。最好的方法是循序漸進(jìn)，分階段來逐步達(dá)到完全符合網(wǎng)站標(biāo)準(zhǔn)的目標(biāo)。如果你是新手，或者對代碼不是很熟悉，也可以采用遵循標(biāo)準(zhǔn)的編輯工具，例如Dreamweaver MX 2004，它是目前支持CSS標(biāo)準(zhǔn)最完善的工具。 1．初級改善為頁面添加正確的DOCTYPE 很多設(shè)計師和開發(fā)者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的簡寫。主要用來說明你用的XHTML或者HTML是什么版本。瀏覽器根據(jù)你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。所以，如果你不注意設(shè)置了錯誤的DOCTYPE，結(jié)果會讓你大吃一驚。XHTML1.0提供了三種DOCTYPE可選擇：過渡型（Transitional ） !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd" 嚴(yán)格型（Strict ） !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-strict.dtd" 框架型（Frameset ） !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-frameset.dtd" 對于我們初級改善來說，只要選用過渡型的聲明就可以了。它依然可以兼容你的表格布局、表現(xiàn)標(biāo)識等，不至于讓你覺得變化太大，難以掌握。 Tip:你懶得輸入上面過渡型代碼的話，可以訪問http://www.macromedia.com/網(wǎng)站的首頁，然后查看源代碼，把head區(qū)同樣的代碼拷貝粘貼就可以了。設(shè)定一個名字空間（Namespace）
直接在DOCTYPE聲明后面添加如下代碼： HTML XMLns="http://www.w3.org/1999/xHTML" 一個namespace是收集元素類型和屬性名字的一個詳細(xì)的DTD，namespace聲明允許你通過一個在線地址指向來識別你的namespace。只要照樣輸入代碼就可以。聲明你的編碼語言為了被瀏覽器正確解釋和通過標(biāo)識校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言。代碼如下： meta http-equiv="Content-Type" content="text/HTML; charset=GB2312" / 這里聲明的編碼語言是簡體中文GB2312，你如果需要制作繁體內(nèi)容，可以定義為BIG5。用小寫字母書寫所有的標(biāo)簽
XML對大小寫是敏感的，所以，XHTML也是大小寫有區(qū)別的。所有的Xhtml' target='_blank'>HTML元素和屬性的名字都必須使用小寫。否則你的文檔將被W3C校驗認(rèn)為是無效的。例如下面的代碼是不正確的： TITLE 公司簡介 /TITLE
本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：分享幾種CSS制作菜單列表的方法

下一篇：html怎么引用css樣式？html引用css文件的三種方法介