3-1 使用ul, 添加新聞信息列表
在瀏覽網頁時, 你會發現網頁上有很多的列表。新聞列表，圖片列表等等。
這些列表就可以使用ul-li標籤來完成。ui-li是沒有前後順序 的信息列表。
語法：
<ul>
<li>信息</li>
<li>信息</li>
......
</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>
ul-li在網頁中顯示的默認樣式一般爲：每項li前都自帶一個圓點，如下圖所示：- 我的第一行
- 我的第二行
- 我的第三行
3-2 使用ol, 添加圖書銷售排行榜
如果想在網頁中展示 有前後順序 的信息列表, 怎麼辦呢?
語法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p標籤</title>
</head>
<body>
<ol>
<li>iOS</li>
<li>Objective-C</li>
</ol>
</body>
</html><ol>在網頁中顯示的默認樣式一般爲：每項<li>前都自帶一個序號，序號默認從1開始，
- iOS
- Objective-C
3-3 認識div在排版中的作用
在網頁製作過程中, 可以把一些獨立的邏輯部分劃分出來，放在一個 <div> 標籤中, 這個 <div> 標題的作用就相當於一個容器。
語法：
<div>...</div>
確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如下圖
3-4 給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>
<div id = "learningInstructed">
<h2>web前端開發導學課程</h2>
<ul>
<li>網頁專業名詞大掃盲 </li>
<li>網站職位定位指南</li>
<li>爲您解密Yahoo網站製作流程</li>
</ul>
</div>
</body>
</html>3-5 table標籤，認識網頁上的表格
有時候我們需要在網頁上展示一些數據, 如某公司向在網頁上展示公司的庫存清單；如下表
| 產品名稱 | 品牌 | 庫存(個) | 入庫時間 |
| 耳機 | 聯想 | 500 | 2013-1-2 |
| U盤 | 金士頓 | 120 | 2013-8-10 |
| U盤 | 愛國者 | 133 | 2013-3-25 |
table, tbody, tr, th,td
- <table>..</table>；整個表格以 <table> 標記開始, </table>標記結束。
- <tbody>..</tbody>；當表格內容非常多時，表格就回下載一點顯示一點，但是如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完纔會顯示。,
- <tr>..</tr>表格的一行，所以有幾對tr 表格就就行。
- <td>..</td>表格的一個單元格，一行中包含幾對<td>..</td>,說明一行中就有幾列。
- <th>..</th>表格的頭部的一個單元格，表格表頭
- 表格中列的個數，取決於一行中數據單元格的個數。
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre標籤的使用</title>
</head>
<body>
<table id = "ios第一個表格">
<tr>
<th>產品名稱</th>
<th>品牌</th>
<th>庫存量(個)</th>
<th>入庫時間</th>
</tr>
<tr>
<td>耳機</td>
<td>聯想</td>
<td>500</td>
<td>2013-1-8</td>
</tr>
<tr>
<td>產品名稱</td>
<td>品牌</td>
<td>庫存量(個)</td>
<td>入庫時間</td>
</tr>
<tr>
<td>產品名稱</td>
<td>品牌</td>
<td>庫存量(個)</td>
<td>入庫時間</td>
</tr>
</table>
</body>
</html>2>表頭，也就是th標籤中的文本默認爲粗體並且居中顯示
3-6 用css樣式, 爲表格加入邊框
<!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><style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代碼是用 css 樣式代碼, 爲
th，td
單元格添加粗細爲一個像素的黑色邊框。
3-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 = "sss">
<caption>本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量</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>摘要：
摘要內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化), 使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法：<table
summary="表格簡介文本">
用以描述表格內容，標題的顯示位置; 表格上方。
語法：
<table>
<caption>標題文本</caption>
<tr>
<td>…</td> <td>…</td> … </tr>…</table>
