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