553
高質量的HTML
本係列源自《編寫高質量代碼-web前端開發修煉之道》
HTML，CSS，JavaScript三者中，HTML作為結構，CSS作為修飾，JavaScript作為控製。不管是在前端還是後台，結構都是非常重要的，使用HTML時必須要考慮語義化。
1.如何確定你的標簽是否語義化？
瀏覽器會給標簽給定默認樣式，所以就算不用CSS修飾也能體現一些簡單的樣式。因此判斷一個網頁標簽是否語義化的簡單方法是：去掉CSS，看網站結構是否組織良好有序，是否仍然有良好的可讀性。
你可以手動注釋CSS代碼，也可以使用web調試工具，比如firefox的Web Developer插件，可以禁用CSS。
2.如何選用正確的標簽？
下麵舉了一些常見的例子：
2.1標題和內容
要 實現上麵這個樣式，可以使用方案一：
<div > <h2>標簽的語義<a href="#">更多>></a></h2> <p>段落一的內容.....<strong>重要部分</strong>......</p> <p>段落二的內容.....<strong>重要部分</strong>......</p> <p>段落三的內容很長長長長長長長長長長長長長長長長長長長長.</p> </div>
<style type="text/css">
.container{
width: 400px;
margin: 0 auto;
background-color: #ff0;
}
h2{
position: relative;
border-bottom: 1px dashed #333;
}
h2 a{
position: absolute;
right: 0;
top: 0;
}
p{
text-indent: 2em;
line-height: 150%;
margin: 0 0 1em 0;
}
strong{
color:red;
font-weight: normal;
}
</style>
此方案將錨點放在了h2中，但很明顯錨點”更多“不屬於標題，所以這個是不合語義的。下麵是方案二：
<div > <div > <h2>標簽的語義</h2> <a href="#">更多>></a> </div> <p>段落一的內容.....<strong>重要部分</strong>......</p> <p>段落二的內容.....<strong>重要部分</strong>......</p> <p>段落三的內容很長長長長長長長長長長長長長長長長長長長長.</p> </div>CSS代碼就不貼了，將錨點從標題中提出來，同時在二者外再加一個div塊，表示他們形式上應該屬於一個整體。方案二結構看起來要清晰的多。
2.2表單
一般來說，表單域要用fieldset標簽包起來，並用legend標簽說明表單的用途。fieldset默認有邊框，可以按需要更改樣式，也可以隱藏legend標簽，以此來兼顧語義和顯示。
每個input標簽對應一個label，通過for聯係起來，下麵是示例：
<form action="" method="" >
<fieldset>
<legend>登錄表單</legend>
<p>
<label for="name">賬號：</label>
<input type="text" />
</p>
<p>
<label for="pw">密碼：</label>
<input type="text" />
</p>
<input type="submit" value="登錄" >
</fieldset>
</form>
2.3表格
表頭和一般單元格要分開，表頭用th，單元格用td。
<table> <caption>表格標題</caption> <thead> <tr> <th>實現方式</th> <th>代碼量</th> <th>搜索引擎友好</th> <th>特殊終端兼容</th> </tr> </thead> <tbody> <tr> <th>table 布局</th> <td>多</td> <td>差</td> <td>一般</td> </tr> <tr> <th>亂用標簽</th> <td>多</td> <td>差</td> <td>一般</td> </tr> </tbody> </table>
2.4語義化標簽應該注意的問題
1.盡量少用div和span，用更加語義化的標簽來代替它們；
2.語義不明顯，既可以用p又可以用div的情況下，盡量用p。因為p默認有上下間距，去除樣式後可讀性更好 ，對兼容特殊終端有利；
3.不要使用純樣式標簽，例如b，font，u等，改用CSS設置。語義上需要強調的用strong和em，二者有強調之意。
最後更新：2017-04-03 05:39:40