前言

　　"我的工資卡是交通銀行的，但我經常在我家樓下的工商銀行提款機上取款；
　　我是上海人，我用普通話可以和廣州的同學進行交流；
　　今天水龍頭壞了，我去水暖商店買了一個新的換上；
　　我去法國旅游，通知我法國的朋友在北京時間15:30分來接我。"

　　生活中天天都發生類似的事情，這樣的事情似乎再正常不過的了，并沒有什么非凡之處。但是，你有沒有想過：

　　為什么所有銀行卡的大小都是一樣的尺寸？
　　為什么我用普通話就能和廣州同學交流？
　　為什么買來的新水龍頭的螺口正好與老的水管能接上？
　　為什么法國朋友不會接錯時間？

　　對于日常的很多事情，我們并沒有注重到這背后都有著一個隱藏的“因素”在起作用，這個因素就是：標準。

　　有了“銀行卡的標準”，你就不用擔心不同銀行的卡大小不一樣，所有提款機的入卡口都一樣；
　　有了“普通話標準”，全國人民可以方便的進行語言交流；
　　有了“螺口的工業標準”，你買個6分的水龍頭就絕對可以可6分的水管接上；
　　有了“格林威治標準時間”，全世界的人們都不會接錯班機時間。

　　生活中各行各業都有著自己相應的標準與規范，標準可以方便交流、促進協作、提高效率。

　　對于IT行業，設備的多樣性與信息的多樣性更加需要標準來保證它們之間的溝通與協作。我們可能在手機、打印機、數碼相機之間交互數據；我們可能在網站、郵件和辦公軟件之間傳遞信息；我們可能要在未來新設備（例如機頂盒、信息家電）中應用現有資源。假如沒有統一的標準，那么現在所有的信息都是孤立的、不可分享、不可重用的；我們需要浪費大量的人力物力重新為新設備建立數據；我們需要為每一次的多系統應用做專門的開發。

　　好在我們已經找到了解決的方案，這就是---XML。

　　XML簡單說就是一種“有規定格式的文檔”，只要我們的設備或系統產生的數據都遵守這種格式，就可以實現互相的數據交換、分享與協作。

　　自從1998年國際萬維網組織(W3C.org)推出XML 1.0規范以來，已經有大量的XML標準在我們的生活中應用，例如我們用手機訂閱的天氣預告、股票行情，這些數據都是從相應的系統獲得然后通過XML格式轉換發送給你的；我們通過QQ或者MSN上發送消息到不在線的朋友手機上，這其中的信息也是通過XML轉換實現的;還有更多的商業應用，例如公司內部的CRM、ERP、內容治理系統之間的數據交互、整合與共享都應用了XML。

　　那么，你自然會想到：網頁(web)是否也應該遵循XML標準呢？答案是肯定的。

　　萬維網出現以后，大大改變了人們的信息獲取方式，以前從報紙、電視、廣播上獲取信息，現在可以更方便的通過網絡，通過瀏覽器瀏覽獲得。web上的信息也日益豐富，從一開始簡單的、靜態的文檔和圖片信息，到現在動態的、可交互的多媒體信息，web上的信息已經多到可以用“恐怖”來形容。去年底，google搜索引擎已經能夠搜索到82億張網頁和21億張圖像。這么多的數據是財富，但是假如不能有效利用和搜索就是“信息垃圾”。而事實上，已經產生了數據冗余和信息無法有效共享、查詢的情況。

　　我們有99%的網站是采用HTML制作的，而HTML并不符合XML格式。因此這些網頁信息都很難適應未來新設備和數據共享的要求。怎么辦呢？國際萬維網組織(W3C.org)已經提出了解決辦法，他們在HTML基礎上，按照XML格式制定了新的規范XHTML1.0，只要通過簡單的改變，就能將HTML轉為XHTML，從而實現向XML的過渡。同時，為了使你的頁面信息更加輕易被搜索和重用、XHTML的代碼需要結構更加更清楚、標簽更加有語義，W3C推薦使用CSS來控制表現，以實現內容與表現的相分離。

　　這也就是我們這本書要講的主題：用web標準技術重構你的網站。

　　一：了解web標準

　　1.什么是web標準？

　　首先要明確一個概念。我們本書講的web標準，不是指XML，而是指為了實現大量HTML信息向XML標準的過渡，W3C和ECMA制定的一系列的技術規范，目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web標準不僅僅是一個規范，而是一系列規范的總稱。

　　按這些規范制作的網頁，符合XML格式規范，內容與表現相分離，將使你的頁面數據在以后可以被分享、交換和重用。

　　下面，讓我們一起了解一些重要的基礎知識。假如你已經把握，可以跳過直接閱讀第二節。

