ul标签必须配合li使用，单独ul不渲染内容且无项目符号；嵌套ul需严格闭合，否则dom解析异常；list-style-type作用于ul并影响所有后代li；重置缩进需谨慎，避免破坏列表层级可读性。
UL标签必须配合LI使用，单独写<ul></ul>不渲染任何内容
浏览器只会把<ul></ul>当作一个语义容器，真正生成项目符号和缩进的是<li>元素。如果漏写<li>或误用<p></p>、<div>包裹文字，列表项不会被识别为可点击/可聚焦的列表单元，也会影响屏幕阅读器解析。<p>常见错误写法：</p>
<pre class="brush:php;toolbar:false;"></pre>
<ul>
这里直接写文字 —— 不会显示圆点，也不在列表流中
</ul>
<p>正确结构必须是：</p>
<pre class="brush:php;toolbar:false;"></pre>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<h3>嵌套UL要闭合每一层，否则DOM树可能意外截断</h3>
<p>多级菜单、目录树等场景常用嵌套<code><ul></ul>，但HTML解析器对标签闭合敏感。若内层遗漏，浏览器会尝试自动修复，但修复逻辑因引擎而异，可能导致后续内容被吞进上层列表，或样式错乱。
容易出问题的写法：
- 一级项
- 二级项
- 这个li可能被当成上层ul的子项，也可能被丢到文档末尾
实操建议：
- 编辑器开启标签自动闭合（如 VS Code 的 Auto Close Tag 插件）
- 用
document.querySelectorAll('ul')在控制台检查嵌套层级是否符合预期 - 避免手动拼接字符串生成嵌套HTML，优先用模板或递归函数确保配对
list-style-type影响所有LI，无法单个覆盖除非用CSS类
<ul></ul>的type属性（如type="square"）已被HTML5废弃，现代写法必须用CSS的list-style-type。该样式作用于<ul></ul>本身，会统一应用到所有后代<li>，包括嵌套里的。
如果你需要某一层用圆点、下一层用短横线，不能只靠<ul></ul>属性，得靠选择器区分：
ul { list-style-type: disc; }
ul ul { list-style-type: square; }
ul ul ul { list-style-type: circle; }
注意点：
- 用
ul > li选直接子项，避免影响更深嵌套 - 某些图标字体（如 Font Awesome）替换列表符号时，需先
list-style: none再用::before伪元素插入 - 无障碍要求下，不要仅依赖符号类型传递层级信息，应配合
aria-level或标题语义
用CSS重置默认外边距前，先确认是否真要移除缩进
几乎所有浏览器会给<ul></ul>加margin-block-start/block-end和padding-inline-start，这是列表可读性的基础。直接全局重置成margin: 0; padding: 0;会导致所有列表塌陷成一行、失去层级视觉提示。
更稳妥的做法：
- 只对特定用途列表重置，比如导航菜单：
.nav-list { margin: 0; padding: 0; } - 保留缩进但调整数值：
ul { padding-inline-start: 1.5rem; } - 用
display: flex或grid重构布局时，明确设置flex-direction: column并自行控制间距，而非粗暴清空
真正难处理的不是怎么去掉缩进，而是去掉后如何用其他方式维持信息层级——这点常被忽略。
