HTML-列表/表格
2025-08-19 本文已影响0人
大炮打小鸟
1、有序列表ol
列表前默认会有序号
<ol>
<li>有序列表</li>
</ol>
2、无序列表ul
列表前默认会有一个小黑点
<ul>
<li>无序列表</li>
</ul>
3、自定义列表dl
dt是术语名称，dd是术语描述
<dl>
<dt>自定义列表</dt>
<dd>描述</dd>
</dl>
列表注意事项
1、ol和ul内只能写li标签，要写其他元素需要用li包裹
2、li尽量不要单独使用
3、ol和ul可以进行嵌套
4、自定义列表，dt后可以有多个dd
学习发现：用VSCode期间发现，光标由竖线变成了方块,而且输入内容后会把后面的覆盖，
1、设置-搜索-cursor-Editor：Overtype Cursor Style - line
2、点一下键盘上的Insert键就不会覆盖后面内容了
表格
| HTML标签 | 功能描述 |
|---|---|
<table></table> |
定义一个表格 |
<caption></caption> |
定义表格的标题 |
<thead></thead> |
定义表格的表头内容 |
<th></th> |
定义表格的表头单元格 |
<tbody></tbody> |
定义表格的主体内容 |
<tr></tr> |
定义表格的一行 |
<td></td> |
定义表格的一个单元格 |
<tfoot></tfoot> |
定义表格的脚注内容 |
<col></col> |
定义表格的一列 |
常用属性
table属性：
border = "1" 表格的边框宽度1像素
width = '500' 表格总宽度500像素
height = '300' 表格总宽度300像素，表头和脚注高度不变
cellspacing = '0' 表格内的单元格与单元格之间距离为0
thead/tbody/tfoot/tr/th/td属性：
height = '30' 内容高度30像素,其实tbody高度小于总高度-表头和脚注 无效
align="left" left左对齐，center中间对齐，right右对齐
valign = 'top' top上对齐，middle中间对齐，bottom下对齐
th/td属性：
可以写width
rowspan = '4' 单元格跨行，数字代表跨4行，跨的行需要删掉
colspan = '3' 单元格跨列
补充几个常用标签
<br> 换行，是单标签
<hr>分割线，是单标签
<pre></pre>按原文显示，是双标签