　　2. 什么是w3c？

　　W3C是“World Wide Web Consortium”的縮寫，中文稱萬維網組織。是一個專注于“領導和發展web技術”的國際工業行業協會。它由萬維網發明者Time Berners-Lee領導，成立與1994年。W3C已經有超過500家的會員--包括微軟、美國在線(Netscape的母公司)、蘋果電腦、Adobe、Macromedia、SUN 以及各類主流硬件、軟件制造商和電信公司。學會主要研究由三家學術機構主理--美國麻省理工學院(MIT)、法國的歐洲信息與數學研究論壇(ERCIM)、日本的應慶大學(KEIO)。

　　W3C主要工作是研究和制定開放的規范(事實上的標準)，以便提高web相關產品的互用性。W3C的推薦規范的制定都是由來自于會員和非凡邀請的專家組成的工作組完成。工作組的草案(Drafts)在通過多數相關公司和組織同意后提交給W3C理事會討論，正式批準后才成為“推薦規范(Recommendations)”發布。更多的信息您可以訪問W3C的網站：www.w3.org

　　3.W3C發布的標準

　　3.1 HTML4.0

　　HyperText Markup Language(HTML,超文本標識語言)廣泛用于現在的網頁，HTML目的是為文檔增加結構信息，例如表示標題，

　　表示段落；瀏覽器可以解析這些文檔的結構，并用相應的表現形式表現出來。例如：瀏覽器會將...之間的內容用粗體顯示。

　　設計師也可以通過CSS(Cascading Style Sheets)來定義某種結構以什么形式表現出來。

　　3.2 XML1.0

　　XML是Extensible Markup Language(可擴展標識語言)的簡寫。XML類似HTML也是標識語言，不同的地方是：HTML有固定的標簽，而XML答應你自己定義自己的標簽，甚至答應你通過XML namespaces為一個文檔定義多套設定。看一個XML例子：

　　<addressbook>
　　<entry>
　　<name>AJIE</name><email>ajie33@hotmail.com</email>
　　</entry>
　　<entry><name>ALLAN</name><email>neo_n@21cn.com</email>
　　</entry>
　　<entry><name>YAHOO</name><email>tingpeng@msn.com</email>
　　</entry>
　　</addressbook>

　　一些XML的應用，例如XHTML和MathML,已經成為W3C推薦規范。你同樣可以通過樣式規范(CSS和XSL)，來定義XML標簽的表現形式。XML文檔目前還不能直接用瀏覽器顯示，頁面展現依然采用HTML或者XHTML，XML現在大多用于服務器與服務器(系統與系統)之間的數據交換。

　　3.3 CSS2.0

　　CSS是Cascading Style Sheets層疊樣式表的縮寫。通過CSS可以控制HTML或者XML標簽的表現形式。W3C推薦使用CSS布局方法，使得web更加簡單，結構更加清楚。

　　3.4 XHTML1.0

　　XHTML實際上就是將HTML根據XML規范重新定義一遍。它的標簽與HTML4.0一致，而格式嚴格遵循XML規范。因此，雖然XHTML與HTML在瀏覽器中一樣顯示，但假如你要轉換成PDF，那么XHTML會輕易的多。

　　XHTML有三種DTD定義：嚴格的(strict)，過渡的(Transitional)，框架的(Frameset)。 DTD是Document Type Definition文檔類型定義的縮寫。它寫在XHTML文件的最開始，告訴瀏覽器這個文檔符合什么規范，用什么規范來解析。

　　3.5 DOM1.0

　　DOM是Document Object Model文檔對象模型的縮寫。DOM給了腳本語言(類似ECMAScript)無限發揮的能力。它使腳本語言很輕易訪問到整個文檔的結構、內容和表現。

　　4 什么是ECMA？

　　是“European Computer Manufactures Association”的縮寫，中文稱歐洲計算機制造聯合會。是1961年成立的旨在建立統一的電腦操作格式標準--包括程序語言和輸入輸出的組織。

　　ECMA位于日內瓦，和ISO(國際標準組織)以及IEC(國際電工標準化機構)總部相鄰，主要任務是研究信息和通訊技術方面的標準并發布有關技術報告。ECMA并不是官方機構，而是由主流廠商組成的，他們經常與其他國際組織進行合作。

　　4.1 ECMA發布的標準 ECMAscript

　　ECMAscript是基于Netscape javaScript的一種標準腳本語言。它也是一種基于對象的語言，通過DOM可以操作網頁上的任何對象。可以增加、刪除、移動或者改變對象。使得網頁的交互性大大提高。

