|
語義化你的HTML標(biāo)簽和屬性
分離結(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)識(shí)標(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>是最高的等級。
例如:
CODE:
<h1>文檔標(biāo)題</h1>
<h2>次級標(biāo)題</h2>
而不要使用
<div class="title">文檔標(biāo)題</div>，或者<span class="title">文檔標(biāo)題</span>.很明顯搜索引擎對于后者是不會(huì)認(rèn)為他是標(biāo)題的。
<p>
段落標(biāo)記，知道了<p>作為段落，你就不會(huì)再使用<br/>來換行了，而且不需要<br/><br/>來區(qū)分段落與段落。<p></p>中的文字會(huì)自動(dòng)換行，而且換行的效果優(yōu)于<br>。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區(qū)分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。
例如：
CODE:
<p以建設(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ǎng)友進(jìn)行幫助，而且還舉辦過不少設(shè)計(jì)比賽并開發(fā)了很多目前仍被許多網(wǎng)站應(yīng)用的相關(guān)程序。而所發(fā)布的作品與點(diǎn)評受到了多家媒體關(guān)注及行家的好評，同時(shí)也從中確立了自己的社會(huì)地位，于是一批又一批的網(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)站之一。<
<ul>、<ol>、<li>
<ul>無序列表，很常見的到了大家廣泛的使用，<ol>有序列表也挺常用。在web標(biāo)準(zhǔn)化過程中，<ul>還被更多的用于導(dǎo)航條，本來導(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>
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 語義化你的HTML標(biāo)簽和屬性 [2]
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
第 1 頁 語義化你的HTML標(biāo)簽和屬性 [1]
第 2 頁 
