主頁(yè) > 知識(shí)庫(kù) > 用標(biāo)準(zhǔn)dl,dt,dd標(biāo)簽拋棄table列表

用標(biāo)準(zhǔn)dl,dt,dd標(biāo)簽拋棄table列表

熱門標(biāo)簽:吃雞地圖標(biāo)注設(shè)置 縣域地圖標(biāo)注點(diǎn) 齊齊哈爾地圖標(biāo)注地點(diǎn) 400電話申請(qǐng)好不好 邵陽(yáng)市地圖標(biāo)注app 天津銷售電銷機(jī)器人公司 電銷機(jī)器人外呼失敗怎么回事 400電話座機(jī)怎么辦理 南寧銷售外呼系統(tǒng)線路商
現(xiàn)在,越來(lái)越多的前端開發(fā)er們開始使用xHTML+CSS替代最初的table布局完成網(wǎng)頁(yè)的整體布局,不但讓網(wǎng)站降低了開發(fā)和維護(hù)的成本,而且代碼也更語(yǔ)義化了。但是,并不是說(shuō)table從此消失了,它仍然被很多人用來(lái)作為網(wǎng)頁(yè)中數(shù)據(jù)表現(xiàn)的必需品,比如個(gè)人信息數(shù)據(jù)列表等。事實(shí)上,使用HTML的dl、dt、dd標(biāo)簽會(huì)讓你節(jié)省更多的代碼,更能讓代碼符合內(nèi)容的語(yǔ)義化。當(dāng)然,table也有它的用武之地,那就是很大數(shù)據(jù)量的數(shù)據(jù)表,但是小型的數(shù)據(jù)列表和表單完全可以不使用table哦!
如果你仍然在使用傳統(tǒng)table來(lái)創(chuàng)建數(shù)據(jù)列表,那么請(qǐng)繼續(xù)往下看,看看使用HTML的dl、dt、dd標(biāo)簽是如何讓你的工作更輕松…
table數(shù)據(jù)列表
傳統(tǒng)table的數(shù)據(jù)列表代碼如下所示。我們要為每行添加tr標(biāo)簽,然后還要在其中為標(biāo)題和數(shù)據(jù)各加一個(gè)td標(biāo)簽,由于標(biāo)簽都是td,想要添加樣式的話還要為每個(gè)td添加class屬性。

復(fù)制代碼
代碼如下:

<table>
<tbody>
<tr>
<td class="title">Name:</td>
<td class="text">Squall Li</td>
</tr>
<tr>
<td class="title">Age:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">Gender:</td>
<td class="text">Male</td>
</tr>
<tr>
<td class="title">Day of Birth:</td>
<td class="text">26th May 1986</td>
</tr>
</tbody>
</table>

以下是相應(yīng)的CSS代碼,我們?yōu)橹霸贖TML中聲明的class添加樣式。

復(fù)制代碼
代碼如下:

/*TABLE LIST DATA*/
table {
margin-bottom:50px;
}
table tr .title {
background:#5f9be3;
color:#fff;
font-weight:bold;
padding:5px;
width:100px;
}
table tr .text {
padding-left:10px;
}

從以上代碼可以看出,使用table標(biāo)簽,如果想使用CSS來(lái)對(duì)內(nèi)容進(jìn)行修飾或修改的話,需要為td單元格添加一些相應(yīng)的class屬性。這樣無(wú)形中增加了自己的工作量,代碼會(huì)稍微變多了一些。代碼變多意味著什么?意味著網(wǎng)站的流量在浪費(fèi)、增加更多的產(chǎn)生Bug的幾率以及后期維護(hù)更困難。
dl、dt、dd數(shù)據(jù)列表
現(xiàn)在讓我們來(lái)看看使用了HTML dl、dt、dd標(biāo)簽的數(shù)據(jù)列表。首先我們使用dl(definition list-自定義列表)標(biāo)簽來(lái)容納整個(gè)數(shù)據(jù)結(jié)構(gòu),然后我們使用dt(自定義標(biāo)題)標(biāo)簽和dd(自定義描述)標(biāo)簽來(lái)容納數(shù)據(jù)中的標(biāo)題和內(nèi)容。

復(fù)制代碼
代碼如下:

<dl>
<dt>Name: </dt>
<dd>Squall Li</dd>
<dt>Age: </dt>
<dd>23</dd>
<dt>Gender: </dt>
<dd>Male</dd>
<dt>Day of Birth:</dt>
<dd>26th May 1986</dd>
</dl>

而在css代碼中,我們僅需讓dt和dd向左浮動(dòng)即可。

復(fù)制代碼
代碼如下:

/*DL, DT, DD TAGS LIST DATA*/
dl {
margin-bottom:50px;
}
dl dt {
background:#5f9be3;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
}

從dl、dt、dd的實(shí)例中你應(yīng)該能明顯的看出它們的代碼更簡(jiǎn)潔更平滑更符合語(yǔ)義化了吧。
看到這里,如果你還在堅(jiān)持使用table標(biāo)簽來(lái)完成web表單或其它網(wǎng)頁(yè)布局的話,現(xiàn)在是時(shí)候改變一下你的代碼了。讓你的工作更輕松些吧!

標(biāo)簽:日照 寧夏 衡水 延安 贛州 寧波 濟(jì)寧 巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《用標(biāo)準(zhǔn)dl,dt,dd標(biāo)簽拋棄table列表》,本文關(guān)鍵詞  用,標(biāo)準(zhǔn),標(biāo)簽,拋棄,table,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。

  • 相關(guān)文章
  • 下面列出與本文章《用標(biāo)準(zhǔn)dl,dt,dd標(biāo)簽拋棄table列表》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于用標(biāo)準(zhǔn)dl,dt,dd標(biāo)簽拋棄table列表的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章