網頁的(de)結構樣式和(hé / huò)行爲(wéi / wèi)要(yào / yāo)分離開來(lái)
CSS布局也(yě)就(jiù)是(shì)俗稱的(de) Div + CSS 布局，或者是(shì) (X)HTML + CSS 布局。其核心思想就(jiù)是(shì)用 CSS 來(lái)控制網頁中元素的(de)樣式，包括位置、大(dà)小、顔色等；
1.事實上(shàng)，CSS布局隻是(shì)Web标準的(de)一(yī / yì ／yí)部分，在(zài)HTML、CSS、Javascript這(zhè)三大(dà)元素中，HTML才是(shì)最重要(yào / yāo)的(de)，結構才是(shì)重點，樣式是(shì)用來(lái)修飾結構的(de)。正确的(de)做法是(shì)，先确定HTML，确定語義的(de)标簽，再來(lái)選用合适的(de)CSS。
2.默認情況下，浏覽器會根據标簽的(de)語義給定一(yī / yì ／yí)個(gè)默認的(de)樣式，CSS則是(shì)用來(lái)控制樣式和(hé / huò)重置樣式的(de)。判斷網頁标簽語義是(shì)否良好的(de)一(yī / yì ／yí)個(gè)簡單方法就(jiù)是(shì)：去掉樣式，看網頁結構是(shì)否組織良好有序，是(shì)否仍然有很好的(de)可讀性。
3.h标簽的(de)含義是(shì)“标題”，搜索引擎對這(zhè)個(gè)标簽比較敏感，尤其是(shì)h1和(hé / huò)h2。一(yī / yì ／yí)個(gè)語義良好的(de)頁面，h标簽應該是(shì)完整有序沒有斷層的(de)。也(yě)就(jiù)是(shì)說(shuō)，要(yào / yāo)按照h1,h2,h3,h4這(zhè)樣一(yī / yì ／yí)次排序下來(lái)，不(bù)要(yào / yāo)出(chū)現類似h1,h3,h4，漏掉h2的(de)情況。
4.當頁面内标簽無法滿足設計需要(yào / yāo)時(shí)，才會适當添加div和(hé / huò)span等無語義标簽來(lái)輔助實現。
5.一(yī / yì ／yí)般來(lái)說(shuō)，表單域要(yào / yāo)用fieldset标簽包起來(lái)，并用legend标簽說(shuō)明表單的(de)用途。因爲(wéi / wèi)fieldset默認有邊框，而(ér)legend也(yě)有默認的(de)樣式，爲(wéi / wèi)滿足設計需要(yào / yāo)，我們可以(yǐ)将fieldset的(de)“border”設爲(wéi / wèi)“none”，把legend的(de)“display”設爲(wéi / wèi)“none”，以(yǐ)此來(lái)兼顧語義和(hé / huò)設計兩方面的(de)要(yào / yāo)求。每個(gè)input标簽對應的(de)說(shuō)明文本都需要(yào / yāo)使用label标簽，并且通過爲(wéi / wèi)input設置id屬性，在(zài)label标簽中設置“for=someld”來(lái)讓說(shuō)明文本和(hé / huò)對應的(de)input關聯起來(lái)。實例：
<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布局在(zài)二維數據顯示有它的(de)語義和(hé / huò)用途，是(shì)最好的(de)選擇。在(zài)用table布局時(shí)，常常隻使用table、tr、td标簽合肥網站建設公司。事實上(shàng)，table常用的(de)标簽還包括caption、thead、tbody、tfoot和(hé / huò)th。我們在(zài)使用表格的(de)時(shí)候，應該注意選用合适的(de)标簽，表格标題要(yào / yāo)用caption,表頭要(yào / yāo)用thead包圍，主體部分用tbody包圍，尾部要(yào / yāo)用tfoot包圍，表頭和(hé / huò)一(yī / yì ／yí)般單元格分開，表頭用th，一(yī / yì ／yí)般單元格用td。實例：
<table border="1">
<colgroup>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
</colgroup>
<caption>幾個(gè)頁面實現的(de)比較</caption>
<thead>
<tr><th>實現方式</th><th>代碼量</th><th>搜索引擎友好</th><th>特殊終端兼容</th></tr>
</thead>
<tbody>
<tr><td>table布局</td><td>多</td><td>差</td><td>一(yī / yì ／yí)般</td></tr>
<tr><td>亂用标簽的(de)布局</td>少<td></td>差<td></td><td>一(yī / yì ／yí)般</td></tr>
<tr><td>亂用标簽的(de)布局</td><td>少</td><td>好</td><td>好</td></tr>
</tbody>
</table>
實現表格邊框細線：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.語義化标簽應注意的(de)一(yī / yì ／yí)些問題
爲(wéi / wèi)了(le／liǎo)保證網頁去樣式後的(de)可讀性，并且有符合Web标準，我們應注意以(yǐ)下幾點：
①盡可能少地(dì / de)使用無語義标簽div和(hé / huò)span；
②在(zài)語義不(bù)明顯，既可以(yǐ)用p也(yě)可以(yǐ)用div的(de)地(dì / de)方，盡量用p，因爲(wéi / wèi)p默認情況下有上(shàng)下間距，去樣式後的(de)可讀性更好，對兼容特殊終端有利；
③不(bù)要(yào / yāo)使用純樣式标簽，例如b、font和(hé / huò)u等，改用css設置。語義上(shàng)需要(yào / yāo)強調的(de)文本可以(yǐ)包在(zài)strong或em标簽裏，strong和(hé / huò)em有“強調”的(de)語意，其中strong的(de)默認樣式是(shì)加粗，而(ér)em的(de)默認樣式是(shì)斜體。