HTML-列表标签

HTML中列表标签的分类（1、无序列表 2、有序列表3、定义列表）
其中无序列表：

无序列表格式:

<ul>
  <li>需要显示的条目内容li>
ul>
li其实是英文list item的缩写
list是列表的意思
item是条目的意思
所以结合起来就是 列表条目的意思
#####  无序列表样式

```html
<ul type="value">ul>
disc    默认值 实心圆
circle  空心圆
square  实心方块

有序列表

有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

- 有序列表格式:

<ol>
    <li>li>
ol>

其它用法和ul都差不多, 也就是应用场景/注意点都和ul差不多

- 有序列表样式

<ol type="A">ol>
1   默认值。数字有序列表。（1、2、3、4）
a   按字母顺序排列的有序列表，小写。（a、b、c、d）
A   按字母顺序排列的有序列表，大写。（A、B、C、D）
i   罗马字母，小写。（i, ii, iii, iv）
I   罗马字母，大写。（I, II, III, IV）

定义列表

<dl>
  <dt>dt>
  <dd>dd>
  <dt>dt>
  <dd>dd>
dl>

定义列表的注意点

和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.
推荐使用一个dt对应一个dd
和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

表格标签

什么是表格标签?

表格标签作用: 用来给一堆数据添加表格语义
其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

- 表格标签格式:

<table>
  <tr>
    <td>姓名td>
    <td>年龄td>
    <td>身高td>
  tr>
  <tr>
    <td>张三td>
    <td>19td>
    <td>1.78td>
  tr>
table>

其实表格标签中的table代表整个表格, 也就是一对table标签就是一个表格
其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

补充:除td外，有时也会用到th，th内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。

- 注意点

表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

- 宽度和高度的属性

可以给table标签和td标签使用

表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度.
如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度

- 水平对齐和垂直对齐的属性

其中水平对齐可以给table标签和tr标签和td标签使用.

垂直对齐只能给tr标签和td标签使用.

给table标签设置align属性, 可以控制表格在水平方向的对齐方式.
给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式.
给td标签设置align属性, 可以控制当前单元格中内容在水平方向的对齐方式.
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐.
给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式.
给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式.
注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐.

align: left center right

valign: top mid bottom

- 外边距和内边距的属性

只能给table标签使用

cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px
cellpadding内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
默认情况下内边距是1

注意: 以后在企业开发中所有控制样式的都是通过CSS或直接使用组件库中的属性控制，使用表格自带属性控制很少，但是要了解基本的使用。

- 细线表格

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服

细线表格的制作方式:
1.给table标签设置bgcolor=“black”，cellspacing = “1px”
2.给tr标签设置bgcolor=“white”
注意点:
table标签和tr标签以及td标签都支持bgcolor属性

- 表格的完整结构

由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类
表格中存储的数据可以分为4类

表格的标题
表格的表头信息
表格的主体信息
表格的页尾信息

表格的完整结构

<table>
  <caption>表格的标题caption>
  <thead>
      <tr>
          <th>每一列的标题th>
      tr>
  thead>
  <tbody>
      <tr>
          <td>数据td>
      tr>
  tbody>
  <tfoot>
      <tr>
          <td>数据td>
      tr>
  tfoot>
table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

注意点:

- 如果我们没有编写tbody, 系统会系统给我们添加tbody

- 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化(chrome下可以，Firefox下不可以)

- 单元格合并

1.水平方向上的单元格合并
可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
例如:

<td colspan="2">td>

含义: 把当前单元格当做两个单元格来看待

注意点:
由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示.
一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并.

2.垂直方向上的单元格合并
可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
例如:

<td rowspan="2">td>