xhtml結(jié)構(gòu)化使用xhtml按標(biāo)準(zhǔn)重構(gòu)網(wǎng)站

1、XHTML結(jié)構(gòu)化：使用XHTML按標(biāo)準(zhǔn)重構(gòu)網(wǎng)站.我們?cè)?jīng)為本節(jié)撰寫的標(biāo)題是：“XHTML:簡(jiǎn)單的規(guī)則，容易的方針?！痹蛑皇牵竟?jié)討論的規(guī)則和方針是簡(jiǎn)單和容易的。原因之二是，一本簡(jiǎn)單和容易的WEB設(shè)計(jì)圖書，就像超級(jí)市場(chǎng)的新式的免費(fèi)商品一樣，雖然常見卻可以有效地吸引人的眼球，這樣的東西可以刺激人的興趣，并且鼓勵(lì)人們嘗試。我確實(shí)希望本節(jié)的內(nèi)容可以激發(fā)你的興趣，并鼓勵(lì)你去嘗試。為什么這么說(shuō)呢？因?yàn)橐坏┠阏莆樟吮菊掳暮?jiǎn)單容易的理念，你就會(huì)

2、重新思考網(wǎng)頁(yè)運(yùn)作的方式，并開始改變建造它們的方法。然而我并不希望你只是將代碼重新改寫一邊。我希望你可以實(shí)實(shí)在在地以另一種方式思考和工作。另一方面，重構(gòu)才是XHTML真正的意義。在本章，我們將研究結(jié)構(gòu)化標(biāo)記的機(jī)制和涵義。如果你正在將網(wǎng)站標(biāo)準(zhǔn)融入你的開發(fā)項(xiàng)目，你或許會(huì)覺(jué)得本章的內(nèi)容有些熟悉。不過(guò)即便是這方面的老手，也會(huì)從本章發(fā)現(xiàn)意外的收獲。XHTML規(guī)則概要將傳統(tǒng)的HTML轉(zhuǎn)換為XHTML1.0是快捷且無(wú)痛的，只要你遵守一些簡(jiǎn)單的規(guī)則和容易

3、的方針。不管是否使用過(guò)HTML，都不會(huì)妨礙你使用XHTML。使用恰當(dāng)?shù)奈臋n類型聲明和命名空間。使用meta元素聲明你的內(nèi)容類型。使用小寫字母書寫所有的元素和屬性。為所有的屬性值加引號(hào)。為所有的屬性分配值。關(guān)閉所有的標(biāo)簽。使用空格和斜線關(guān)閉空標(biāo)簽。不要在注釋中寫雙下劃線。確保小于號(hào)及和號(hào)為同時(shí)，避免使用已被廢棄的HTML元素比如，或者無(wú)語(yǔ)義的元素比如，來(lái)模擬其實(shí)不存在的邏輯結(jié)構(gòu)。比如，不要像這樣做：我的主題介紹性文字補(bǔ)充性的觀點(diǎn)相關(guān)文字根

4、據(jù)它們的意義使用元素，而不是根據(jù)它們的外觀我們中一些人已經(jīng)陷在了一個(gè)壞習(xí)慣中，當(dāng)我們僅僅需要一個(gè)大號(hào)字的文本時(shí)使用h1，或者在我們需要在前面加一個(gè)圓點(diǎn)符號(hào)時(shí)使用li。就像我們?cè)谇懊娴恼鹿?jié)討論過(guò)的，瀏覽器一直都習(xí)慣于將設(shè)計(jì)屬性強(qiáng)加于HTML元素之上。我們都一直習(xí)慣于認(rèn)為，h1意味著大號(hào)字，而li意味著圓點(diǎn)，或者blockquote意味著文本縮進(jìn)。我們中的大多數(shù)人還在使用結(jié)構(gòu)化元素模擬表現(xiàn)效果的方式來(lái)胡亂地寫作HTML。同樣地，假如設(shè)計(jì)師希

