HTML规范要求ul的直接子元素必须是li，不可直接包含文本或其他标签；嵌套列表需将ul置于li内，确保语义正确、可访问性及CSS选择器有效。
ul 标签里必须用 li 做直接子元素
HTML 规范明确要求 <ul></ul> 的直接子节点只能是 <li>，不能直接放文字、<p></p>、<div> 或其他块级元素。浏览器虽会“容错渲染”，但会导致 DOM 结构异常、语义丢失，影响可访问性（如屏幕阅读器跳过内容）和 CSS 选择器失效（比如 <code>ul > p 根本不匹配）。
正确写法只有一种核心结构：
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
- 所有内容（包括换行、空格）必须包裹在
<li>内 - 不要写成
<ul>文本</ul>或<ul><p>文本</p></ul> -
<li>可以嵌套任意合法内容（如<p></p>、<span></span>、甚至另一个<ul></ul>）
嵌套列表：li 里面再放 ul 是唯一合法方式
想实现多级菜单或缩进结构，必须通过 <li> 包裹下一级 <ul></ul>，而不是把 <ul></ul> 直接塞进上层 <ul></ul>。
立即学习“前端免费学习笔记（深入）”；
错误示例（解析后结构混乱）：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<ul>
<li>一级项</li>
<ul> <!-- ❌ 这个 ul 不在 li 里，属于孤儿节点 -->
<li>二级项</li>
</ul>
</ul>正确写法（层级清晰、语义准确）：
<ul>
<li>一级项</li>
<li>另一级项
<ul>
<li>二级项</li>
<li>又一个二级项</li>
</ul>
</li>
</ul>- 嵌套的
<ul></ul>必须是某个<li>的子元素，不能平级出现在外层<ul></ul>中 - 每个
<li>可独立决定是否展开子列表，无需统一处理 - CSS 控制缩进建议用
padding-left而非依赖默认 margin，避免不同浏览器渲染差异
常见错误现象与调试提示
遇到列表显示异常（如编号错乱、缩进消失、点击区域不响应），大概率是嵌套结构出问题。典型表现有：
- 开发者工具中看到
<ul></ul>下出现灰色“#text”节点（即非法空白文本） - 用
document.querySelectorAll('ul > li')获取不到预期数量 —— 说明部分<li>实际被浏览器移到了<ul></ul>外面 - 无障碍测试工具报 “listitem not contained in list” 错误
- 复制网页内容时，嵌套项变成扁平段落，丢失层级
快速验证方法：右键 → “查看页面源代码”，确认所有 <ul></ul> 和 <ol></ol> 都严格处于 <li> 内部，且没有裸文本混入。
li 里放块级元素需注意兼容性细节
虽然 HTML5 允许在 <li> 里放 <p></p>、<div>、<code><section></section> 等，但老版本 IE（如 IE8）对块级嵌套支持弱，可能撑开行高或破坏垂直居中。
- 纯文字内容优先用
<li>文本</li>，避免无意义包裹<p></p> - 若需段落样式，用
<li><p>段落内容</p></li>，并确保 CSS 清除p默认 margin - 动态生成列表时（如 JS 拼接字符串），特别注意引号闭合和标签配对，
<li><ul>...</ul></li>容易漏掉内层
真正容易被忽略的是：即使结构合法，如果 <li> 内部用了 display: flex 或 float，也可能让某些屏幕阅读器无法正确识别列表语义。这时候得靠 role="listitem" 补救，但治标不治本 —— 还是得先确保原始 HTML 嵌套干净。
