分離結(jié)構(gòu)與表現(xiàn)的另一個(gè)重要方面是使用語義化的標(biāo)記來構(gòu)造文檔內(nèi)容。

分離結(jié)構(gòu)與表現(xiàn)的另一個(gè)重要方面是使用語義化的標(biāo)記來構(gòu)造文檔內(nèi)容。一個(gè) XHTML 元素的存在就意味被標(biāo)記內(nèi)容的那部分有相應(yīng)的結(jié)構(gòu)化的意義，沒有理由使用其他的標(biāo)記。換句話說，不要讓 CSS 使一個(gè) HTML 元素看起來就像另一個(gè) HTML 元素，比如用<div>來代替<p>標(biāo)記標(biāo)題。

首先是關(guān)于語義（Semantics）和默認(rèn)樣式的區(qū)別，默認(rèn)樣式是瀏覽器設(shè)定的一些常用tag的表現(xiàn)形式，個(gè)人認(rèn)為他的主要目的就是讓大家直觀的認(rèn)識標(biāo)簽(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來很像標(biāo)題，因?yàn)閾碛写煮w和較大的字號。<strong>,<em>用來區(qū)別于其他文字，起到了強(qiáng)調(diào)的作用。至于列表和表格很明顯的告訴你他們是做什么的。

其次，語義化的網(wǎng)頁的好處，最主要的就是對搜索引擎友好，又了良好的結(jié)構(gòu)和語義你的網(wǎng)頁內(nèi)容自然容易被搜索引擎抓取，你網(wǎng)站的推廣便可以省下不少的功夫。

具體的語義和用途在，XHTML1.0 TAG 參考中都已經(jīng)說明，這里將一些容易遺忘或者混淆的TAGS和屬性予以補(bǔ)充。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標(biāo)題使用，并且依據(jù)重要性遞減。<h1>是最高的等級。

例如:

代碼如下:

<h1>文檔標(biāo)題</h1>

<h2>次級標(biāo)題</h2>

而不要使用

<div class="title">文檔標(biāo)題</div>，或者<span class="title">文檔標(biāo)題</span>.很明顯搜索引擎對于后者是不會認(rèn)為他是標(biāo)題的。

<p>

段落標(biāo)記，知道了<p>作為段落，你就不會再使用<br/>來換行了，而且不需要<br/><br/>來區(qū)分段落與段落。<p></p>中的文字會自動換行，而且換行的效果優(yōu)于<br>。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區(qū)分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。

例如：

代碼如下:

<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)容制作精良，每天都會有會員精心制作的教程發(fā)布，無私地對網(wǎng)友進(jìn)行幫助，而且還舉辦過不少設(shè)計(jì)比賽并開發(fā)了很多目前仍被許多網(wǎng)站應(yīng)用的相關(guān)程序。而所發(fā)布的作品與點(diǎn)評受到了多家媒體關(guān)注及行家的好評，同時(shí)也從中確立了自己的社會地位，于是一批又一批的網(wǎng)絡(luò)同仁加盟了藍(lán)色理想，成為國內(nèi)最大的設(shè)計(jì)類站點(diǎn)之一。

</p>

<p>多年來，藍(lán)色理想的內(nèi)容不斷充實(shí)，先后被國內(nèi)一些知名網(wǎng)站、傳統(tǒng)媒體重點(diǎn)推介過，并陸續(xù)被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站點(diǎn)收藏，并在Google、百度、Yahoo三大搜索引擎中以簡體漢字關(guān)鍵詞"網(wǎng)站設(shè)計(jì)與開發(fā)”搜索排名均為第一，現(xiàn)在藍(lán)色理想已發(fā)展成為國內(nèi)影響最大的網(wǎng)站設(shè)計(jì)、開發(fā)的專業(yè)網(wǎng)站之一。</p>

<ul>、<ol>、<li>

<ul>無序列表，很常見的到了大家廣泛的使用，<ol>有序列表也挺常用。在web標(biāo)準(zhǔn)化過程中，<ul>還被更多的用于導(dǎo)航條，本來導(dǎo)航條就是個(gè)列表，這樣做是完全正確的，而且當(dāng)你的瀏覽器不支持CSS的時(shí)候，導(dǎo)航鏈接仍然很好使，就是美觀方面差了一點(diǎn)。

