HTML无序列表用于展示没有顺序要求的并列内容，主要通过ul和li标签配合实现，默认情况下列表项前会显示圆点样式的项目符号，开发者也可以根据需求自定义项目符号的样式。
基础无序列表的创建
无序列表的父标签是<ul>，每个列表项使用<li>标签包裹，所有<li>标签都需要放在<ul>标签内部，浏览器会自动为每个<li>内容添加默认的项目符号。
基础的无序列表代码如下：
<ul> <li>首页</li> <li>产品中心</li> <li>关于我们</li> <li>联系客服</li> </ul>
上述代码会在页面上展示四个列表项，每个项前面默认显示实心圆点作为项目符号。
修改默认项目符号类型
可以通过CSS的list-style-type属性修改项目符号的样式，常见的可选值有以下几种：
- disc：默认值，实心圆点
- circle：空心圆圈
- square：实心方块
- none：不显示项目符号
修改项目符号类型的示例代码如下：
<style>
/* 空心圆圈项目符号 */
.circle-list {
list-style-type: circle;
}
/* 实心方块项目符号 */
.square-list {
list-style-type: square;
}
/* 不显示项目符号 */
.no-bullet-list {
list-style-type: none;
}
</style>
<ul class="circle-list">
<li>空心圆圈项目符号</li>
<li>第二项内容</li>
</ul>
<ul class="square-list">
<li>实心方块项目符号</li>
<li>第二项内容</li>
</ul>
<ul class="no-bullet-list">
<li>无项目符号</li>
<li>第二项内容</li>
</ul>自定义图片作为项目符号
如果需要使用自定义图片代替默认的项目符号，可以使用list-style-image属性，指定图片的路径即可。同时可以配合list-style-position属性设置项目符号的位置，可选值为outside（项目符号在列表项内容外部，默认值）和inside（项目符号在列表项内容内部）。
自定义图片项目符号的示例代码如下：
<style>
.custom-img-list {
/* 使用自定义图片作为项目符号 */
list-style-image: url('https://ipipp.com/bullet.png');
/* 项目符号放在内容内部 */
list-style-position: inside;
}
</style>
<ul class="custom-img-list">
<li>使用自定义图片作为项目符号</li>
<li>第二项列表内容</li>
<li>第三项列表内容</li>
</ul>注意事项
- <ul>标签的直接子元素只能是<li>，不要在<ul>内部直接放置其他内容
- <li>标签可以嵌套其他HTML元素，比如段落、链接、甚至嵌套另一个<ul>实现多级列表
- 如果同时设置了
list-style-type和list-style-image，浏览器会优先使用图片作为项目符号，只有当图片加载失败时才会使用list-style-type设置的样式 - 可以通过
list-style简写属性同时设置项目符号的类型、位置和图片，例如list-style: square inside url('bullet.png');
嵌套无序列表示例
无序列表支持嵌套，实现多级列表的效果，代码如下：
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>萝卜</li>
</ul>
</li>
</ul>上述代码会生成一个两级的无序列表，第二级列表的项目符号通常会比第一级更小，不同浏览器的默认样式可能略有差异，可以通过CSS统一调整。
HTMLul_tagli_tagcustom_bullet修改时间：2026-06-04 05:41:15