HTML学习总结02-列表标签以及表格标签

列表标签

列表是容器级标签，最大特点是清晰整洁，列表是为了给内容增加列表语义的

无序列表

无序列表的语法如下，

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

无序列表的各个列表项之前是没有先后顺序的，他们在语义上是并列关系，ul中只能是li,并且li只能存在ul中，但我们说li是容器级别的，li里可以放任何标签，甚至可以嵌套另外一个列表，如，

<ul>
  <li>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
  <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
   </li>
</ul>

ul有type的属性，属性值： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。可以通过type来设置无序列表的样式。我们也可以给li设置type。

有序列表

有序列表即为有排列顺序的列表，跟ul无序列表的语义是不同的，但使用方法是一致的，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

dl没有属性，同样的dl中的元素只能是dt和dd；dt从语义上讲，指的是列表的标题，dd指的是列表的选项。dd是用来描述说明dt的；自定义列表中必须有dt，dd是可选的。
dl使用非常灵活，我们可以让一个dl包裹多个dt，还可以让一个dl只包含一个dt，使用多个dl来完成相同功能的自定义列表，如小米官网：

小米底部客户帮助模块儿.png

表格标签

表格是一种常用的一种标签，用来处理、显示表格式数据。之前也使用表格做布局，但由于表格布局比较死板，现在已经不使用表格布局了

<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签；table用于定义一个表格。tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少单元格。创建表格的语法如下，

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

tr标签只能包裹td，td我们可以看做是一个容器，里边儿可以放任何标签。

总计一下table的属性：

1. border：设置表格的边框，默认border=“0”，单位是像素。
2. width：宽度。像素为单位。
3. height：高度。像素为单位。
4. bordercolor：表格的边框颜色。
5. align：表格的水平对齐方式。属性值可以填：left right
6. center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
7. cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为1像素。
8. cellspacing：单元格和单元格边框之间的空白间距（外边距），像素为单位。默认情况下的值为2像素
9. bgcolor: 表格的背景颜色。
10. background: 背景图片。 背景图片的优先级大于背景颜色。
    一般我们设置表格样式，是吧三参设置为0，即border cellpadding cellspacing 为 0px；

总结一下tr的常用属性

1. bgcolor：设置这一行的单元格的背景色。
2. height：一行的高度
3. align：单元格内容水平对齐方式，取值：left、center、right
4. valign：一行的内容垂直对齐方式，取值：top、middle、bottom

总结一下td的常用属性

1. align：内容的横向对齐方式。属性值可以填：left right
2. width：绝对值或者相对值(%)
3. height：单元格的高度
4. bgcolor：设置这个单元格的背景色。

表头标签

表头单元格一般位于表格的第一行或第一列，使用表头标签可以使其具有语义，并且其文本加粗居中，设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

语法格式如下，

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>小猪</td>
        <td>女</td>
        <td>27</td>
    </tr>
    <tr>
        <td>小杨</td>
        <td>男</td>
        <td>27</td>
    </tr>

</table>

简单说一下表格布局

在使用表格进行布局时，可以将表格划分为头部、主体和页脚

1. <thead></thead>：用于定义表格的头部。
   必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
2. <tbody></tbody>：用于定义表格的主体。
   位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
   注意，如果用使用这几个标签，浏览器显示的时候会按照thead、tbody、tfoot的顺序依次来显示内容。如果没有这几个标签，thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

表格标题
caption 元素定义表格标题。并且这个标签必须紧随 table 标签之后。

<table>
   <caption>我是表格标题</caption>
</table>

合并单元格

合并单元格属性：

1. colspan：横向合并
2. rowspan：纵向合并。

合并单元格的基本思路：
​将多个内容合并的时候，把合并之后多余的东西删除。如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

合并的顺序：

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格
3. 删除多余单元格