ul必须仅包含li元素，不可直接嵌入文本或其他标签；li必须严格嵌套在ul或ol内，不可单独存在或置于非列表容器中；嵌套列表时子ul须完整位于父li标签内部；html5废弃type属性，应使用css控制样式。
ul 和 li 是 HTML 中构建无序列表最基础、也最容易出错的两个标签。它们本身语义清晰，但实际写的时候，只要多一个空格、少一层嵌套、或者混进其他标签，浏览器就可能渲染异常，甚至被校验工具报错。
ul 必须只包含 li，不能直接放文字或 div
这是最常踩的坑：很多人会这么写：
-
这是第一项
- 这是第二项
- 这是第三项
结果是“这是第一项”不会被识别为列表项，它会脱离列表结构，出现在 ul 外侧（或被浏览器自动修正，行为不可靠）。正确做法是所有内容都包在 li 里：
- 每一条都必须用
li包裹 -
ul内部不允许出现纯文本、p、div、span等非列表项标签 - 如果需要复杂结构（比如带图标、链接、按钮），可以在
li内部自由嵌套，但容器仍是li
li 不可以脱离 ul/ol 单独存在
li 是依赖型标签，没有父容器就失去语义。下面这些写法都是无效的：
浏览器可能勉强渲染，但会触发 HTML5 结构警告，影响可访问性（如屏幕阅读器无法识别列表上下文），SEO 也可能降权。务必确保：
-
li只出现在ul或ol标签内部 - 不要用
li模拟按钮或菜单项而不包裹在列表容器中——那是滥用语义 - 导航菜单用
ul+li是合理场景，但得配a标签实现跳转，不能只靠li
嵌套列表时 ul 和 li 的层级要对齐
嵌套本身没问题，比如二级菜单或带子项的目录，但缩进错误会导致结构断裂：
- 一级项 A
- 二级项 A1
- 二级项 A2
- 一级项 B
注意：嵌套的 ul 必须完整写在某个 li 的开始与结束标签之间，不能跨 li 边界。常见错误包括：
- 把子
ul放在父li外面（导致第二级项变成同级） - 漏写某个
li的闭合标签，让后续嵌套全部错位 - 用 CSS 的
display: list-item强行模拟li，但没配ul—— 语义丢失
ul 默认样式干扰布局？优先用 CSS 重置而非 type 属性
老教程里常写 <ul type="square"></ul>，但这个 type 属性在 HTML5 中已被废弃，现代浏览器基本忽略它。真正可控的方式是 CSS：
ul {
list-style-type: none; /* 去掉默认圆点 */
padding-left: 0;
}
li {
margin-bottom: 8px;
}
关键点：
- 别再用
type或已废弃的compact属性 - 要用自定义图标，优先选
list-style-image或更推荐的背景图 +padding-left方案（兼容性更好） - 如果整个列表要做成横向导航，给
li加display: inline-block或用 Flex 布局，但别动ul的display类型（除非你清楚 block 行为被破坏的后果）
真正麻烦的不是怎么写对，而是写错之后不报错——浏览器太宽容，容错渲染掩盖了结构缺陷。检查时多看开发者工具里的 DOM 树，确认每个 li 都挂在 ul 下，且中间没插队的文本节点或无关标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
