Html 表类标签：表格、有序列表、无序列表、自定义列表，语法总结

最新推荐文章于 2025-07-04 16:33:03 发布

原创最新推荐文章于 2025-07-04 16:33:03 发布 · 1.5k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #css

本文介绍了Html中表格的创建，包括<table>、<tr>、<td>和<th>标签的使用，以及表格的属性如align、border等。此外，还讲解了无序列表<ul>、有序列表<ol>和自定义列表<dl>的语法和应用场景。最后提到了表单标签在收集用户信息中的作用。

Html 是前端学习的第一步，接下来做一些 Html 的语法小结

表格标签

<table></table>标签用于定义表格
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母td指表格数据（table data），即数据单元格的内容。

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

表头单元格标签
- <th> 标签表示HTML表格的表头部分（table head的缩写）
```
<table>
	<tr>
		<th>姓名</th>
		...
	</tr>
	...
</table>
```
  - 表头单元格里的内容居中加粗显示

表格属性

这部分标签不常用，后期通过CSS来设置

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

这些属性要写到表格标签table里去

表格结构标签

为了在很长的表格中更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。在表格标签中分别用<thead></thead>标签表示表格的头部（一行），<tbody></tbody>标签表示表格的主体区域，这样可以更好的分清表格结构。
以上两个标签放在<table></table>之间

合并单元格

跨行合并：rowspan=”合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
三个步骤：
- 先确定跨行还是跨列
- 找到目标单元格，写上合并方式 = 合并的单元格数量。
  比如：<td colspan=”2”></td>。
- 删除多余的（被合并的）单元格。
列表标签

无序列表
- <ul>标签表示 HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。无序列表的基本语法格式如下：
```
<ul>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		...
</ul>
```
  效果如下：
attention:
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
- <ul></ul>中只能直接嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li></li>里面可以放任何元素，相当于一个容器。
- 无序列表通常会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
  ##有序列表
- 在HTML标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。有序标签的基本语法格式如下：
```
<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ol>
```
效果如下：
attention:
- <ol></ol>中只能直接嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
- <li></li>里面可以放任何元素，相当于一个容器。
- 有序列表通常会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
自定义列表
- 使用场景：自定义列表常用于对术语或名词进行解释和描述。定义列表的列表项前没有任何项目符号。
在HTML标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。其基本语法如下：
```
<dl>
	<dt>名词1</dt>
	<dd>名词1 解释1</dd>
	<dd>名词2 解释2</dd>
</dl>
```
效果如下：
attention:
- <dl></dl> 里面只能包含<dt>和<dd>。
- <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
- <dt>和<dd>里面可以放任何标签