<li>必须嵌套在<ul>或<ol>内，不可直接置于<body>中；type和value属性已废弃，应改用CSS控制样式；<li>可包含任意流内容但需语义匹配；嵌套时子列表必须完整位于<li>标签内部。
LI 必须嵌套在 UL 或 OL 里，不能直接放 body 中
浏览器会把孤立的 <li> 当作无效 HTML 处理——它可能被忽略、被移到最近合法父容器里，或触发解析错误。W3C 规范明确要求 <li> 只能作为 <ul>、<ol> 或 <menu> 的直接子元素。
常见错误现象：<li>首页</li><li>关于</li> 直接写在 <body> 里，结果页面不显示、开发者工具中该节点被自动包裹进一个隐式 <ul>（不可靠），或完全消失。
- 检查 DOM 结构：用浏览器开发者工具看
<li>是否真的在<ul>或<ol>内部 - 避免“偷懒写法”：不要省略外层容器，哪怕只有一项也要写
<ul><li>单条内容</li></ul> - 注意嵌套层级：可以在
<li>内部再放<ul>或<ol>，但不能跳级，比如<ul><div><li>…</li></div></ul>是非法的
type 和 value 属性已废弃，改用 CSS 控制样式和编号
type（如 type="square"）和 value（如 value="5"）在 HTML5 中已完全移除语义支持，XHTML Strict 更早就不允许。继续使用它们不会报错，但会被忽略，且影响可访问性和样式一致性。
替代方案必须用 CSS：
立即学习“前端免费学习笔记（深入）”；
- 无序列表符号：用
list-style-type，例如ul { list-style-type: square; } - 有序列表起始编号：用
counter-reset+counter-increment，或直接在<ol>上设start属性（如<ol start="3">），这是 HTML5 合法属性 - 彻底清除默认样式：常需同时设置
list-style: none;和手动调整padding-left，否则残留缩进
LI 内容可以是任意流内容，但语义要匹配场景
<li> 允许包含文本、<a>、<img>、<div> 甚至 <section>，但不是所有组合都合理。
典型使用场景与注意事项：
- 导航菜单：
<li><a href="/home">首页</a></li>—— 链接是直接子元素，语义清晰，利于屏幕阅读器识别 - 图文列表：
<li><img src="a.jpg"><h3>标题</h3><p>描述</p></li>—— 没问题，但避免在<li>里塞整个卡片组件（应考虑用<article>） - 表单选项：
<li><label><input type="checkbox">同意条款</label></li>—— 可行，但更推荐用<fieldset>+<legend>做语义化分组
嵌套列表时，OL/UL 必须完整位于 LI 内部
多级菜单或大纲结构依赖嵌套，但容易错在“闭合顺序”。错误写法：<li>一级</li><ul><li>二级</li></ul> —— 这会让 <ul> 成为兄弟节点而非子节点，破坏层级。
正确结构只有一种：
<ul>
<li>一级项
<ul>
<li>二级项</li>
<li>另一二级项</li>
</ul>
</li>
<li>另一级项</li>
</ul>
关键点：
- 子
<ul>或<ol>必须写在<li>开始标签之后、结束标签之前 - 每个嵌套层级都要有明确的容器，不能靠 CSS “模拟”嵌套
- 过度嵌套（>4 层）会影响可访问性，屏幕阅读器可能难以导航，建议用其他语义元素（如
<details>）替代
<li> 而不是 <div> —— 不是为了“看起来像列表”，而是为了让语义、键盘导航、屏幕阅读器都能按预期工作。 