例如:

代碼如下:

<ul>

<li>項(xiàng)目一</li>

<li>項(xiàng)目二</li>

<li>項(xiàng)目三</li>

</ul>

代碼如下:

<ol>

<li>第一章</li>

<li>第二章</li>

<li>第三章</li>

</ol>

<dl>、<dt>、<dd>

dl就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。

例如：

代碼如下:

<dl>

<dt>Dog</dt>

<dd>A carnivorous mammal of the family Canidae.</dd>

</dl>

代碼如下:

<dl>

<dt>上海灘</dt>

<dd>這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經(jīng)典的劇集。

當(dāng)年在香港播出以后，產(chǎn)生了巨大的轟動效應(yīng)。</dd>

<dt>周潤發(fā)</dt>

<dd>和所有偉大的影星一樣，周潤發(fā)印證了一個(gè)時(shí)代，一個(gè)香港電影的黃金時(shí)代。

風(fēng)衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當(dāng)我們回首尋望的時(shí)候，發(fā)哥已被刻為一個(gè)時(shí)代的坐標(biāo)。</dd>

</dl>

<cite>、cite 、<q>、 <blockquote>

論壇和blog經(jīng)常會用到引用別人的話，用<q>來標(biāo)記簡短的單行引用。Web瀏覽器會自動識別在<q> 之間的內(nèi)容。不幸的是，IE不能識別，并且有些時(shí)候， <q>會引起一些可訪問性(Accessibility)的問題。正因?yàn)槿绱?，一些人建議盡量不要使用 <q>,手動的插入引用標(biāo)記。在一個(gè)包含適當(dāng)?shù)念惖?<span>中加入單行的引用內(nèi)容，那么就可以用CSS來給引用設(shè)計(jì)樣式了，但是這個(gè)沒有語義上的意義。 您可以讀讀Mark Pilgrim寫的The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag )關(guān)于處理<q>相關(guān)問題的看法。

對于那些一段或者好幾段的長篇引用，就應(yīng)當(dāng)使用 <blockquote>了。CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在<blockquote>中的，引用的內(nèi)容還必須包含在一個(gè)元素中，通常是<p>。屬性cite既可以與<q> 一起用，也可以與<blockquote>一起用，用來提供引用內(nèi)容的來源地址。需要注意的是，如果你使用 <span>來代替 <q>標(biāo)記引用內(nèi)容,那么你就不能使用 cite屬性了。

例如:

代碼如下:

<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

代碼如下:

<p> <cite>孔子</cite>曰：<q>學(xué)而不思則罔，思而不學(xué)則殆</q>.</p>

代碼如下:

<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>

代碼如下:

<blockquote cite="http://www.w3cn.org/">

<p>“我們大部分人都有深刻體驗(yàn)，每當(dāng)主流瀏覽器版本的升級，我們剛建立的網(wǎng)站就可能變得過時(shí)，

我們就需要升級或者重新建造一遍網(wǎng)站。例如1996-1999年典型的"瀏覽器大戰(zhàn)"，

為了兼容 Netscape 和 IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，

每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個(gè)新版本來支持這種新技術(shù)或新設(shè)備，

例如支持手機(jī)上網(wǎng)的 WAP 技術(shù)。類似的問題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬；

針對某種瀏覽器的 DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網(wǎng)站等等。

這是一種惡性循環(huán)，是一種巨大的浪費(fèi)?！?lt;/p>

</blockquote>

<em>、 <strong>

