嵌套列表必须将子ul完整写在li标签内部，否则导致dom结构错误、css失效和屏幕阅读器误读；子ul只能作为li的直接子元素，不可跨出或并列。
嵌套必须把子 ul 完整写在某个 li 标签内部，跨出或并列就等于语义断裂——不是“看起来不对”，而是 DOM 结构错误、CSS 失效、屏幕阅读器读错。
子 ul 必须严格位于 li 内部
浏览器只认一种嵌套结构：ul → 直接子元素只能是 li → 子 ul 只能出现在某个 li 的开始与结束标签之间。任何其他写法都会触发 HTML5 语法错误。
- ✅ 正确：
<ul><li>北京<ul><li>朝阳区</li></ul> </li></ul> - ❌ 错误：
<ul><li>北京</li></ul> <ul><li>朝阳区</li></ul>（两个孤立ul，语义断裂） - ❌ 错误：
<ul> <li>北京</li> <ul><li>朝阳区</li></ul> </ul>（子ul在ul内但不在li内，DOM 错乱）
嵌套时常见 DOM 和可访问性问题
结构错位不会让页面“崩”，但会让机器无法理解层级关系。键盘 Tab 焦点顺序会跳过子项，屏幕阅读器播报时无法识别“这是北京的下级列表”。
- 每个子
ul必须有且仅有一个直接父级li，不能靠 CSS position 或 visibility 模拟嵌套 - 若用 JavaScript 动态插入子列表，必须确保插入位置是
li的innerHTML或appendChild到该li节点，而非父ul - 超过 3 层嵌套容易导致移动端双指滑动读屏时信息过载，建议用折叠交互替代纯结构嵌套
li 里可以放什么？哪些内容会破坏语义
li 是列表项边界标记，不是容器 div。它允许嵌套任意合法 HTML，但加错东西会悄悄毁掉语义。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 允许：
<li>@#@#@#@#@#@#@#@#@#@0</li>、<li> <p>说明文字</p> <ul><li>子项</li></ul> </li> - ❌ 破坏语义：
<ul><div><li>项1</li></div></ul>（div插在ul和li之间，W3C 验证失败） - ⚠️ 容错陷阱：
<ul>苹果</ul>中的“苹果”会被浏览器自动包进隐式li，但这个行为不可控、不一致，别依赖
样式重置比想象中更关键
嵌套列表默认缩进很深，且每层 ul 都继承父级 padding-left，不手动重置会导致文字严重右偏。
- 必须写：
ul { list-style: none; padding-left: 0; }——list-style: none比list-style-type: none更彻底，清符号+图片+位置 - 若用
background-image替换项目符号，记得给li加padding-left: 24px（留出图标空间），否则文字贴着图标 - 横向菜单常用
ul { display: flex; }，此时li保持display: list-item才能保留符号；若设成flex或inline-block，符号立刻消失，得手动补list-style-position: inside
真正难的不是闭合标签，而是每次写 ul 前问一句：这里是不是一组并列、同级、可被独立聚焦/播报的项？如果不是，换 nav、section 或 div 更合适。语义错位之后，所有样式和 JS 补救都是在擦地板上的水，而不是关掉漏水的龙头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
