ul/ol里不能直接放div或p，因为html规范限定其合法子元素仅为li；浏览器会静默移出非法元素，导致dom与源码不一致、样式丢失、js查询失败及屏幕阅读器语义失效。
ul/ol里为什么不能直接放div或p
浏览器会静默修复结构，把非法子元素移出
- 外面，导致DOM和HTML源码不一致——你写的
- 别用
<ul><div class="item">...</div></ul>，改用<ul><li class="item">...</li></ul> - 需要语义分组？用
<li><article>...</article></li>，而非在外层套div - 横向排列时，清除
list-style后用display: flex控制布局，别靠嵌套div“撑开”结构 - 结构必须是
<li> <button aria-expanded="false">菜单项</button><ul>...</ul> </li> - 子
ul与按钮通过aria-labelledby关联，不能靠CSS视觉位置“假装有关系” - 避免用
visibility: hidden隐藏子菜单——它仍占空间、影响焦点流；用display: none或hidden属性 - 目标是
<li class="workout" data-id="123">？那htmlString就只写<h3>跑步</h3> <p>5km</p>，不含外层li - 需要更新
data-id或class？单独操作DOM属性：el.dataset.id = "456"、el.className = "workout updated" - 批量更新？用
DocumentFragment或insertAdjacentHTML("beforeend", ...)替代循环赋值innerHTML - 禁用所有CSS后再看结构：如果列表项突然堆成一列没缩进，大概率是
li被踢出ul了 - 用
document.querySelectorAll("ul li")结果远少于预期？说明部分li没被解析为ul子元素 - 检查
p标签内部有没有div或h2——只要出现，浏览器一定已闭合前面的p，后续样式全失效
<ul><div>item</div></ul>，实际解析后变成<div>item</div>
<ul></ul>，列表样式消失、JS查不到预期节点。根本限制来自HTML规范：ul和ol的合法子元素只有li（以及另一个ul或ol）。哪怕只是加个class或data-* 属性，也得包在li里，而不是绕过它用div替代。
嵌套列表怎么写才不会让屏幕阅读器失效
纯<ul><ul></ul></ul>结构没有语义层级，屏幕阅读器无法识别“子菜单属于哪个父项”，也无法正确 announce 层级关系。
正确做法是保持原生嵌套：每个子ul必须是某个li的直接子元素，且该li需包含触发控件（如button）并用aria-expanded标明状态。
动态更新列表项时怎么防止结构错乱
调用element.innerHTML = htmlString不是“替换整个li”，而是清空内容后插入新HTML。如果htmlString以<li class="workout">开头，就会嵌套进原有li里，形成<li>
<li>...</li>这种非法结构。
关键判断：目标元素本身是什么标签，你就只往里面塞它的子内容，不要重复包裹同级标签。
怎么快速发现嵌套是否合规
靠肉眼检查容易漏掉交叉闭合或隐式修复，真正有效的是工具链验证。
W3C Markup Validation Service能报出Element ul not allowed as child of element ul这类明确错误；VS Code配ESLint+HTMLHint插件可在编辑时标红；Chrome开发者工具的Elements面板右键“Edit as HTML”后保存，再对比原始源码，常会暴露浏览器自动补全的痕迹。
真实项目里最常被忽略的，不是怎么写对，而是改完HTML后没验证渲染后的实际DOM结构。很多“样式不起作用”问题，根源是浏览器早就悄悄重写了你的HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
