无序列表通过ul和li标签创建，使用CSS的list-style-type可设置项目符号为disc、circle、square或none；去除默认符号后可用background-image自定义图标，需调整padding避免重叠，结合样式控制实现灵活布局。
在网页开发中，HTML无序列表（unordered list）用于展示没有特定顺序的项目内容，比如购物清单、功能特点或导航菜单。通过 ul 标签和 li 标签可以轻松创建无序列表。
基本语法：ul 和 li 标签的使用
无序列表由 <ul> 开始，以 </ul> 结束，每个列表项用 <li> 和 </li> 包裹。
- <ul> 定义无序列表的容器
- <li> 表示每一个具体的列表项
- 不需要额外属性也能正常显示默认圆点符号
示例代码：
<ul><li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
设置项目符号样式：CSS 控制 list-style-type
默认情况下，浏览器会为 ul 列表添加实心圆点。可以通过 CSS 的 list-style-type 属性更改项目符号的形状。
立即学习“前端免费学习笔记（深入）”；
- disc：实心圆点（默认）
- circle：空心圆圈
- square：实心方块
- none：不显示项目符号，常用于自定义图标或清除样式
示例：
<ul style="list-style-type: square;"><li>首页</li>
<li>关于我们</li>
<li>联系方式</li>
</ul>
去除项目符号与自定义图标
若想完全去掉默认符号并使用图片作为项目标记，可结合 list-style 和 background-image 实现。
- 设置 list-style: none; 隐藏原有符号
- 使用 CSS background 属性添加自定义图像
- 调整 padding 或 margin 避免文字与图标重叠
示例 CSS：
ul.custom-list {list-style: none;
padding-left: 0;
}
ul.custom-list li {
background: url('icon.png') no-repeat left center;
padding-left: 20px;
line-height: 1.5;
}
基本上就这些。掌握 ul 和 li 的结构搭配 CSS 样式控制，就能灵活实现各种项目符号效果，满足不同页面设计需求。不复杂但容易忽略细节，比如清除默认边距或适配移动端显示。
