一、認識標籤（第二部分）
1.1、使用 ul，添加新聞信息列表
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p標籤</title>
</head>
<body>
<ul>
<li>漩渦鳴人</li>
<li>宇智波佐助</li>
<li>我愛羅</li>
</ul>
</body>
</html>
運行結果：
1.2、使用 ul，添加新聞信息列表
如果想在網頁中展示有前後順序的信息列表，怎麼辦呢？如，噹噹網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用
<ol>標籤來製作有序列表來展示。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p標籤</title>
</head>
<body>
<ol>
<li>我的第一個列表</li>
<li>我的第二個列表</li>
</ol>
</body>
</html>
運行結果：
1.3、認識div在排版中的作用
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個
<div>標籤中，這個<div>標籤的作用就相當於一個容器。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div標籤</title>
</head>
<body>
<h2>火影忍者</h2>
<div>
<ol>
<li>漩渦鳴人 </li>
<li>宇智波佐助</li>
<li>我愛羅</li>
</ol>
</div>
<h2>NBA</h2>
<ol>
<li>科比 </li>
<li>杜蘭特</li>
<li>庫裏</li>
</ol>
</body>
</html>
運行結果：
1.4、給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="Naruto">
<h2>火影忍者</h2>
<ol>
<li>漩渦鳴人 </li>
<li>宇智波佐助</li>
<li>我愛羅</li>
</ol>
</div>
<div id = Nba>
<h2>NBA</h2>
<ul>
<li>科比 </li>
<li>杜蘭特</li>
<li>庫裏</li>
</ul>
</div>
</body>
</html>
運行結果：
1.5、table 標籤，認識網頁上的表格
創建表格的四個元素：table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：如果不加 , table表格加載完後才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，不必等待表格結束後在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格加載完後顯示。）
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中數據單元格的個數。
代碼示例：
<!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>
運行結果：
總結：
1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
2、表頭，也就是th標籤中的文本默認爲粗體並且居中顯示
1.6、用 css 樣式，爲表格加入邊框
Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便於我們後期合併單元格知識點的講解，所以在這一節中我們爲表格添加一些樣式，爲它添加邊框。添加如下代碼：
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
上述代碼是用 css 樣式代碼（後面章節會詳細講解），爲 th，td 單元格添加粗細爲一個像素的黑色邊框。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爲表格添加邊框</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="">
<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>
</table>
</body>
</html>
運行結果：
1.7、caption 標籤，爲表格添加標題和摘要
表格還是需要添加一些標籤進行優化，可以添加標題和摘要。摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>認識table表標籤</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary = "本表格記錄2012年到2013年庫存記錄">
<caption>標題</caption>
<tr>
<th>產品名稱 </th>
<th>品牌 </th>
<th>庫存量（個） </th>
<th>入庫時間 </th>
</tr>
<tr>
<td>耳機 </td>
<td>聯想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盤 </td>
<td>金士頓 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盤 </td>
<td>愛國者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>
運行結果：
此篇博客代碼下載地址：HTML教程3代碼下載
博主的所有博客目錄如下：博客文章目錄彙總
Java面試部分的博客目錄如下：Java筆試面試目錄
轉載請標明出處，原文地址：https://blog.csdn.net/weixin_41835916 如果覺得本文對您有幫助，請點擊頂支持一下，您的支持是我寫作最大的動力，謝謝。
