表格 列表 自定义列表

1.表格标签

1.1表格的主要作用

​ 表格主要用于显示、展示数据

1.2表格的基本语法

1.< table>< /table>是用于定义表格的标签

2.< tr>< /tr>标签用于定义表格中的行，必须嵌套在 < table>< /table>标签中

3.< td>< /td>用于定义表格中的单元格，必须嵌套在 < tr>< /tr>标签中

4.字母td指表格数据（table data），即数据单元格的内容

1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，标题单元格里面的文本内容加粗居中显示

< th>标签表示HTML表格的表头部分

1.4表格属性

表格标签这部分属性实际开发并不常用，主要通过CSS来设置

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或”“	规定表格单元是否拥有边框，默认为”“,表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

1.5表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

< thead>标签表示表格的头部区域，< thead>内部必须拥有< tr>标签。一般是位于第一行

< tbody>标签表示表格的主体区域，主要用于放数据本体

1.6合并单元格

1.合并单元格方式

跨行合并：rowspan=”合并单元格的个数“

跨列合并：colspan=”合并单元格的个数“

2.目标单元格

​ 跨行:最上侧单元格为目标单元格，写合并代码

​ 跨列:最左侧单元格为目标单元格，写合并代码

3.合并单元格的步骤

​ 确定是跨行还是跨列

​ 找到目标单元格，写上合并方式=合并的单元格数量。比如：< td colspan = “2” >< /td>

​ 删除多余的单元格

2.列表标签

表格是用来显示数据的，那么列表就是用来布局的

2.1无序列表

< ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用< li>标签定义

1.无序列表的各个列表项之间没有顺序级别之分，是并列的

2.< ul>< /ul>中只能嵌套< li>< /li>，直接在< ul>< /ul>标签中输入其他标签或者文字的做法是不被允许的

3.< li>与< /li>之间相当于一个容器，可以容纳所有元素

4.无序列表会带有自己的样式属性，但在实际使用时，通常使用CSS来设置

2.2有序列表

< ol>标签用于定义有序列表，列表排序以数字来显示，并且使用< li>标签来定义列表项

1.< ol>< /ol>中只能嵌套< li>< /li>，直接在< ol>< /ol>标签中输入其他标签或者文字的做法是不被允许的

2.< li>与< /li>之间相当于一个容器，可以容纳所有元素

3.有序列表会带有自己的样式属性，但在实际使用时，通常使用CSS来设置

3.自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

在HTML标签中，< dl>标签用于定义描述列表（或定义列表），该标签会与< dt>（定义项目/名字）和 < dd>（描述每一个项目/名字）一起使用

1.< dl>< /dl>里只能包含< dt>< /dt>和< dd>< /dd>

2.< dd>和< dt>没有个数限制，经常是一个< dt>对应多个< dd>

4.列表总结

标签名	定义	说明
< ul>< /ul>	无序标签	里面只能包含li，没有顺序，使用较多，li里面可以包含任意标签
< ol>< /ol>	有序标签	里面只能包含li，有顺序，使用相对较少，li里面可以包含任意标签
< dl>< /dl>	自定义列表	里面只能包含dt、dd，dt和dd里面可以放任何标签