目的：搜索引擎看不到社覺效果，只能看到代碼，通過標(biāo)簽判斷內(nèi)容的語(yǔ)義。通過語(yǔ)義化能讓搜索引擎更好識(shí)別網(wǎng)頁(yè)內(nèi)容。

制作頁(yè)面步驟：先確定HTML，確定語(yǔ)義的標(biāo)簽，再來選用合適的CSS。

如何確定網(wǎng)頁(yè)語(yǔ)義是否良好？
去掉樣式，看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性。

?

語(yǔ)義化幾個(gè)關(guān)鍵點(diǎn)：
1.每張網(wǎng)頁(yè)都必須有一個(gè)h1來表示大標(biāo)題，且一張網(wǎng)頁(yè)里面只存在一個(gè)h1標(biāo)記。
2.標(biāo)題與內(nèi)容
注：只有當(dāng)頁(yè)面內(nèi)標(biāo)簽無(wú)法滿足設(shè)計(jì)需要時(shí)，才會(huì)適當(dāng)添加div和span等無(wú)語(yǔ)義標(biāo)簽來輔助實(shí)現(xiàn)。
(1).單標(biāo)題內(nèi)容

<div id="gy" class="mod">
<div class="hd clearfix">
<h2 class="mod-title">網(wǎng)易公司新聞</h2>
</div>
<div class="bd">
<ul class="mod-list sub-list dotline">
<li class="title"><a href="http://tech.163.com/11/1103/11/7HUD3AVS000915BF.html">網(wǎng)易企業(yè)郵獲最高級(jí)安全認(rèn)證</a></li>
…
</ul>
<ul class="mod-list sub-list">
<li><a href="http://media.163.com/">[傳媒]</a> <a target="_blank" href="http://media.163.com/11/1104/10/7I0PG0JM00762H91.html">電視節(jié)目生存的底線</a></li>…
</ul>
</div>
</div>

(2).多標(biāo)題內(nèi)容

?

<h2 class="tab-hd tab-u-9 clearfix">
<span class="tab-u current"><a href="http://book.163.com/special/vip_book/">原創(chuàng)</a></span>
<span class="tab-u"><a href="http://book.163.com/special/vip_book/">全本</a></span>
</h2>
<div class="bd tab-bd display-control">
<div class="tab-con current">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200260003/000BNZFL.html?wangshou1"><img src="http://img3.cache.netease.com/book/2011/11/5/20111105085539de923.jpg" alt="天書：神秘家族的字符" title="天書：神秘家族的字符" height="90" width="120" /><cite>天書：神秘家族的字符</cite></a>
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200260001/000BNYbZ.html?wangshou1">無(wú)法呼吸：精神病院里的殺手</a></h3>
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200260002/000BNZAV.html?wangshou1">[懸疑]詭聞檔案：解密731部隊(duì)</a></li>…
</ul>
</div>
<ul class="mod-list main-list">
<li><a href="http://book.163.com/special/vip_book/?wangshou1">[網(wǎng)易原創(chuàng)]</a> <a target="_blank" href="http://data.book.163.com/book/home/009200260001/000BNYeO.html">冥間陰樂:民國(guó)農(nóng)家棺中女尸離奇蒸發(fā)</a></li>…
</ul>
<ul class="mod-list specialTopic-list">
<li><a href="http://book.163.com/special/minghun/?wangshou1"><em class='fB'>微活動(dòng)</em></a> | <a target="_blank" href="http://book.163.com/special/minghun/">周德東《冥婚》拍電影 你來選主角</a></li>…
</ul>
</div>
<div class="tab-con">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200010002/000BIUGA.html"><img src="http://img6.cache.netease.com/book/2011/11/5/201111050939467f195.jpg" alt="罌粟美人的致命誘惑" title="罌粟美人的致命誘惑" height="90" width="120" /><cite>罌粟美人的致命誘惑</cite></a>
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200010009/000BHVZQ.html">大禁地：兇殺案引出帝王陵寢</a></h3>
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200010013/000BEKaV.html">權(quán)色：副省長(zhǎng)對(duì)女色失去興趣</a></li>…
</ul>
</div>
<ul class="mod-list main-list">