<em> 是用作強(qiáng)調(diào)的，<strong>是用作重點(diǎn)強(qiáng)調(diào)的。 大部分瀏覽器用斜體顯示強(qiáng)調(diào)的內(nèi)容，用粗體來顯示重點(diǎn)強(qiáng)調(diào)的內(nèi)容，然而，這是沒有必要的，如果是為了確定強(qiáng)調(diào)內(nèi)容的顯示方式，最好的方法就是使用CSS來定義他們的表現(xiàn)。當(dāng)你想要的只是視覺上的效果時(shí)，就不要使用強(qiáng)調(diào)了。而且如果你想要強(qiáng)調(diào)但是還覺得粗體或者斜體不視覺效果沒那么好，特別是斜體對于中文來說，那么你完全可以定義一些其他的比較醒目的樣式達(dá)到強(qiáng)調(diào)的效果。

例如:

代碼如下:

<p><em>強(qiáng)調(diào)</em> 的文本通常用斜體顯示，

然而， <strong>特別強(qiáng)調(diào)</strong> 的文本通常以粗體顯示。</p>

<table>、<td>、<th>、< caption >、 summary

XHTML中的表格不應(yīng)用來布局。然而如果是為了標(biāo)記列表的數(shù)據(jù)，就應(yīng)該使用表格了。<th>為表格標(biāo)題，屬性summar為摘要，<caption>標(biāo)簽為首部說明，<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 用于定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將默認(rèn)單元格內(nèi)容為節(jié)略形式。

例如:

代碼如下:

<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" class="nobg">Configurations</th>

<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" class="spec">Model</th>

<td>M9454LL/A</td>

<td>M9455LL/A</td>

<td>M9457LL/A</td>

</tr>

<tr>

<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>

<td class="alt">Dual 1.8GHz PowerPC G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>

</tr>

<tr>

<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>

<td>900MHz per processor</td>

<td>1GHz per processor</td>

<td>1.25GHz per processor</td>

</tr>

<tr>

<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>

<td class="alt">512K per processor</td>

<td class="alt">512K per processor</td>

<td class="alt">512K per processor</td>

</tr>

</table>

效果察看：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn>

代碼如下:

<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

<ins>, <del>

知道del，就不要再用<s>做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時(shí)間。ins是表示插入，也有這樣的屬性。

例如：

代碼如下:

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

<code>

表示是計(jì)算機(jī)代碼。而默認(rèn)樣式為打字體。技術(shù)論壇和blog中經(jīng)常遇到。

例如：

代碼如下:

<code>p{margin:2px 0;}</code>

<abbr>、<acronym>

<abbr>標(biāo)簽是表示web頁面上的簡稱，<acronym>標(biāo)簽為取首字母縮寫。（注：這里把簡稱和縮寫分開而論，簡稱范圍比縮寫大，取首字母的縮

寫用<acronym>標(biāo)簽）Windows的IE6.0以下的瀏覽器暫不支持<abbr>標(biāo)簽。 在IE里，你可以應(yīng)用CSS給<acronym>但是不能應(yīng)用給<abbr>標(biāo)簽，

IE會為<acronym>標(biāo)簽的title屬性顯示提示，但是會忽略<abbr>標(biāo)簽。

解決方法見: http://www.w3cn.org/article/translate/2005/115.html

例如:

代碼如下:

<abbr title="Cascading Style Sheets">CSS</abbr>

代碼如下:

<acronym title="Cascading Style Sheets">CSS</acronym >

alt屬性和title屬性

title屬性用來為元素提供額外說明信息title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標(biāo)簽。但是并不是必須的。

alt屬性為不能顯示圖像、窗體或applets的用戶代理（UA），指定替換文字。替換文字的語言由lang屬性指定。

代碼如下:

<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">

代碼如下:

<a title="js獲取單選按鈕的數(shù)據(jù)">js獲取單選按鈕的數(shù)據(jù)</a>

參考資料:

默認(rèn)樣式：

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/TR/CSS21/sample.html

語義化:

http://www.456bereastreet.com/lab/developing_with_web_standards/zh

http://www.456bereastreet.com/lab/developing_with_web_standards

http://www.w3cn.org/article/translate/2005/114.html

http://www.w3cn.org/article/translate/2005/114.html

http://www.junchenwu.com/2005/11/html_tags.html

http://brainstormsandraves.com/articles/semantics/structure/

http://www.w3.org/TR/html401/struct/text.htm

http://www.simplebits.com/bits/simplequiz/