使用ul和li标签创建无序列表，可嵌套子列表并用CSS自定义样式，实现简洁清晰的内容展示。
想在网页中创建一个简洁清晰的项目列表？HTML 的无序列表（ul/li）是最常用的方式。它适合展示不需要特定顺序的内容，比如购物清单、功能特点或导航菜单。下面教你一步步创建标准的 HTML 无序列表。
无序列表由 <ul> 标签开始，表示“unordered list”。这个标签作为容器，包裹所有列表项。
示例：<ul> <!-- 列表项将放在这里 --> </ul>
每个具体的条目使用 <li> 标签（list item）来定义。把内容写在 li 标签内部，并放在 ul 容器中。
示例：创建三个列表项<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
浏览器会自动在每项前显示圆点符号，表示这是一个无序列表。
立即学习“前端免费学习笔记（深入）”；
如果需要子列表，可以在某个 li 内部再添加一个 ul。这种嵌套方式常用于菜单或分类展示。
示例：带子项的列表
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>胡萝卜</li>
<li>菠菜</li>
</ul>
</li>
</ul>嵌套后，子列表会以不同的缩进和标记样式显示，层级更清晰。
默认情况下，无序列表使用实心圆点。你可以用 CSS 修改标记形状、颜色或移除符号。
常见 CSS 设置：list-style-type: square; 或 disc、circle
list-style: none;，常用于导航栏margin 和 padding 控制缩进和行距基本上就这些。掌握 ul 和 li 的基本结构后，你就能快速在网页中组织信息。结合 CSS 还能做出更美观的布局，不复杂但容易忽略细节。
以上就是HTML无序列表制作教程_HTML ul/li无序列表创建步骤的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
412
收藏
