xhtml結構化使用xhtml按標準重構網(wǎng)站

1、XHTML結構化：使用XHTML按標準重構網(wǎng)站.我們曾經(jīng)為本節(jié)撰寫的標題是：“XHTML:簡單的規(guī)則，容易的方針?！痹蛑皇?，本節(jié)討論的規(guī)則和方針是簡單和容易的。原因之二是，一本簡單和容易的WEB設計圖書，就像超級市場的新式的免費商品一樣，雖然常見卻可以有效地吸引人的眼球，這樣的東西可以刺激人的興趣，并且鼓勵人們嘗試。我確實希望本節(jié)的內容可以激發(fā)你的興趣，并鼓勵你去嘗試。為什么這么說呢？因為一旦你掌握了本章包含的簡單容易的理念，你就會

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

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

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

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

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

7、，就形成了文檔的一個division。確定結構的通用機制所有編寫HTML的人對段落和標題這類常見的元素都很熟悉，但是有些人對div就可能不那么熟悉了。在W3C的描述中我們可以找到理解div元素的關鍵，“一種添加結構的通用機制?！痹诒菊镜氖醉摚覀儗⒔坛棠夸浟斜矸庋b于一個div之中，這是因為教程目錄并不是正文的任何元素的一部分。其中，h2元素標記每個教程的標題，同時ul列表元素標記每個教程的詳細列表。但是在更大更具體的意義中，這個教程目錄

8、扮演了一個結構化的角色，即二級導航組件。為了強調這個角色，我們使用navsecond這個id標注這個div。HTML教程HTMLXHTMLCSSTCPIPXML教程XMLXSL............你可以使用任何命名。“Gladys“和“angebox“都完全符號XHTML的命名規(guī)則。但是語義的(semantic)或者元結構化(metastructural)的命名是最好的（即能夠解釋其中元素所執(zhí)行功能的命名）。當客戶決定使用藍色時，你

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

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

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

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

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

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

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

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