HTML列表关键在语义与嵌套规则：ul用于无序内容（如导航），ol用于有序内容（如步骤）；li不可省略且须正确嵌套；嵌套建议≤3层，避免语义错误与可访问性问题。
HTML 列表不用“教程”也能写对，关键在分清语义和嵌套规则。
ul 和 ol 什么时候该用哪个
ul 表示项目之间无顺序依赖，比如导航菜单、标签云、一堆功能入口；ol 表示步骤、排名、时间线这类有天然次序的内容，比如安装步骤、比赛名次、文章目录。
常见错误现象：ol 里硬塞“热门标签”——浏览器会渲染数字序号，但语义错，影响可访问性和 SEO；反过来用 ul 写“第一步、第二步”，屏幕阅读器读不出顺序逻辑。
- 不靠视觉样式判断，看内容是否“换顺序就变意思”
-
ol支持start、reversed、type属性，但别为了改数字样式去滥用type="A"，CSS 更可控 - 嵌套时，子列表用
ul或ol都行，取决于子项自身是否有顺序，不是必须跟父级一致
li 标签不能省略，也不能乱放
li 是唯一合法的 ul/ol 直接子元素。浏览器会自动容错（比如把文字直接塞进 ul），但 DOM 结构残缺，JS 操作 document.querySelectorAll('ul > li') 会漏掉那些“隐形 li”。
立即学习“前端免费学习笔记（深入）”；
使用场景：动态生成列表时，后端模板或 JS 拼字符串容易漏写 li，或者把 div 当 li 用。
- 永远用
<li>内容</li>包住每一项，哪怕内容是空的或只有图标 -
li内部可以放任意流内容（p、div、img、甚至另一个ul），但别把ul直接当li的替代 - 不要写
<ul><div>错</div></ul>—— 这在 HTML5 中是无效结构，校验通不过
列表嵌套的层级和缩进陷阱
嵌套本身没限制，但每多一层，CSS 选择器复杂度和缩进管理成本就翻倍。真实项目里常见“三级菜单”写成三层 ul，结果 hover 效果错乱、移动端点击区域变小。
性能影响：深层嵌套不会拖慢渲染，但 JS 遍历 ul ul ul li 比平级慢，尤其在大量列表项时。
- 嵌套层级建议 ≤3 层；超过就该考虑用其他组件（如树形控件、折叠面板）
- 缩进靠 CSS 控制，别用
margin-left堆砌，优先用padding-left+list-style-position: inside - 用
display: list-item模拟列表行为？别试——语义丢失，辅助工具无法识别
最常被忽略的是 li 的隐式闭合规则：HTML 解析器遇到下一个 li 或父级结束标签时才闭合当前 li，所以写 <li>a<li>b 实际生成两个 li，但第一个没闭合标签——这种写法看着省事，调试时 DOM 树会出人意料。
