li标签必须嵌套在ul或ol中，否则html结构不标准，导致语义断裂、css失效、屏幕阅读器误读；浏览器虽自动修复但不可控，影响可访问性与维护性。
li 标签不放 ul 或 ol 里会怎样
浏览器不会报错，但 HTML 文档会变成非标准结构，校验工具（如 W3C Validator）直接标红；部分辅助技术（如屏幕阅读器）可能跳过或误读 li 内容，影响可访问性。
常见错误现象包括：
- 单独写
<li>首页</li> <li>关于</li>—— 没有父容器，语义断裂 -
<div><li>菜单项</li></div>——li不是div的合法子元素，HTML 解析器会自动“修复”，可能把li提到div外，导致布局错乱 - 在
dl中用li替代dt/dd—— 违反语义，dl只接受dt和dd作为直接子元素
ul 里没 li 会出什么问题
语法上合法，但失去列表本意：空的 <ul></ul> 渲染为一个空行（或无内容），CSS 选择器如 ul > li 完全不生效，JS 查询 document.querySelectorAll('ul li') 返回空 NodeList。
实际开发中容易踩的坑：
- 动态渲染时漏判数组为空，直接生成
<ul>{items.map(...)}</ul>，结果得到<ul></ul>—— 建议加 guard：只有items.length > 0才渲染ul - 用 CSS 伪类（如
ul:empty）隐藏空列表，但忘了它不兼容 IE，需额外 JS fallback -
ul单独存在时，某些 CSS reset（如 normalize.css）仍会给它默认 margin，造成意外空白
嵌套列表时 li 里还能放 ul 吗
可以，而且这是唯一合法的嵌套方式：li 是容器级标签，内部允许嵌套 ul、ol，甚至再嵌 li。但必须保证每层 ul / ol 下都有 li 包裹。
正确写法示例：
- 一级项
- 二级项
- 另一二级项
- 又一个一级项
错误写法（常见于手写模板）：
-
<ul><ul><li>…</li></ul></ul>—— 外层ul缺少li，内层ul成了非法子元素 -
<li><div><ul><li>…</li></ul></div></li>—— 虽然不报错，但语义冗余，div层无必要，还可能干扰 CSS 列表样式继承
想加标题或分隔线怎么办
ul 和 ol 的直接子元素只能是 li，所以 h2、hr、p 等都不能直接塞进 ul 里。
合规做法只有两种：
- 把标题/分隔线放在
ul外部，用语义化包装（比如<section><h2>导航</h2> <ul>...</ul></section>） - 把标题放进某个
li里，再用 CSS 控制样式（例如<li class="list-header"><h3>热门分类</h3></li>），前提是它仍属于列表逻辑的一部分
别用 ul > :not(li) 强行 hack，现代浏览器会忽略这类非法子元素，或触发解析纠错机制，行为不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
