html:(14):给div命名和table标签
給div命名，使邏輯更加清晰
在上一小節(jié)中，我們把一些標(biāo)簽放進(jìn)<div>里，劃分出一個(gè)獨(dú)立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱，用id屬性來(lái)為<div>提供唯一的名稱，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的，也是必須唯一的。
如下兩圖進(jìn)行比較，如果設(shè)計(jì)師把兩個(gè)圖給你，哪個(gè)圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。
語(yǔ)法：
<div ?id="版塊名稱">…</div>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div標(biāo)簽</title> </head> <body> <div id="hotList"><h2>熱門課程排行榜</h2><ol><li>前端開(kāi)發(fā)面試心法 </li><li>零基礎(chǔ)學(xué)習(xí)html</li><li>javascript全攻略</li></ol> </div id="learn inglnstructed"> <div><h2>web前端開(kāi)發(fā)導(dǎo)學(xué)課程</h2><ul><li>網(wǎng)頁(yè)專業(yè)名詞大掃盲 </li><li>網(wǎng)站職位定位指南</li><li>為您解密Yahoo網(wǎng)站制作流程</li></ul> </div> </body> </html>運(yùn)行結(jié)果
table標(biāo)簽，認(rèn)識(shí)網(wǎng)頁(yè)上的表格
有時(shí)候我們需要在網(wǎng)頁(yè)上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁(yè)上展示公司的庫(kù)存清單。如下表：
想在網(wǎng)頁(yè)上展示上述表格效果可以使用以下代碼：
創(chuàng)建表格的四個(gè)元素：
table、tbody、tr、th、td
1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開(kāi)始、</table>標(biāo)記結(jié)束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示，不必等待表格結(jié)束后在顯示，同時(shí)如果表格很長(zhǎng)，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不在等整個(gè)表格加載完后顯示。）
?
3、<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。
4、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>，說(shuō)明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。
6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
上述代碼在瀏覽器中顯示的默認(rèn)的樣式為：
總結(jié)：
1、table表格在沒(méi)有添加css樣式之前，在瀏覽器中顯示是沒(méi)有表格線的
2、表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>認(rèn)識(shí)table表標(biāo)簽</title> </head> <body> <table><tbody><tr><th>班級(jí)</th><th>學(xué)生數(shù)</th><th>平均成績(jī)</th></tr><tr><td>一班</td><td>30</td><td>89</td></tr><tr><td>二班</td><td>35</td><td>85</td></tr> <tr><td>三班</td><td>32</td><td>80</td> </tr></tbody> </table> </body> </html>運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的html:(14):给div命名和table标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java学习（23）：if..else
- 下一篇： PowerDesigner的汉化破解安装