|
語(yǔ)義化你的HTML標(biāo)簽和屬性
分離結(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)的作用。至于列表和表格很明顯的告訴你他們是做什么的。
其次，語(yǔ)義化的網(wǎng)頁(yè)的好處，最主要的就是對(duì)搜索引擎友好，又了良好的結(jié)構(gòu)和語(yǔ)義你的網(wǎng)頁(yè)內(nèi)容自然容易被搜索引擎抓取，你網(wǎng)站的推廣便可以省下不少的功夫。
具體的語(yǔ)義和用途在，XHTML1.0 TAG 參考中都已經(jīng)說(shuō)明，這里將一些容易遺忘或者混淆的TAGS和屬性予以補(bǔ)充。
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標(biāo)題使用，并且依據(jù)重要性遞減。<h1>是最高的等級(jí)。
例如:
CODE:
<h1>文檔標(biāo)題</h1>
<h2>次級(jí)標(biāo)題</h2>
而不要使用
<div class="title">文檔標(biāo)題</div>，或者<span class="title">文檔標(biāo)題</span>.很明顯搜索引擎對(duì)于后者是不會(huì)認(rèn)為他是標(biāo)題的。
<p>
段落標(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)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。
例如：
CODE:
<p以建設(shè)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)人員之家為宗旨，以介紹網(wǎng)絡(luò)開(kāi)發(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ì)比賽并開(kāi)發(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ì)與開(kāi)發(fā)”搜索排名均為第一，現(xiàn)在藍(lán)色理想已發(fā)展成為國(guó)內(nèi)影響最大的網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)的專業(yè)網(wǎng)站之一。<
<ul>、<ol>、<li>
<ul>無(wú)序列表，很常見(jiàn)的到了大家廣泛的使用，<ol>有序列表也挺常用。在web標(biāo)準(zhǔn)化過(guò)程中，<ul>還被更多的用于導(dǎo)航條，本來(lái)導(dǎo)航條就是個(gè)列表，這樣做是完全正確的，而且當(dāng)你的瀏覽器不支持CSS的時(shí)候，導(dǎo)航鏈接仍然很好使，就是美觀方面差了一點(diǎn)。
例如:
CODE:
<ul>
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>
CODE:
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<dl>、<dt>、<dd>
dl就是“定義列表”。比如說(shuō)詞典里面的詞的解釋、定義就可以用這種列表。
例如：
CODE:
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
CODE:
<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>
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 語(yǔ)義化你的HTML標(biāo)簽和屬性 [1] 下一頁(yè) 語(yǔ)義化你的HTML標(biāo)簽和屬性 [3]
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁(yè)制作版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) 語(yǔ)義化你的HTML標(biāo)簽和屬性 [2]