<li><a href="http://t.163.com/zt/book/xyjd06"><em class='cBlack fB'>詭故事</em></a> |<a target="_blank" href="http://t.163.com/zt/book/xyjd06"> 懸疑基地第六期：鏡中靈魂的另一面</a></li>…
</ul>
</div>
</div>
</div>

?

結(jié)合網(wǎng)易的代碼，個(gè)人覺得像一般的標(biāo)題和內(nèi)容，理想結(jié)構(gòu)應(yīng)該是：
單標(biāo)簽
<div id=”news”>
<div class=”hd”><h2>標(biāo)題</h2> 更多>></div>
<div class=”bd”>內(nèi)容</div>
</div>
多標(biāo)簽
<div id=”news”>
<h2 class=”tab-hd”><span class="tab-u current">體育< span > < span class="tab-u " >娛樂</ span ></h2>
<div class=”hd tab-bd”>內(nèi)容</div>
</div>

3.表單
(1).表單域要用filedset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途。
(2).每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽并且通過為input設(shè)置id屬性，在label標(biāo)簽中設(shè)置for=”someid” 說明文本和相應(yīng)的input關(guān)聯(lián)起來
例：
<form action=”” method=””>
<fieldset>
<legend>登錄表單</legend>
<p><label for=”username”>用戶名</label><input type=”text” name=”username” id=”username/></p>
…
</filedset>
</form>
4.表格
作用：展示二維數(shù)據(jù)。
表格標(biāo)題要用caption,表頭要用thead包圍，主體部分用tbody包圍，尾部要用tfoot包圍，表頭和一般單無(wú)格要區(qū)分開，表頭用th,一般單元格用td
例：
<table>
<caption>二維數(shù)據(jù)展示</caption>
<thead>
<th>標(biāo)題</th> …
</thead>
<tbody>
<td>標(biāo)題對(duì)應(yīng)的內(nèi)容</td>
</tbody>
<tfoot>
<td>底部相關(guān)信息</td>
</tfoot>
</table>

語(yǔ)義化標(biāo)簽注意的其它問題：
盡可能少地使用無(wú)語(yǔ)義標(biāo)簽div和span
在語(yǔ)義不明顯的情況下，可用p和div，盡量用p，因?yàn)閜默認(rèn)情況 下有上下間距，去樣式后的可讀性更好，對(duì)兼特殊終端有利
不要使用純樣式標(biāo)簽，例如b\font\u改用CSS設(shè)置。語(yǔ)義上需要強(qiáng)調(diào)的文本可以包在strong或em標(biāo)簽里。
附: 標(biāo)簽語(yǔ)義中英文對(duì)照表

標(biāo)簽名	英文全拼	中文翻譯
a	anchor	錨
abbr	abbreviation	縮寫詞
acronym	acronym	取首字母的縮寫詞
address	address	地址
b	bold	粗體
big	big	變大
blockquote	block quotation	區(qū)塊引用于
br	break	換行
caption	caption	標(biāo)題
center	center	居中
dd	definition description	定義描述
del	delete	刪除
div	division	分隔
dl	definition list	定義列表
dt	definition term	定義術(shù)語(yǔ)
em	emphasized	加重
fieldset	fieldset	域集
font	font	字體
h1~h6	header1~header6	標(biāo)題1~標(biāo)題6
hr	horizontal rule	水平尺
i	italic	斜體
ins	inserted	插入
legend	legend	圖標(biāo)
li	list item	列表項(xiàng)目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	預(yù)定義格式
s	strikethrough	刪除線
small	small	變小
span	span	范圍
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上標(biāo)
u	underlined	下劃線
ul	unordered list	不排序列表
var	variable	變量

總結(jié)

以上是生活随笔為你收集整理的前台开发之HTML定义语义化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。