網(wǎng)頁的結(jié)構(gòu)樣式和行為要分離開來
CSS布局也就是俗稱的 Div + CSS 布局，或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 來控制網(wǎng)頁中元素的樣式，包括位置、大小、顏色等；
1.事實上，CSS布局只是Web標(biāo)準的一部分，在HTML、CSS、Javascript這三大元素中，HTML才是最重要的，結(jié)構(gòu)才是重點，樣式是用來修飾結(jié)構(gòu)的。正確的做法是，先確定HTML，確定語義的標(biāo)簽，再來選用合適的CSS。
2.默認情況下，瀏覽器會根據(jù)標(biāo)簽的語義給定一個默認的樣式，CSS則是用來控制樣式和重置樣式的。判斷網(wǎng)頁標(biāo)簽語義是否良好的一個簡單方法就是：去掉樣式，看網(wǎng)頁結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性。
3.h標(biāo)簽的含義是“標(biāo)題”，搜索引擎對這個標(biāo)簽比較敏感，尤其是h1和h2。一個語義良好的頁面，h標(biāo)簽應(yīng)該是完整有序沒有斷層的。也就是說，要按照h1,h2,h3,h4這樣一次排序下來，不要出現(xiàn)類似h1,h3,h4，漏掉h2的情況。
4.當(dāng)頁面內(nèi)標(biāo)簽無法滿足設(shè)計需要時，才會適當(dāng)添加div和span等無語義標(biāo)簽來輔助實現(xiàn)。
5.一般來說，表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途。因為fieldset默認有邊框，而legend也有默認的樣式，為滿足設(shè)計需要，我們可以將fieldset的“border”設(shè)為“none”，把legend的“display”設(shè)為“none”，以此來兼顧語義和設(shè)計兩方面的要求。每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在label標(biāo)簽中設(shè)置“for=someld”來讓說明文本和對應(yīng)的input關(guān)聯(lián)起來。實例：
<form action="" method="post">
<fieldset>
<legend>登錄表單</legend>
<p><label for="username">用戶名：</label><input type="text" value="" id="username" name="username" /></p>
<p><label for="userpwd">密碼：</label><input type="password" value="" id="userpwd" name="userpwd" /></p>
<input type="submit" value="提交" />
</fieldset>
</form>
6.table布局在二維數(shù)據(jù)顯示有它的語義和用途，是最好的選擇。在用table布局時，常常只使用table、tr、td標(biāo)簽合肥網(wǎng)站建設(shè)公司。事實上，table常用的標(biāo)簽還包括caption、thead、tbody、tfoot和th。我們在使用表格的時候，應(yīng)該注意選用合適的標(biāo)簽，表格標(biāo)題要用caption,表頭要用thead包圍，主體部分用tbody包圍，尾部要用tfoot包圍，表頭和一般單元格分開，表頭用th，一般單元格用td。實例：
<table border="1">
<colgroup>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
</colgroup>
<caption>幾個頁面實現(xiàn)的比較</caption>
<thead>
<tr><th>實現(xiàn)方式</th><th>代碼量</th><th>搜索引擎友好</th><th>特殊終端兼容</th></tr>
</thead>
<tbody>
<tr><td>table布局</td><td>多</td><td>差</td><td>一般</td></tr>
<tr><td>亂用標(biāo)簽的布局</td>少<td></td>差<td></td><td>一般</td></tr>
<tr><td>亂用標(biāo)簽的布局</td><td>少</td><td>好</td><td>好</td></tr>
</tbody>
</table>
實現(xiàn)表格邊框細線：css:
table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
7.語義化標(biāo)簽應(yīng)注意的一些問題
為了保證網(wǎng)頁去樣式后的可讀性，并且有符合Web標(biāo)準，我們應(yīng)注意以下幾點：
①盡可能少地使用無語義標(biāo)簽div和span；
②在語義不明顯，既可以用p也可以用div的地方，盡量用p，因為p默認情況下有上下間距，去樣式后的可讀性更好，對兼容特殊終端有利；
③不要使用純樣式標(biāo)簽，例如b、font和u等，改用css設(shè)置。語義上需要強調(diào)的文本可以包在strong或em標(biāo)簽里，strong和em有“強調(diào)”的語意，其中strong的默認樣式是加粗，而em的默認樣式是斜體。