　　上述標準是我們目前從HTML向XML過渡時期用到的主要標準，也是本書主要討論的范疇。

　　5.web標準的優勢

　　5.1 易用性

　　用web標準制作的頁面，對搜索引擎更加“透明”，因為良好清楚的結構使得搜索引擎能夠方便的判定與評估信息，從而建立更精確的索引。按web標準制作的頁面也可以在更老版本的瀏覽器中正常顯示基本結構，即使CSS/XSL樣式無法解析，它也能顯示出完整的信息和結構。

　　符合web標準的頁面也很輕易被轉換成其他格式文檔，例如數據庫或者word格式,也輕易被移植到新的系統--硬件或者軟件系統，比如網絡電視、PDA等等。這是XML天生具有的優勢。

　　符合web標準的頁面也具有天生的“易用性(accessibility)”,不僅僅是普通瀏覽器可以閱讀，那些有殘疾的人們也可以通過盲人瀏覽器、聲音閱讀器正常使用。

　　5.2 向后兼容性

　　使用web標準建立的頁面，將在未來的新瀏覽器或者新網絡設備中很好的工作。我們只要修改CSS或者XSL定制相應的表現形式就可以了。

　　二：web標準的思考與爭論

　　通過上文的介紹，我們已經初步了解為什么W3C要建立XML標準，為什么各大廠商都愿意支持XML。也了解到為了向XML標準過渡，我們目前階段需要學習和把握的web標準有那些，接下來就是具體應用了。但我們發現應用也并不如想像中那樣順利，依然有一堆的困難擺在我們面前：

　　有99%采用HTML4.0或者更老規范建立的網頁需要轉換到XHTML；
　　天天依然有大量的新的頁面采用不符合web標準的技術在發布；
　　缺乏易用的、強大的支持web標準的頁面開發軟件；
　　主流瀏覽器IE對web標準的支持不完善；
　　大批的設計師需要了解web標準，轉變觀念；

　　其中“轉變觀念”是最重要、也是最難的。許多設計師還不理解web標準，依然在觀望甚至反對。這里我們來分析web標準推廣過程中碰到的典型問題與爭論：

　　(一)關于web標準

　　1.web標準并不是“標準”，我為什么要遵守？

　　的確，web標準并不是標準，它只是W3C制定的推薦規范，W3C并沒有強制要求和監督業界去執行。web標準組織(webstandards.org)為了便于這些規范的推廣，才把它們統稱為“web標準”。雖然W3C制定的只是“推薦規范”，但它已經是事實上的標準，世界前500家大IT企業會員都認可的規范，你沒有理由懷疑它的廣泛性和可行性。微軟也是W3C的主要會員，它自己通過的規范一定會支持，但出于商業競爭的考慮，微軟通常都會做一些細節調整來綁定用戶，但這并不影響W3C規范的方向性和權威性。

　　2.DIV CSS就是web標準嗎？

　　DIV CSS只是具體的實現技術手段，并不能涵蓋web標準。web標準不僅僅是HTML向XHTML的轉換，更重要的是信息結構清楚、內容與表現相分離，而DIV CSS技術能較好的實現這種思想。因此，我們看到的多數符合標準的頁面都是采用DIV CSS制作。

　　(二).關于web標準的好處

　　1.科技在進步，網絡帶寬越來越大，速度越來也快，節省那點字節有意義嗎？
web標準的好處之一是：用web標準制作的頁面代碼量小，可以節省帶寬。這只是web標準附帶的好處，因為DIV的結構本身就比TABLE簡單，TABLE布局的層層嵌套造成代碼臃腫，文件尺寸膨脹。通常情況下，相同表現的頁面用DIV CSS比用TABLE布局的節省2/3的代碼。這是web標準天生的好處。 至于節省帶寬的意義并不主要針對普通用戶，而主要針對網站經營者，非凡是中大型網站，類似新浪、網易這樣的站點。一個新聞首頁從500K縮小到170k，假設一天的pageview是3000萬(保守數字)，那么節省的服務器流量就是330k*30000000=9440G，這個成本的節約是可觀的。

　　2.我需要考慮殘障人士（盲人和弱視）嗎？
　　為殘障人士提供網絡瀏覽方便是美國及歐洲一些國家的法律規定，由于web標準頁面的清楚結構、語義完整，一些相關設備能很輕易的正確提取信息給殘障人士。因此，方便盲人閱讀信息也成為web標準的天生好處之一。至于有人說中國目前還有很多人為解決溫飽發愁，哪有時間考慮殘障人士。這是社會文明和社會道德問題，不在本書討論范疇。但假如你頁面按web標準制作了，就能達到這個效果，何樂而不為呢？

