【HTML筆記三】認識標籤二

一、使用ul，添加新聞信息列表
這些列表可以使用ul-li標籤來完成，是無序的列表。
語法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

ul-li在網頁中顯示的默認樣式一般爲：每項li前都自帶一個圓點，且換行加縮進。

二、使用ol，添加圖書銷售排行榜
在網頁中展示有前後順序的信息列表。
語法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

<ol>在網頁中顯示的默認樣式一般爲：每項<li>前都自帶一個序號，序號默認從1開始，換行縮進。

三、認識div在排版中的作用
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。
語法：

<div>…</div>

確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。
四、給div命名，使邏輯更加清晰
爲了使邏輯更加清晰，我們可以爲這一個獨立的邏輯部分設置一個名稱，用id屬性來爲<div>提供唯一的名稱。
語法：

<div  id="版塊名稱">…</div>

五、table標籤，認識網頁上的表格
有時候我們需要在網頁上展示一些數據，就需要表格。
創建表格的四個元素：

table、tbody、tr、th、td

1. <table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2. <tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上標籤後，這個表格就要等表格內容全部下載完纔會顯示。
3. <tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4. <td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
5. <th>…</th>：表格的頭部的一個單元格，表格表頭。
6. 表格中列的個數，取決於一行中數據單元格的個數。

總結：

1. table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的。
2. 表頭，也就是th標籤中的文本默認爲粗體並且居中顯示。

六、用css樣式，爲表格加入邊框
用 css 樣式代碼爲th，td單元格添加粗細爲一個像素的黑色邊框。

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

七、caption標籤，爲表格添加標題和摘要

摘要：摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

語法：

<table summary="表格簡介文本">

標題：用以描述表格內容，標題的顯示位置：表格上方。

語法：

<table>
    <caption>標題文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>