使用ul和li标签创建无序列表,可嵌套子列表并用CSS自定义样式,实现简洁清晰的内容展示。

想在网页中创建一个简洁清晰的项目列表?HTML 的无序列表(ul/li)是最常用的方式。它适合展示不需要特定顺序的内容,比如购物清单、功能特点或导航菜单。下面教你一步步创建标准的 HTML 无序列表。
1. 使用 ul 标签定义无序列表
无序列表由 标签开始,表示“unordered list”。这个标签作为容器,包裹所有列表项。
2. 添加 li 标签创建列表项
每个具体的条目使用 标签(list item)来定义。把内容写在 li 标签内部,并放在 ul 容器中。
示例:创建三个列表项- 苹果
- 香蕉
- 橙子
浏览器会自动在每项前显示圆点符号,表示这是一个无序列表。
立即学习“前端免费学习笔记(深入)”;
3. 可选:嵌套列表实现多层结构
如果需要子列表,可以在某个 li 内部再添加一个 ul。这种嵌套方式常用于菜单或分类展示。
示例:带子项的列表- 水果
- 苹果
- 香蕉
- 蔬菜
- 胡萝卜
- 菠菜
嵌套后,子列表会以不同的缩进和标记样式显示,层级更清晰。
4. 自定义样式(可配合 CSS)
默认情况下,无序列表使用实心圆点。你可以用 CSS 修改标记形状、颜色或移除符号。
常见 CSS 设置:-
更改项目符号: 使用
list-style-type: square;或disc、circle -
移除符号: 设置
list-style: none;,常用于导航栏 -
调整间距: 用
margin和padding控制缩进和行距
基本上就这些。掌握 ul 和 li 的基本结构后,你就能快速在网页中组织信息。结合 CSS 还能做出更美观的布局,不复杂但容易忽略细节。











