标准无序列表必须用<ul>包裹<li>，不可省略标签或混入文本；改符号需用CSS的list-style-type而非type属性；去缩进须设padding-left:0；嵌套靠结构实现，子列表符号自动变化且需注意语义合规。
直接用 <ul> 和 <li> 就能做出标准无序列表，不需要额外属性或 JS。
基础写法：必须用 <ul> 包裹 <li>
浏览器只认结构，不认缩进或空格。常见错误是把文本直接写在 <ul> 里，或者漏掉 </li>：
-
<ul>苹果</li><li>香蕉</li></ul>—— 错：<ul>开头缺<li> -
<ul><li>苹果</li>香蕉</ul>—— 错：香蕉没被<li>包住，不会渲染为列表项 -
<ul><li>苹果<li>香蕉</ul>—— 错：第二个<li>没闭合，部分浏览器会自动补全但行为不可靠
正确写法只有这一种结构：
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
改项目符号：用 list-style-type，不是 type 属性
<ul type="square"> 是过时写法，HTML5 已废弃，现代浏览器可能忽略。必须用 CSS 控制：
立即学习“前端免费学习笔记（深入）”；
-
list-style-type: disc—— 实心圆（默认） -
list-style-type: circle—— 空心圆 -
list-style-type: square—— 实心方块 -
list-style-type: none—— 彻底隐藏符号（常用于导航菜单）
示例：
<ul style="list-style-type: square;"> <li>首页</li> <li>关于我们</li> </ul>
去掉默认缩进：padding-left 必须重置
即使设了 list-style-type: none，浏览器仍会给 <ul> 加约 40px 的 padding-left，导致内容左偏。不处理的话，自定义图标或文字会和左侧边界对不齐。
- 加
padding-left: 0是最简方案 - 如果用
background-image做图标，还要给<li>加padding-left（比如20px），避免文字盖住图标 - 别依赖
margin-left: -40px这类负边距，响应式下容易错位
推荐最小化样式：
ul.clean {
list-style: none;
padding-left: 0;
}
ul.clean li {
padding-left: 20px;
background: url('arrow.svg') no-repeat left center;
}
嵌套列表：层级靠结构，符号自动变化
嵌套本身很简单：在某个 <li> 里再放一个 <ul>。但要注意两点：
- 浏览器会自动把子
<ul>的符号换成更小的圆点（或方块），无需手动指定 - 如果父级用了
list-style-type: none，子级也会继承，得单独给子<ul>设回disc或其它值 - 语义上，嵌套意味着“属于上一项的细分”，别为了缩进效果硬套嵌套
例如地区-城市结构：
<ul>
<li>北京市
<ul>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>上海市
<ul>
<li>浦东新区</li>
<li>徐汇区</li>
</ul>
</li>
</ul>
最容易被忽略的是语义合规性：<ul> 下只能直接放 <li>，不能插 <div>、<p> 或文本；而 <li> 内部可以放任意合法 HTML。结构错一点，可访问性（如屏幕阅读器）和后续 CSS 选择器就可能失效。
