分離結(jié)構(gòu)與表現(xiàn)的另一個(gè)重要方面是使用語(yǔ)義化的標(biāo)記來(lái)構(gòu)造文檔內(nèi)容。一個(gè) XHTML 元素的存在就意味被標(biāo)記內(nèi)容的那部分有相應(yīng)的結(jié)構(gòu)化的意義，沒(méi)有理由使用其他的標(biāo)記。換句話說(shuō)，不要讓 CSS 使一個(gè) HTML 元素看起來(lái)就像另一個(gè) HTML 元素，比如用 div 來(lái)代替 p 標(biāo)記標(biāo)題。
首先是關(guān)于語(yǔ)義（Semantics）和默認(rèn)樣式的區(qū)別，默認(rèn)樣式是瀏覽器設(shè)定的一些常用tag的表現(xiàn)形式，個(gè)人認(rèn)為他的主要目的就是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來(lái)很像標(biāo)題，因?yàn)閾碛写煮w和較大的字號(hào)。 strong , em 用來(lái)區(qū)別于其他文字，起到了強(qiáng)調(diào)的作用。至于列表和表格很明顯的告訴你他們是做什么的。
段落標(biāo)記，知道了 p 作為段落，你就不會(huì)再使用 br/ 來(lái)?yè)Q行了，而且不需要 br/ br/ 來(lái)區(qū)分段落與段落。 p /p 中的文字會(huì)自動(dòng)換行，而且換行的效果優(yōu)于 br 。段落與段落之間的空隙也可以利用CSS來(lái)控制，很容易而且清晰的區(qū)分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。 例如：復(fù)制內(nèi)容到剪貼板 p 藍(lán)色理想 www.blueidea.com 誕生于1999年的10月。從成立之初，藍(lán)色理想就以建設(shè)網(wǎng)站設(shè)計(jì)與開發(fā)人員之家為宗旨，以介紹網(wǎng)絡(luò)開發(fā)技術(shù)與網(wǎng)站創(chuàng)作設(shè)計(jì)交流為主要內(nèi)容。其網(wǎng)站內(nèi)容制作精良，每天都會(huì)有會(huì)員精心制作的教程發(fā)布，無(wú)私地對(duì)網(wǎng)友進(jìn)行幫助，而且還舉辦過(guò)不少設(shè)計(jì)比賽并開發(fā)了很多目前仍被許多網(wǎng)站應(yīng)用的相關(guān)程序。而所發(fā)布的作品與點(diǎn)評(píng)受到了多家媒體關(guān)注及行家的好評(píng)，同時(shí)也從中確立了自己的社會(huì)地位，于是一批又一批的網(wǎng)絡(luò)同仁加盟了藍(lán)色理想，成為國(guó)內(nèi)最大的設(shè)計(jì)類站點(diǎn)之一。 /p p 多年來(lái)，藍(lán)色理想的內(nèi)容不斷充實(shí)，先后被國(guó)內(nèi)一些知名網(wǎng)站、傳統(tǒng)媒體重點(diǎn)推介過(guò)，并陸續(xù)被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站點(diǎn)收藏，并在Google、百度、Yahoo三大搜索引擎中以簡(jiǎn)體漢字關(guān)鍵詞 網(wǎng)站設(shè)計(jì)與開發(fā) 搜索排名均為第一，現(xiàn)在藍(lán)色理想已發(fā)展成為國(guó)內(nèi)影響最大的網(wǎng)站設(shè)計(jì)、開發(fā)的專業(yè)網(wǎng)站之一。 /p ul 、 ol 、 li
ul html' target='_blank'>無(wú)序列表，很常見的到了大家廣泛的使用， ol 有序列表也挺常用。在web標(biāo)準(zhǔn)化過(guò)程中， ul 還被更多的用于導(dǎo)航條，本來(lái)導(dǎo)航條就是個(gè)列表，這樣做是完全正確的，而且當(dāng)你的瀏覽器不支持CSS的時(shí)候，導(dǎo)航鏈接仍然很好使，就是美觀方面差了一點(diǎn)。 例如:復(fù)制內(nèi)容到剪貼板 ul li 項(xiàng)目一 /li li 項(xiàng)目二 /li li 項(xiàng)目三 /li /ul 復(fù)制內(nèi)容到剪貼板 ol li 第一章 /li li 第二章 /li li 第三章 /li /ol dl 、 dt 、 dd
dl就是 定義列表 。比如說(shuō)詞典里面的詞的解釋、定義就可以用這種列表。 例如：復(fù)制內(nèi)容到剪貼板 dl dt Dog /dt dd A carnivorous mammal of the family Canidae. /dd /dl 復(fù)制內(nèi)容到剪貼板 dl dt 上海灘 /dt dd 這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經(jīng)典的劇集。 當(dāng)年在香港播出以后，產(chǎn)生了巨大的轟動(dòng)效應(yīng)。 /dd dt 周潤(rùn)發(fā) /dt dd 和所有偉大的影星一樣，周潤(rùn)發(fā)印證了一個(gè)時(shí)代，一個(gè)香港電影的黃金時(shí)代。 風(fēng)衣墨鏡、冷血雙槍、陽(yáng)光微笑，都封存膠片之中，當(dāng)我們回首尋望的時(shí)候，發(fā)哥已被刻為一個(gè)時(shí)代的坐標(biāo)。 /dd /dl cite 、cite 、 q 、 blockquote
例如:復(fù)制內(nèi)容到剪貼板 cite Designing with Web Standards /cite is an excellent book by Jeffrey Zeldman.復(fù)制內(nèi)容到剪貼板 p cite 孔子 /cite 曰： q 學(xué)而不思則罔，思而不學(xué)則殆 /q . /p 復(fù)制內(nèi)容到剪貼板 p The W3C says that q cite= http://www.w3.org/TR/REC-html40/ struct/text.html#h-9.2.1 The presentation of phrase elements depends on the user agent. /q . /p 復(fù)制內(nèi)容到剪貼板 blockquote cite= http://www.w3cn.org/ p 我們大部分人都有深刻體驗(yàn)，每當(dāng)主流瀏覽器版本的升級(jí)，我們剛建立的網(wǎng)站就可能變得過(guò)時(shí)， 我們就需要升級(jí)或者重新建造一遍網(wǎng)站。例如1996-1999年典型的 瀏覽器大戰(zhàn) ， 為了兼容 Netscape 和 IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的， 每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個(gè)新版本來(lái)支持這種新技術(shù)或新設(shè)備， 例如支持手機(jī)上網(wǎng)的 WAP 技術(shù)。類似的問(wèn)題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬； 針對(duì)某種瀏覽器的 DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無(wú)法瀏覽網(wǎng)站等等。 這是一種惡性循環(huán)，是一種巨大的浪費(fèi)。 /p /blockquote em 、 strong
em 是用作強(qiáng)調(diào)的， strong 是用作重點(diǎn)強(qiáng)調(diào)的。 大部分瀏覽器用斜體顯示強(qiáng)調(diào)的內(nèi)容，用粗體來(lái)顯示重點(diǎn)強(qiáng)調(diào)的內(nèi)容，然而，這是沒(méi)有必要的，如果是為了確定強(qiáng)調(diào)內(nèi)容的顯示方式，最好的方法就是使用CSS來(lái)定義他們的表現(xiàn)。當(dāng)你想要的只是視覺上的效果時(shí)，就不要使用強(qiáng)調(diào)了。而且如果你想要強(qiáng)調(diào)但是還覺得粗體或者斜體不視覺效果沒(méi)那么好，特別是斜體對(duì)于中文來(lái)說(shuō)，那么你完全可以定義一些其他的比較醒目的樣式達(dá)到強(qiáng)調(diào)的效果。 例如:復(fù)制內(nèi)容到剪貼板 p em 強(qiáng)調(diào) /em 的文本通常用斜體顯示， 然而， strong 特別強(qiáng)調(diào) /strong 的文本通常以粗體顯示。 /p table 、 td 、 th 、 caption 、 summary
XHTML中的表格不應(yīng)用來(lái)布局。然而如果是為了標(biāo)記列表的數(shù)據(jù)，就應(yīng)該使用表格了。 th 為表格標(biāo)題，屬性summar為摘要， caption 標(biāo)簽為首部說(shuō)明， thead 標(biāo)簽為表格頭部， tbody 標(biāo)簽為表格主體內(nèi)容， tfoot 標(biāo)簽為表格尾部。 其中還可以使用scope 可用于取代headers屬性，標(biāo)記含有表頭信息的單元格，其中各數(shù)值的內(nèi)容如下： row 指示當(dāng)前單元格，為包含當(dāng)前單元格的行提供相關(guān)的表頭信息。 col 指示當(dāng)前單元格，為根據(jù)當(dāng)前單元格指定的列提供相應(yīng)的表頭信息。 rowgroup 指示當(dāng)前單元格，為包含當(dāng)前單元格的其余行組提供相關(guān)的表頭信息。 colgroup 指示當(dāng)前單元格，為根據(jù)當(dāng)前單元格指定的其余列組提供相應(yīng)的表頭信息。 abbr 用于定義表頭單元格中的縮寫名，如果沒(méi)有定義該屬性，則將默認(rèn)單元格內(nèi)容為節(jié)略形式。 例如:復(fù)制內(nèi)容到剪貼板 table id= mytable cellspacing= 0 summary= The technical specifications of the Apple PowerMac G5 series caption Table 1: Power Mac G5 tech specs /caption tr th scope= col abbr= Configurations > th scope= col abbr= Dual 1.8 Dual 1.8GHz /th th scope= col abbr= Dual 2 Dual 2GHz /th th scope= col abbr= Dual 2.5 Dual 2.5GHz /th /tr tr th scope= row abbr= Model > td M9454LL/A /td td M9455LL/A /td td M9457LL/A /td /tr tr th scope= row abbr= G5 Processor > td > td > td > /tr tr th scope= row abbr= Frontside bus > td 900MHz per processor /td td 1GHz per processor /td td 1.25GHz per processor /td /tr tr th scope= row abbr= L2 Cache > td > td > td > /tr /table 效果察看：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
dfn 復(fù)制內(nèi)容到剪貼板 p dfn title= Microsoft web browser Internet Explorer /dfn is the most popular browser used underwater. /p ins , del
知道del，就不要再用 s 做刪除線了，用del顯然更具有語(yǔ)義化。而且del還帶有cite和datetime來(lái)表明刪除的原因以及刪除的時(shí)間。ins是表示插入，也有這樣的屬性。 例如：復(fù)制內(nèi)容到剪貼板 p It really was ins cite= rarara.html datetime= 20031024 very /ins good. /p code
資源鏈接： Bad Tags： http://www.htmldog.com/guides/htmlintermediate/badtags/ The Q tag http://diveintomark.org/archives/2002/05/04/the_q_tag HTML, XHTML, semantics and the future of the web http://www.westciv.com/style_master/house/good_oil/xhtml/index.html html教程