5、望所有的標(biāo)題使用相同的字號(hào)，她會(huì)將所有的標(biāo)題設(shè)置為h1，即使這么做毫無(wú)結(jié)構(gòu)化語(yǔ)義可言。這是主標(biāo)題，在我將文本按照提綱格式組織的情況下。這不是主標(biāo)題，但是我希望它與上面的標(biāo)題使用一樣的字體，但是我不知該如何使用CSS。這根本不是一個(gè)標(biāo)題。但是我非常希望頁(yè)面中的文字使用相同的字體，以達(dá)到我希望的，如果我了解CSS，就可以在不打亂文檔結(jié)構(gòu)的情況下達(dá)到這個(gè)設(shè)計(jì)。我們必須把我們的小把XTHML，以及巧妙地利用CSS，并通過(guò)標(biāo)準(zhǔn)文檔對(duì)象模型(DOM

6、)向站點(diǎn)添加復(fù)雜精巧的行為。W3C在其最新的XHTML2草案的XHTML結(jié)構(gòu)模型中這樣定義div：div元素，通過(guò)與id、class及role屬性配合，提供向文檔添加額外結(jié)構(gòu)的通用機(jī)制。這個(gè)元素不會(huì)將表現(xiàn)的風(fēng)格定義于內(nèi)容。所以，創(chuàng)作者可以通過(guò)將這個(gè)元素與樣式表、xml:lang、屬性等配合使用，使XHTML適應(yīng)他們自身的需求和口味。div是division的簡(jiǎn)寫。division意為分割、區(qū)域、分組。比方說(shuō)，當(dāng)你將一系列的鏈接組合在一起

7、，就形成了文檔的一個(gè)division。確定結(jié)構(gòu)的通用機(jī)制所有編寫HTML的人對(duì)段落和標(biāo)題這類常見的元素都很熟悉，但是有些人對(duì)div就可能不那么熟悉了。在W3C的描述中我們可以找到理解div元素的關(guān)鍵，“一種添加結(jié)構(gòu)的通用機(jī)制。”在本站的首頁(yè)，我們將教程目錄列表封裝于一個(gè)div之中，這是因?yàn)榻坛棠夸洸⒉皇钦牡娜魏卧氐囊徊糠?。其中，h2元素標(biāo)記每個(gè)教程的標(biāo)題，同時(shí)ul列表元素標(biāo)記每個(gè)教程的詳細(xì)列表。但是在更大更具體的意義中，這個(gè)教程目錄

8、扮演了一個(gè)結(jié)構(gòu)化的角色，即二級(jí)導(dǎo)航組件。為了強(qiáng)調(diào)這個(gè)角色，我們使用navsecond這個(gè)id標(biāo)注這個(gè)div。HTML教程HTMLXHTMLCSSTCPIPXML教程XMLXSL............你可以使用任何命名?！癎ladys“和“angebox“都完全符號(hào)XHTML的命名規(guī)則。但是語(yǔ)義的(semantic)或者元結(jié)構(gòu)化(metastructural)的命名是最好的（即能夠解釋其中元素所執(zhí)行功能的命名）。當(dāng)客戶決定使用藍(lán)色時(shí)，你

9、會(huì)覺(jué)得將站點(diǎn)某部分命名為angebox（橙色框）會(huì)非常地傻。下面的這種情況中，你會(huì)覺(jué)得自己更傻，當(dāng)距離最后交付只有六個(gè)月時(shí)，你開始調(diào)校樣式表，卻怎么也想不起來(lái)“Gladys“（格拉迪斯，女子名）到底代表導(dǎo)航區(qū)、側(cè)欄還是搜索框。因此，將id標(biāo)注為“menu“、“content“或者“searchfm“會(huì)幫助你回憶。進(jìn)一步講，標(biāo)記不等同于設(shè)計(jì)，結(jié)構(gòu)良好的的頁(yè)面可以被格式化為你希望的任何樣子。這樣做的結(jié)果是，無(wú)論你使用純粹CSS布局或者混合布

