表格列表自定义列表

最新推荐文章于 2023-11-16 16:06:25 发布

Hioow

最新推荐文章于 2023-11-16 16:06:25 发布

阅读量949

点赞数

分类专栏：个人前端笔记文章标签： html 列表

本文链接：https://blog.csdn.net/weixin_46623496/article/details/119029834

版权

个人前端笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表格和列表标签的使用。表格标签包括<table>、<tr>、<td>、<th>等，用于数据展示，还讲解了表格的属性、结构标签以及单元格合并。列表标签分为无序列表<ul>、有序列表<ol>和自定义列表<dl>，用于布局和信息展示，每个列表类型都有其特定的使用场景和样式设置。

摘要由CSDN通过智能技术生成

1.表格标签

1.1表格的主要作用

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

1.2表格的基本语法

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

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

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydFkYK1J-1627014256649)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210722171732314.png)]$

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=”合并单元格的个数“

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwuyzpZU-1627014256651)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210722175125400.png)]$

2.目标单元格

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

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

3.合并单元格的步骤

确定是跨行还是跨列

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

删除多余的单元格

2.列表标签

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

2.1无序列表

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBC7ENOm-1627014256653)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210722180504668.png)]$

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

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

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

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

2.2有序列表

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T0CPg5qt-1627014256655)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210722181510217.png)]$

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里面可以放任何标签