当前位置：首页 > news >正文

HTML列表学习笔记

news 2026/3/27 1:15:01

一、HTML无序列表

无序列表是一个项目的列表，项目使用粗体圆点（典型的小黑圆圈）进行标记，适合成员之间无级别顺序关系的情况。

‌使用标签‌：<ul>

‌代码示例‌：

<!DOCTYPE html>
<html>
<head><title>童心少年</title><meta charset="UTF-8">
</head>
<body><ol><li>Coffee</li><li>Milk</li></ol>
</body>
</html>

‌浏览器显示效果‌：
1. Coffee
2. Milk

三、HTML自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合，以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，即<dt>与<dd>在其中数量不限、对应关系不限。

‌使用标签‌：<dl>、<dt>、<dd>

‌代码示例‌：

<!DOCTYPE html>
<html>
<head><title>童心少年</title><meta charset="UTF-8">
</head>
<body><dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
</body>
</html>

‌浏览器显示效果‌：
- Coffee - black hot drink
- Milk - white cold drink

四、注意事项与更多实例

‌注意事项‌：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
‌更多实例‌：
- ‌不同类型的有序列表‌：展示不同标记类型（如字母、罗马数字等）的有序列表。
- ‌不同类型的无序列表‌：展示不同标记类型（如圆圈、方块等）的无序列表。
- ‌嵌套列表‌：展示如何在列表内部嵌套另一个列表。
- ‌自定义列表‌：展示一个包含术语及其定义的自定义列表。

五、HTML列表标签总结

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表（自定义列表）
`<dt>`	自定义列表项目（术语）
`<dd>`	定义自定义列表的描述