一.有序列表 (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个单元格或者下边两个单元格。

作者：饥人谷_刘冲
链接：https://www.jianshu.com/p/392fb67e7d27