标准无序列表必须用包裹，不可省略标签或混入文本；改符号需用css的list-style-type而非type属性；去缩进须设padding-left:0；嵌套靠结构实现，子列表符号自动变化且需注意语义合规。
直接用 <ul></ul> 和 <li> 就能做出标准无序列表，不需要额外属性或 JS。
基础写法：必须用 <ul></ul> 包裹 <li>
浏览器只认结构，不认缩进或空格。常见错误是把文本直接写在 <ul></ul> 里，或者漏掉 ：
<ul>苹果</ul>- 香蕉
<ul></ul> 开头缺 <li>
<ul>
<li>苹果</li>香蕉</ul> —— 错：香蕉没被 <li> 包住，不会渲染为列表项<ul>
<li>苹果</li>
<li>香蕉</li>
</ul> —— 错：第二个 <li> 没闭合，部分浏览器会自动补全但行为不可靠正确写法只有这一种结构：
- 苹果
- 香蕉
- 橙子
改项目符号：用 list-style-type，不是 type 属性
<ul type="square"></ul> 是过时写法，HTML5 已废弃，现代浏览器可能忽略。必须用 CSS 控制：
-
list-style-type: disc—— 实心圆（默认） -
list-style-type: circle—— 空心圆 -
list-style-type: square—— 实心方块 -
list-style-type: none—— 彻底隐藏符号（常用于导航菜单）
示例：
- 首页
- 关于我们
去掉默认缩进：padding-left 必须重置
即使设了 list-style-type: none，浏览器仍会给 <ul></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>。但要注意两点：
- 浏览器会自动把子
<ul></ul>的符号换成更小的圆点（或方块），无需手动指定 - 如果父级用了
list-style-type: none，子级也会继承，得单独给子<ul></ul>设回disc或其它值 - 语义上，嵌套意味着“属于上一项的细分”，别为了缩进效果硬套嵌套
例如地区-城市结构：
- 北京市
- 海淀区
- 朝阳区
- 上海市
- 浦东新区
- 徐汇区
最容易被忽略的是语义合规性：<ul></ul> 下只能直接放 <li>，不能插 <div>、<code><p></p> 或文本；而 <li> 内部可以放任意合法 HTML。结构错一点，可访问性（如屏幕阅读器）和后续 CSS 选择器就可能失效。
