W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
根據(jù)W3C的標(biāo)準(zhǔn),網(wǎng)站的應(yīng)該有以下3個部分構(gòu)成:結(jié)構(gòu)(structure) 使用XHTML構(gòu)架網(wǎng)站,包括標(biāo)題、副標(biāo)題、段落、數(shù)字列表等,表現(xiàn)(presentation)使用CSS來格式化網(wǎng)頁、控制字體、布局、顏色等。行為(behavior)使用標(biāo)準(zhǔn)的對象模型W3C DOM實現(xiàn)多平臺和瀏覽器的交互行為和效果。
XHTML是一個扮演者類似HTML的角色的XML,他可以顯示在舊的Web瀏覽器,同樣也可以工作在大多數(shù)Internet設(shè)備。下面是XHTML的一些常用規(guī)則:
XML、XHTML、和HTML 4.0 文檔的默認(rèn)字符集是 Unicode,一個由 Unicode 聯(lián)盟定義的標(biāo)準(zhǔn)。Unicode 是一套全面的字符集,它為每個字符提供了一個特定的唯一的數(shù)字,不論平臺、程序和語言。Unicode 也是我們擁有的最接近通用字母表的事物,盡管它并不是一個字母表,而是一套數(shù)字映射方案。
盡管 Unicode 是 web 文檔默認(rèn)的字符集,開發(fā)人員依然可以自由地選擇更適合他們的其他字符集。比方說,美國和西歐的網(wǎng)站常常使用 ISO-8859-1 (Latin-1) 編碼,而中華人民共和國的國家標(biāo)準(zhǔn)是 gb2312。
記?。赫堊畲笙薅鹊厥褂?CSS 來進行布局。在 web 標(biāo)準(zhǔn)的世界里,XHTML 標(biāo)記與表現(xiàn)無關(guān),它只與文檔結(jié)構(gòu)有關(guān)。
結(jié)構(gòu)良好的文檔可以向瀏覽器傳達盡可能多的語義,不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結(jié)構(gòu)良好的文檔都能向用戶傳達可視化的語義,即使是在老的瀏覽器,或是在被用戶關(guān)閉了 CSS 的現(xiàn)代瀏覽器中。
不是每個站點都能立即拋棄 HTML 表格布局。CSS 的發(fā)明者,W3C,直到 2002 年 11 月才將官方網(wǎng)站轉(zhuǎn)換為 CSS 布局。然而,即使是頑固的唯標(biāo)準(zhǔn)主義者也不總是將表現(xiàn)從結(jié)構(gòu)中完全分離處理,至少在 XHTML 1 中是做不到的。但是現(xiàn)在,我們可以向這個理想邁出重大的一步,通過將表現(xiàn)從結(jié)構(gòu)中分離(或者說將數(shù)據(jù)從設(shè)計中),即使是混合的傳統(tǒng)的布局也可從中受益。
下面有一些提示,可以幫助你通過更結(jié)構(gòu)化的方式進行思維:
在語法學(xué)校,我們中的大部分人都被迫使用標(biāo)準(zhǔn)的提綱格式來寫文章?,F(xiàn)在,我們成為了設(shè)計師,可以多么自由地擺脫提綱的限制,然后大膽地投身于獨特的個人表達的自由領(lǐng)域(也許我們的宣傳冊和商業(yè)站點還不是那么獨特和個人化)。但是至少我們不會再受到提綱的困擾了。
實際上,依照 HTML,我們應(yīng)該將內(nèi)容結(jié)構(gòu)化為有組織的層級。在瀏覽器不支持 CSS 的時期,我們無法在交付可供銷售的布局的同時做到這一點。但是今天,在將我們的設(shè)計不折不扣地實現(xiàn)的同時,我們有能力交付內(nèi)在結(jié)構(gòu)良好的文檔。
當(dāng)你將供網(wǎng)絡(luò)使用的文本進行標(biāo)記,或者當(dāng)你將已有的文本文檔轉(zhuǎn)換為網(wǎng)頁時,請使用傳統(tǒng)提綱的這些條目進行思考。
<h1>我的主題</h1>
<p>介紹性文字</p>
<h2>補充性的觀點</h2>
<p>相關(guān)文字</p>
同時,避免使用已被廢棄的 HTML 元素比如 <font>,或者無語義的元素比如 <br />,來模擬其實不存在的邏輯結(jié)構(gòu)。
比如,不要像這樣做:
<font size="7">我的主題</font><br />
介紹性文字<br /><br />
<font size="6">補充性的觀點</font><br />
相關(guān)文字<br />
我們中一些人已經(jīng)陷在了一個壞習(xí)慣中,當(dāng)我們僅僅需要一個大號字的文本時使用h1,或者在我們需要在前面加一個圓點符號時使用 li。就像我們在前面的章節(jié)討論過的,瀏覽器一直都習(xí)慣于將設(shè)計屬性強加于 HTML 元素之上。我們都一直習(xí)慣于認(rèn)為,h1 意味著大號字,而li意味著圓點,或者 blockquote 意味著文本縮進。我們中的大多數(shù)人還在使用結(jié)構(gòu)化元素模擬表現(xiàn)效果的方式來胡亂地寫作 HTML。
同樣地,假如設(shè)計師希望所有的標(biāo)題使用相同的字號,她會將所有的標(biāo)題設(shè)置為 h1,即使這么做毫無結(jié)構(gòu)化語義可言。
<h1>這是主標(biāo)題,在我將文本按照提綱格式組織的情況下。</h1> <h1>這不是主標(biāo)題,但是我希望它與上面的標(biāo)題使用一樣的字體,但是我不知該如何使用CSS。</h1> <h1>這根本不是一個標(biāo)題。但是我非常希望頁面中的文字使用相同的字體,以達到我希望的, 如果我了解CSS,就可以在不打亂文檔結(jié)構(gòu)的情況下達到這個設(shè)計。</h1>
我們必須把我們的小把戲放到一邊,然后開始根據(jù)元素的語義來使用它們,而不是根據(jù)它們看上去的樣子。實際上,h1可以成為你希望的任何樣子。通過 CSS,h1 可以成為非粗體的小號的羅馬字體,而 p 文本可以成為粗體的大號字,li 也可以沒有圓點(你或者可以使用小貓小狗或者公司標(biāo)志的 PNG,GIF 或者 JPEG 圖片取而代之)等等。
從今天開始,我們將要使用 CSS 來決定元素的外觀。我們甚至可以根據(jù)元素在頁面中或者在站點中所在的位置來改變它們的外觀。CSS 可以將表現(xiàn)從結(jié)構(gòu)中徹底抽離,并且允許你按照你喜歡的樣式來格式化任何元素。
h1, h2, h3, h4, h5, h6 { font-family: georgia, palatino, "New Century Schoolbook", times, serif; font-weight: normal; font-size: 2em; margin-top: 1em; margin-bottom: 0; }
你為什么要這么做呢?這么做的目的是為了在圖形瀏覽器中獲得品牌化的外觀和感覺的同時,在文本瀏覽器、無線設(shè)備、HTML 格式的電子郵件中,文檔的結(jié)構(gòu)得到保留。
我們并不想在關(guān)于 XHTML 的章節(jié)講述更多 CSS 方面的技術(shù)。我們只是希望展示文檔結(jié)構(gòu)和可視表達是兩個完全不同的事物,并且結(jié)構(gòu)化元素應(yīng)被用來轉(zhuǎn)換文本,而不是強加顯示效果。
由于我們已經(jīng)忘記或者根本不知道 HTML 和 XHTML 的用途是傳達結(jié)構(gòu)化的意義,許多 HTML 爭論者這樣使用標(biāo)簽來插入列表:
項目一<br /> 項目二<br /> 項目三<br />
考慮一下使用有序或者無序列表取而代之:
<ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul>
"但是li給我一個圓點,而我不需要圓點!"你也許會這么說。根據(jù)上面的章節(jié),CSS不對元素被期望的外觀做任何假定。它等待你來告訴它你所期待的元素外觀。關(guān)閉圓點是 CSS 的最基本的能力。它有能力使列表看起來和普通文本沒有兩樣,也可以使列表看起來像圖形導(dǎo)航欄,具有完整的反轉(zhuǎn)效果。
所以,請使用列表元素來標(biāo)記列表。相似地,使用 strong
來代替 b
,使用 em
代替 i
,等等。在大多數(shù)桌面瀏覽器缺省狀態(tài)下,strong
的顯示效果和 b
相同,而 em
和 i
相同,同時也可以在不破壞文檔結(jié)構(gòu)的情況下創(chuàng)建你期待的視覺效果。
盡管 CSS 不會為任何元素的顯示作假設(shè),瀏覽器卻作了很多假設(shè),并且我們還沒有碰到一個將 strong
顯示為其他效果而不是粗體字的瀏覽器(除非是被設(shè)計師創(chuàng)建的 CSS 指示以其他方式顯示)。假如你擔(dān)心某個陌生的瀏覽器不會將 strong
顯示為粗體字,你可以編寫這么一條 CSS 規(guī)則:
strong {
font-weight: bold;
font-style: normal;
}
Web標(biāo)準(zhǔn)不僅要求我們使用什么技術(shù),還需要知道如何使用它們。使用XHTML編寫標(biāo)記,同時使用CSS處理部分或全部布局,不僅會使站點更容易使用和更輕,同時節(jié)省大量帶寬。像我們之前使用的技術(shù)一樣,XHTML和CSS也被濫用和誤用。有品味的XHTML,就像冗長的HTML,是用戶帶寬和時間。長時間過量的CSS不能完全取代HTML代碼的性能;這只是一個被另一個取代的壞事情。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: