使用ul、ol和li标签创建无序和有序列表，dl、dt、dd构建描述列表，结合CSS可自定义样式如去除默认标记、添加图标、调整缩进，提升页面可读性与美观度。
在HTML中插入列表项主要通过
- 、
- 和
- 标签实现，分别用于创建无序列表、有序列表以及列表中的每一项。除此之外，还可以使用
- 、
- 和
- 构建自定义描述列表。结合CSS，能灵活控制列表样式，提升页面可读性与美观度。
基本列表结构：ul、ol 与 li
无序列表用
- ，每项用
- 包裹，前面通常显示圆点；有序列表用
- ，会自动编号。
- 苹果
- 香蕉
- 橙子
- 第一步
- 第二步
- 第三步
- 必须嵌套在
- 或
- 内部，否则结构不合法。
自定义列表样式：用CSS控制外观
默认的列表样式较单一，可通过CSS修改项目符号、编号格式、缩进和对齐方式。
立即学习“前端免费学习笔记（深入）”；
- 去掉默认标记：list-style: none; 可清除圆点或数字
- 使用图片作为项目符号：list-style-image: url(icon.png);
- 自定义位置：list-style-position: inside | outside; 控制标记是否缩进
- 自定义前缀样式
- 更灵活的设计控制
利用伪元素::before或::after，可以完全自定义每个
- 前的图标或符号，适合需要品牌化设计的场景。
描述列表：dl、dt、dd 的使用场景
对于术语与解释类内容，
- 比ul/ol更语义化。
- 表示术语，
- 描述其内容。
- HTML
- 超文本标记语言，网页结构基础
- CSS
- 层叠样式表，控制网页表现
这种结构适合词汇表、参数说明或配置项展示。配合CSS可实现左侧术语左对齐、描述右对齐的清晰布局。
实用技巧与注意事项
- 避免在
- 内直接写文本，应包裹在
或中以更好控制样式
- 深层级列表注意设置合理的margin和padding，防止缩进过深
- 响应式设计中，可为移动端隐藏项目符号或调整字体大小
- 保持语义正确：仅当内容为列表时才使用ul/ol，不要用列表实现布局
基本上就这些。掌握ul、ol、li的基础用法，再结合CSS定制能力，就能应对大多数列表需求。关键是结构语义清晰，样式服务于内容表达。
以上代码会分别生成带项目符号的列表和数字编号列表。注意
- 包裹，前面通常显示圆点；有序列表用
