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