　　(三).關于布局

　　1.web標準就不能用表格了嗎？

　　首先要澄清一個概念：web標準并不是不答應用TABLE標簽，TABLE也是XHTML1.0中的標準標簽。我們只是提倡用DIV CSS布局來替代傳統的table布局。原因是：原來的TABLE布局將表現和內容混雜在一起，結構不清楚、內容不完整，不利于內容的重用。而且從語義上講，W3C制定TABLE標簽時候只是用它來做表格結構定義的，文檔中假如有表格，那么就應該用TABLE。而排版、定位這些表現的東西應該由CSS來控制。

　　2.我用table布局改版也很方便，你用CSS不一定就比我效率高。

　　個別情況或者個別項目，有可能象你說的，用table布局改版也很快。但這不是長遠之計，我們需要透過現象看本質，web標準將內容與表現相剝離，所有樣式、風格、布局等等表現的東西獨立出來，由CSS或者XSLT來單獨控制，這樣的剝離后，改版才是真正的方便。而且“改版”并不僅僅是瀏覽器上的改版，同樣的頁面假如我需要發布到手機上，符合web標準的頁面就只需要修改樣式文件，而table布局的則需要完全重做，未來假如還需要再發布到網絡電視上或者其它新設備上呢？CSS的效率一定比table高。

　　3.用web標準能制作出漂亮的頁面嗎？

　　由于一開始研究和推廣web標準的人士做得頁面都比較“樸素”，因此引起大家的誤解，以為web標準的頁面就是簡潔、輕圖形、輕視覺效果的。實際上，用TABLE布局能夠實現的頁面效果，用CSS也基本上能實現。這個問題不需要多解釋，看看國內外新建立的web標準站點就清楚了。例如：www.macromedia.com，www.mp3.com

　　(四).關于瀏覽器兼容

　　1.我不需要關心web標準，IE占有99%的市場，我做的頁面只要IE能看就可以了。
“以用戶為核心”通常都是反對web標準者的檔箭牌，實際上這是虛偽的“以用戶為核心”。你不能保證IE永遠是壟斷瀏覽器市場，你也不能保證IE不做任何改變(事實上，微軟的IE7已經開始改善對web標準的支持)。堅持用html table布局制作的頁面將是“死”的信息，不方便搜索，無法重用與共享，從長遠來講，這才是對用戶最大的傷害。

　　2.為什么web標準的頁面兼容性并不好？
我們說web標準的優勢是兼容性好，這個兼容是指向后兼容，向新瀏覽器、新設備兼容。對已有的瀏覽器來說，因為它們對web標準的支持程度不一樣，因此會出現不同瀏覽器下頁面變形的情況。我們必須采用一些"hack"技巧來實現不同瀏覽器的兼容。這是無奈、也是不可避免的，是web技術發展必然要經歷的一個過程，是我們向XML過渡必須克服的一個困難。

　　(五).其它

　　1.沒有好用的開發工具，難道要我手寫代碼？
是的。我們建議你手寫代碼，可以促進你更加深刻理解web標準。事實上，很多開發軟件已經開始支持web標準。你可以看看最新版的Dreamweaver 8，還有Adobe的Golive，微軟的Visual Studio.NET 2005，這些工具都已經很好的支持web標準頁面的開發。當新技術出現時，我們的態度應該是去了解、實踐和評估，而不是盲目反對或者坐等其成，那樣你永遠都是落后者。

　　2.老板不懂，客戶也沒有要求，我為什么要用web標準？
在自己或者開發團隊都不熟悉web標準技術的情況下，新項目采用web標準的確有風險(技術和成本風險)，可以評估后再決定是否采用web標準。但是假如有能力采用標準依然蒙混老板和客戶，這就屬于職業道德和敬業精神的問題。

　　三：未來與方向

　　我想你和我一樣，都關心WEB的未來會是怎么樣的，下一輪的新技術熱點在什么方向。其實，要回答這個問題，沒有誰比W3C更有權威了。只要看看W3C在做什么，正在研究什么規范就知道WEB的走向和趨勢了。

　　W3C明確地告訴我們：XML是未來的趨勢毋庸置疑，開放和共享是互聯網的精神和根本動力。

　　蒂姆.貝納斯-李（Tim Berners-Lee） ，W3C領導人，萬維網之父，說到：XML提供了信息交換的手段，但這僅僅只是開始。我們的目標是web的語義化，即：使得web上的信息內容更加輕易理解、更便于交換和共享，RDF和OWL語言將在這方面提供更強大的支持。

　　web技術即將迎接新一輪的變革和發展，假如你還在猶豫是不是需要學習web標準，那么你將失去這次機會。