一.有序列表 (ordered list)

• 格式：

<ol>
 <li>有序列表</li>
 <li>有序列表</li>
 <li>有序列表</li>
</ol>

• 語義及運用：
  給一堆數據添加列表語義，數據有先后之分。常運用于歌單，排行榜等需要列出先后順序的列表。
• 注意點：
  1.<ol> <li>標簽是一個組合，一般情況下一起使用。
  2.<ol>標簽中一般只有<li>標簽，不可能有其它標簽。
  3.若在開發中列表包含的信息很多需要添加其它語義，則可在<li>標簽中嵌套其它標簽。

二.無序列表 (unordered list)

• 格式：

<ul>
<li>無序列表</li> 
<li>無序列表</li> 
<li>無序列表</li>
</ul>

• 語義及運用：
  給一堆數據添加列表語義，數據無先后之分。此種列表運用的最多。常運用于新聞條，商品列表等無需列出先后順序的列表。
• 注意點：
  1.<ul> <li>標簽是一個組合，一般情況下一起使用。
  2.<ul>標簽中一般只有<li>標簽，不可能有其它標簽。
  3.若在開發中列表包含的信息很多需要添加其它語義，則可在<li>標簽中嵌套其它標簽。

三.定義列表 (definition list)

• 格式：

<dl> 
<dt>列表頭</dt> 
<dd>列表類容</dd> 
<dt>列表頭</dt> 
<dd>列表內容</dd>
</dl>

• 語義及運用：
  定義列表用dt定義標題，dd定義標題的描述。常運用于網站尾部相關信息，圖文混排等。
• 注意點：
  1.<dl> <dt> <dd>標簽是一個組合，一般情況下一起使用。
  2.<dt>標簽中一般只對應一個<dd>標簽，雖然它可以對應多個<dd>標簽。
  3.若在開發中列表包含的信息很多需要添加其它語義，則可在 <dt> <dd>標簽中嵌套其它標簽。

四.列表的嵌套

• 列表內嵌套其它標簽
  有時列表內包含的信息需要添加其它標簽
  格式：

  <ul>
        <li>
            <h2>這是一個標題</h2>
            <p>這是一個段落</p>
        </li>
        <li>
            <h2>這是一個標題</h2>
            <p>這是一個段落</p>
        </li>
    </ul>

• 列表內部嵌套列表
  列表內部可以嵌套子列表
  格式：

  <ul>
        <li>
            <ul>
                <li>這是子列表1</li>
                <li>這是子列表1</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>這是子列表2</li>
                <li>這是子列表2</li>
            </ul>
        </li>
    </ul>

• 各種類型列表相互嵌套
  各種列表可以按需求搭配嵌套
  格式：

  <ul>
        <li>無序列表</li>
        <li>
            <ol>
                <li>有序列表</li>
                <li>
                    <dl>
                        <dt>定義列表頭</dt>
                        <dd>定義列表內容</dd>
                        <dd>定義列表內容</dd>
                    </dl>
                </li>
            </ol>
        </li>
    </ul>

• 注意點：
  1.一般無序列表使用的最多，有序列表使用的最少。
  2.若要去除列表前面的小圓點或數字可以使用CSS樣式去除。
  格式：

<style> ol, ul { list-style: none; }</style>

五.< table>表格標簽及其屬性

• 格式：

  <table border="1px">
    <tr>
        <th>這是單元格1-1</td>
            <th>這是單元格1-2</td>
    </tr>
    <tr>
        <td>這是單元格2-1</td>
        <td>這是單元格2-2</td>
    </tr>
    <tr>
        <td>這是單元格3-1</td>
        <td>這是單元格3-2</td>
    </tr>
    </table>

• 作用：
  用來給一堆表格標簽添加語義。表格是數據展現的一種形式，當數據非常大的時候，使用表格額可以清晰的展現。
• < table>表格標簽常用屬性：

• 注意點：
  1.< table> <tr> <td>是一個組合，<tr> 元素定義表格行， <th>元素定義表頭，<td>元素定義表格單元。簡單的 HTML 表格由< table> 元素以及一個或多個 <tr> 、<th>或 <td>元素組成。更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
  2.表格中的border屬性決定邊框的寬度，平常默認寬度為0，也就是看不見表格。
  3.width/height屬性決定表格的寬度和高度。平常默認寬高是根據內容的寬高來展現的。若只設置<td>的寬高則只改變當前單元格的寬高，表格整體寬高不受影響。
  4.在<tr> <td>中都設置了align屬性的話，系統優先采用<td>。
  5.表格中的內容一般默認為垂直居中的，所以只需設置水平居中便可，一般使用CSS樣式來進行此項操作，不推薦使用align屬性。CSS格式：text-align:centertext-align:center.
  6.若想合并全部單元格，清除單元格的外邊距。可使用樣式border-collapse: collapse;。

六.< table>表格的其他標簽

為表格設置標題：使用<capition>標簽
設置單元格標題：使用<th>標簽替換<td>標簽

• 格式：

<table border="1">
  <caption>表格標題</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

• 作用
  表格標題會自動跟隨表格，會在表格中的最上面水平居中，而不是在頁面中水平居中。
  單元格標題會自動在單元格中居中，并且文字會加粗。
• 注意點：
  <capition>標簽必須寫在< table>標簽里面，并且緊跟< table>標簽。

七.表格單元格的合并

• 水平方向的單元格合并
  方法：
  在需要合并的單元格中加入colspan屬性，要合并幾個單元格屬性的取值就為幾。
  格式：

<td colspan="3">

表示這個單元格在水平方向上相當于三個單元格。

• 垂直方向的單元格合并
  方法：
  在需要合并的單元格中加入rowspan屬性，要合并幾個單元格屬性的取值就為幾。
  格式：

<td rowspan="3">

表示這個單元格在垂直方向上相當于三個單元格。

• 注意點：
  1.單元格的合并只能是從左至右和由上到下。
  2.合并單元格之后要刪掉多出來的單元格。例如colspan``rowspan的取值為3的話，就相當于這個單元格在水平方向或垂直方向相當于3個單元格。那么我們就要刪除這個單元格的右邊2個單元格或者下邊兩個單元格。

*** 此文章著作權由饑人谷_劉沖和饑人谷(QQ 群: 222459918) 所有。轉載須說明來源。***