10、局，你都會(huì)徹底改掉使用表現(xiàn)標(biāo)記進(jìn)行思考和創(chuàng)作的習(xí)慣。idVs.classid屬性對(duì)于XHTML并不新鮮；class屬性或者div元素也一樣。它們都可以回溯到HTML時(shí)代。id屬性為一個(gè)元素分配一個(gè)唯一的名字。每個(gè)名字只能在被賦予的頁(yè)面使用一次。（例如，假如你的頁(yè)面包含id為content的div，那么另外一個(gè)div或者其他別的元素都不能使用這個(gè)名字。相反地，class屬性可以被一遍有一遍地使用在頁(yè)面中（例如，頁(yè)面中的五個(gè)段落都可以使用名

11、為“small“或者“footnote“的class名稱）。下面的標(biāo)記將有助于闡明id和class的差異：Searchfmcomponentsgohere.Thissectionofthepageisunique.TodaysblogpostBlogcontentgoeshere.Hereisanotherparagraphofblogcontent.Justastherecanbemanyparagraphsonapagesotoot

12、heremaybemanyentriesinablog.Ablogpagecouldusemultipleinstancesoftheclass“blogentry“(anyotherclass).YesterdaysblogpostInfacthereweareinsideanotherdivofclass“blogentry.“Theyreproducelikerabbits.Iftherearetenblogpostsonthis

13、pagetheremightbetendivsofclass“blogentry“aswell.在這個(gè)例子中，名為searchfm的div被用來(lái)封裝包含搜索表單的頁(yè)面區(qū)域，而divclass=“blogentry“則用來(lái)封裝blog中的每個(gè)文章入口。在頁(yè)面中只有一個(gè)搜索表單，所以我們選擇id標(biāo)注這個(gè)唯一的組件。但是blog則擁有許多的（文章）入口，所以class屬性被應(yīng)用于這種情況。同樣地，新聞?wù)军c(diǎn)通常擁有多個(gè)div，這些div的cla

14、ss可以命名為“newsitem“或者別的什么。然而不是所有的站點(diǎn)都需要div。blog站點(diǎn)可以僅僅使用h1H2和h3標(biāo)題和段落，新聞?wù)军c(diǎn)也一樣。我們?cè)谶@里展示class為blogentry的div，并不是鼓勵(lì)你在站點(diǎn)中塞滿div，而僅僅是為了向你展示這個(gè)原則：在同一個(gè)HTML文檔中，使用多次class，但只能使用一次id。粘性貼紙理論把id屬性比作粘性貼紙來(lái)進(jìn)行思考應(yīng)該是有幫助的。我會(huì)在冰箱上拍一張貼紙來(lái)提醒自己去買牛奶，電話上面也會(huì)

15、貼一張，提醒我給一位逾期繳納的客戶打電話。還有一個(gè)，被貼在賬本夾上面，來(lái)提醒我這個(gè)月15號(hào)之前必須繳納的賬單。id同樣會(huì)標(biāo)注文檔中的特殊區(qū)域，以便提醒你哪個(gè)區(qū)域需要特殊的處理，在這點(diǎn)上，id屬性與粘性貼紙是相似的。為了實(shí)現(xiàn)所謂的特殊處理，你需要使用這個(gè)特殊的id在樣式表中編寫若干規(guī)則，或者在Javript文件中添加幾行代碼。比方說(shuō)，你的CSS文件中有一些特定的規(guī)則，這些規(guī)則只應(yīng)用于id名為searchfm的div內(nèi)的元素。當(dāng)某一id屬性

16、作為一個(gè)有磁性的東西（磁鐵）被用于一系列特定的CSS規(guī)則時(shí)，它被稱為CSS選擇器。有許多創(chuàng)建選擇器的方法，不過(guò)id是很容易使用的，并且有多的用途。id的力量id屬性不可思議地強(qiáng)有力。它具有以下的能力：作為樣式表選擇器，使我們有能力創(chuàng)作緊湊的最小化的XHTML。作為超文本的目標(biāo)錨，取代過(guò)時(shí)的name屬性。作為從基于DOM的腳本來(lái)定位特定元素的方法。作為對(duì)象元素的名稱。作為一種綜合用途處理(generalpurposeprocessing)