<ul>里放<div>会导致屏幕阅读器读不出列表，因为<ul>只允许直接嵌套<li>，其他标签会被浏览器静默移出，使<ul>变为空列表、丢失语义和样式，屏幕阅读器仅播报“列表，0项”。
为什么里放会让屏幕阅读器“读不出列表”因为
的语义是“无序列表”，浏览器和辅助技术只认它直接包裹- ——
<div>不是合法子元素，解析器会把它踢出<ul>，变成同级节点。结果就是<ul>空着，屏幕阅读器扫到它时只说“列表，0项”，后面那个<code><div class="item">被当成普通段落读，完全丢失列表上下文。<ul><li>
<code><ul></ul>必须且只能直接包含<li>，其他任何标签（包括<div>、<code><section></section>、<span></span>）都会触发静默移出 - 移出后的
<div>失去所有列表相关默认样式（项目符号、缩进、垂直间距），也拿不到<code>ul li这类选择器的样式 - 语音朗读时，不会播报“第1项”“第2项”，也不会在切换列表项时提供导航提示（如“向下箭头进入下一项”）
如何用W3C Validator快速定位非法列表嵌套
别靠肉眼数标签，W3C校验器能精准指出哪一行违反了内容模型。粘贴HTML片段到validator.w3.org，选“Validate by Input”，它会直接报错：Element div not allowed as child of element ul。
- 优先修第一条错误——后续很多Warning（比如
End tag ul seen, but there were open elements）往往是连锁反应
- 如果用了框架（Vue/React），右键页面 → “查看网页源代码”，复制那段静态HTML来校验，别校验JS生成的动态DOM
- 校验前删掉内联
<script></script>和<style></style>块，避免干扰结构判断
替换方案：保留语义又支持复杂子结构的写法
想在列表项里塞容器、按钮或图标？不用<div>硬塞，改用语义合规的组合。例如把<code><div class="item">换成<code><li class="item">，再用<div>包内部内容。<pre class="brush:php;toolbar:false;"><!-- ❌ 错误 -->
<ul>
<div class="item"><p>标题</p><button>操作</button></div>
</ul>
<p><!-- ✅ 正确 -->
<ul>
<li class="item">
<div>
<p>标题</p>
<button>操作</button>
</div>
</li>
</ul></pre><ul><li>
<code><li>是flow content容器，允许嵌套任意块级或行内元素，包括<div>、<code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<button></button>
- 这样既保持
ul > li的语义链，屏幕阅读器能正确播报“列表，2项”，每项也能读出完整内容
- CSS仍可用
ul li.item精确控制，不依赖脆弱的ul + div.item兄弟选择器
验证修复是否生效的三个实操动作
改完别急着提交，用这三步确认屏幕阅读器真能读对：
立即学习“前端免费学习笔记（深入）”；
- 打开Chrome DevTools → Elements面板，确认
<ul></ul>下面只有<li>节点，没有灰色/半透明的孤立<div><li>执行<code>document.querySelectorAll('ul > *')，返回结果应全是<li>，不能有<div>或<code><span></span> - 用NVDA或VoiceOver开启朗读模式，听是否播报“列表，共X项”，然后逐项移动光标时是否提示“第Y项”
真正难的不是写对标签，而是意识到：你写的<ul><div>和屏幕阅读器实际拿到的DOM，从来就不是同一个东西。修复嵌套不是为了“让页面看起来正常”，而是为了让结构本身可被机器准确理解。</div></ul>
因为
- 的语义是“无序列表”，浏览器和辅助技术只认它直接包裹
- ——
<div>不是合法子元素，解析器会把它踢出<ul>，变成同级节点。结果就是<ul>空着，屏幕阅读器扫到它时只说“列表，0项”，后面那个<code><div class="item">被当成普通段落读，完全丢失列表上下文。<ul><li> <code><ul></ul>必须且只能直接包含<li>，其他任何标签（包括<div>、<code><section></section>、<span></span>）都会触发静默移出 - 移出后的
<div>失去所有列表相关默认样式（项目符号、缩进、垂直间距），也拿不到<code>ul li这类选择器的样式 - 语音朗读时，不会播报“第1项”“第2项”，也不会在切换列表项时提供导航提示（如“向下箭头进入下一项”）
- 优先修第一条错误——后续很多Warning（比如
End tag ul seen, but there were open elements）往往是连锁反应 - 如果用了框架（Vue/React），右键页面 → “查看网页源代码”，复制那段静态HTML来校验，别校验JS生成的动态DOM
- 校验前删掉内联
<script></script>和<style></style>块，避免干扰结构判断 - 这样既保持
ul > li的语义链，屏幕阅读器能正确播报“列表，2项”，每项也能读出完整内容 - CSS仍可用
ul li.item精确控制，不依赖脆弱的ul + div.item兄弟选择器 - 打开Chrome DevTools → Elements面板，确认
<ul></ul>下面只有<li>节点，没有灰色/半透明的孤立<div><li>执行<code>document.querySelectorAll('ul > *')，返回结果应全是<li>，不能有<div>或<code><span></span> - 用NVDA或VoiceOver开启朗读模式，听是否播报“列表，共X项”，然后逐项移动光标时是否提示“第Y项”
如何用W3C Validator快速定位非法列表嵌套
别靠肉眼数标签，W3C校验器能精准指出哪一行违反了内容模型。粘贴HTML片段到validator.w3.org，选“Validate by Input”，它会直接报错：Element div not allowed as child of element ul。
替换方案：保留语义又支持复杂子结构的写法
想在列表项里塞容器、按钮或图标？不用<div>硬塞，改用语义合规的组合。例如把<code><div class="item">换成<code><li class="item">，再用<div>包内部内容。<pre class="brush:php;toolbar:false;"><!-- ❌ 错误 -->
<ul>
<div class="item"><p>标题</p><button>操作</button></div>
</ul>
<p><!-- ✅ 正确 -->
<ul>
<li class="item">
<div>
<p>标题</p>
<button>操作</button>
</div>
</li>
</ul></pre><ul><li>
<code><li>是flow content容器，允许嵌套任意块级或行内元素，包括<div>、<code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<button></button>
验证修复是否生效的三个实操动作
改完别急着提交，用这三步确认屏幕阅读器真能读对：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对标签，而是意识到：你写的<ul><div>和屏幕阅读器实际拿到的DOM，从来就不是同一个东西。修复嵌套不是为了“让页面看起来正常”，而是为了让结构本身可被机器准确理解。</div></ul>
