網頁的(de)結構樣式和(hé)行(xíng)為(wèi)要(yào)分(fēn)離(lí)開(kāi)來(lái₩)
CSS布局也(yě)就(jiù)是(shì)俗稱的(de) Div + CSS 布局，或者是(shì) (X)HTML + CSλS 布局。其核心思想就(jiù)是(shì)用(yòng) CSS 來(lái)控制(zhì)網頁中元素的(de)樣式，包✔括位置、大(dà)小(xiǎo)、顔色等；
1.事(shì)實上(shàng)，CSS布局隻是(shì)Web标準的(de)一(yī)部分(fēn)，在HTML、CSS、Java¶script這(zhè)三大(dà)元素中，HTML才是(shì)最重要(yào)的(de)，結構才是(shì)重點，樣式是(shì)用(yòng)來(l♥ái)修飾結構的(de)。正确的(de)做(zuò)法是(shì)，先确定HTML，确定語義的(de)标簽，再來(lái✔)選用(yòng)合适的(de)CSS。
2.默認情況下(xià)，浏覽器(qì)會(huì)根據标簽的(de)語義給定一(yī)個(gè)默認的(de™)樣式，CSS則是(shì)用(yòng)來(lái)控制(zhì)樣式和(hé)重置樣式的(de)。判斷網頁标簽語義是≈(shì)否良好(hǎo)的(de)一(yī)個(gè)簡單方法就(jiù)是(shì)：去(qù)掉樣式，看(kàn)網頁結構是(shì)否組≥織良好(hǎo)有(yǒu)序，是(shì)否仍然有(yǒu)很(hěn)好(hǎo)的(de)可(kě)讀(dú)性。
3.h标簽的(de)含義是(shì)“标題”，搜索引擎對(duì)這(zhè)個(gè)标簽比較敏感，尤其是(shì)h1和(hé)h2。一(yī•)個(gè)語義良好(hǎo)的(de)頁面，h标簽應該是(shì)完整有(yǒu)序沒有(yǒu)斷層的(de)。也(yě)就(jiù)是(shì)說(shuō)，要(yào)按照(zhào↓)h1,h2,h3,h4這(zhè)樣一(yī)次排序下(xià)來(lái)，不(bù)要(yào)出現(xiàn)類似h1,h3,h4，漏掉h2的(deγ)情況。
4.當頁面內(nèi)标簽無法滿足設計(jì)需要(yào)時(shí)，才會(huì)适當添加div和(hé)span等無語義标簽來(lái)輔助實α現(xiàn)。
5.一(yī)般來(lái)說(shuō)，表單域要(yào)用(yòng)fieldset标簽包起來(lái÷)，并用(yòng)legend标簽說(shuō)明(míng)表單的(de)用(yòng)途。因為(wèi)fieldset默認有(yǒu)邊框，而legend也(yě)±有(yǒu)默認的(de)樣式，為(wèi)滿足設計(jì)需要(yào)，我們可(kě)以将field₹set的(de)“border”設為(wèi)“none”，把legend的(de)“display”設為(✔wèi)“none”，以此來(lái)兼顧語義和(hé)設計(jì)兩方面的(de)要(yào)求。每個(g∑è)input标簽對(duì)應的(de)說(shuō)明(míng)文(wén)本都(dōu)需要¥(yào)使用(yòng)label标簽，并且通(tōng)過為(wèi)input設置id屬性，在labe¥l标簽中設置“for=someld”來(lái)讓說(shuō)明(míng)文(wén)本和(hé)對(duì)應的(de)input關聯起來(lái)。實例：
<form action="" method="post">
<fieldset>
<legend>登錄表單</legend>
<p><label for="username">用(yòng)戶'名：</label><input type="text" value="" id="usernamαe" name="username" /></p>
<p><label for="userpwd"δ>密碼：</label><input type="password" value="" id="userpwd" na£me="userpwd" /></p>
<input type="submit" value="提交" />
</fieldset>
</form>
6.table布局在二維數(shù)據顯示有(yǒu)它的(de)語義和(hé)用(yòng)途，是(shì)最好(hǎo)的(de)選擇。在用(yòng)table布局時(shí)×，常常隻使用(yòng)table、tr、td标簽合肥網站(zhàn)建設公司。事(shì)實上(shàng)，table常用(yòng)的(de)标簽還(hái)包括caption、thead、tbody、tfoot和(hé)th。我們在使用(yòn¶g)表格的(de)時(shí)候，應該注意選用(yòng)合适的(de)标簽，表格标題要(yào)用(yòng)caption,表頭要(yào)用(yòng)thead包圍，主體(tǐ)部分(fē"n)用(yòng)tbody包圍，尾部要(yào)用(yòng)tfoot包圍，表頭和(hé)一(yī)般單元格分(fēn)開(kāi)，表頭用(yòng)th，一(yī)§般單元格用(yòng)td。實例：
<table border="1">
<colgroup>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
</colgroup>
<caption>幾個(gè)頁面實現(xiàn)的(de)比較</caption>
<thead>
<tr><th>實現(xiàn)方式</t>h><th>代碼量</th><th>搜索引擎友(yǒu)好(hǎo)</th><th>特殊終端兼€容</th></tr>
</thead>
<tbody>
<tr><td>table布局</td><td>多(duō)&l→t;/td><td>差</td><td>一(yī)般<♠/td></tr>
<tr><td>亂用(yòng)标簽的(de)布局</td>少(shǎo)<td></>td>差<td></td><td>一(yī)般</td><★;/tr>
<tr><td>亂用(yòng)标簽的(de)布局</td&g t;<td>少(shǎo)</td><td>好(hǎo)</td><td>好(hǎo)</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.語義化(huà)标簽應注意的(de)一(yī)些(xiē)問(wèn)題
為(wèi)了(le)保證網頁去(qù)樣式後的(de)可(kě)讀(dú)性，并且有(yǒu)符合Web标準，我們應注意以下(xiàε)幾點：
①盡可(kě)能(néng)少(shǎo)地(dì)使用(yòng)無語義标簽div和(hé)span；
②在語義不(bù)明(míng)顯，既可(kě)以用(yòng)p也(yě)可(kě)以用(yòng)div的(de)地(dì)方，盡量用(yòng)p，因為(wèi)p默認情況下(xià )有(yǒu)上(shàng)下(xià)間(jiān)距，去(qù)樣式後的(de)可(kě)讀(dú)性更好(hǎo)，對(duì)兼容特殊終端有(yǒu)利；
③不(bù)要(yào)使用(yòng)純樣式标簽，例如(rú)b、font和(hé)u等，改用(yòng)css設置。語義上(shàng)需要(yào)強調的(de)文(wén)→本可(kě)以包在strong或em标簽裡(lǐ)，strong和(hé)em有(yǒu)“強調”的(de)語意，其中strong的(de)默認¶樣式是(shì)加粗，而em的(de)默認樣式是(shì)斜體(tǐ)。