ul的直接子元素只能是li，其他标签会导致HTML验证错误；li内可嵌套任意合法内容，嵌套列表须置于li内部以保障语义、可访问性及CSS有效性。

ul里只能直接放li，其他标签放进去会触发HTML验证错误

浏览器虽然会“容错渲染”，但ul的子元素规范只允许是li。如果你写了<ul> <h3>标题</h3> <li>项1</li> </ul>，W3C校验器会报错，且部分无障碍工具或爬虫可能跳过非标准结构。

• ul → 必须只包含 li（直接子元素）
• li → 可以嵌套任意合法HTML内容，比如 p、div、ul、a 甚至另一个 ol
• 常见误写：ul > span、ul > div、ul > h2 —— 这些都违反HTML5语法

嵌套列表必须在li内部展开，不能平级写两个ul

想实现“菜单→子菜单”这种结构，必须把第二个ul放在某个li标签内部，而不是跟父ul并列。否则语义断裂，CSS定位和键盘导航都会出问题。

• ✅ 正确：<li>一级项<ul><li>二级项</li></ul> </li>
• ❌ 错误：<ul><li>一级项</li></ul> <ul><li>被当成新列表了</li></ul>
• 嵌套层级没有硬性限制，但超过3层容易影响可访问性和维护性

li不是“内容容器”，而是“列表项边界标记”

很多人把li当

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

用，塞一堆块级元素却不加语义约束。其实li的核心作用是定义一个“可被编号/符号化/聚焦/朗读”的独立条目单位。

• 屏幕阅读器会把每个li作为单独播报单元，中间换行、缩进、焦点停顿都依赖它
• 如果用li包裹整段说明文字+按钮+图片，应考虑是否该拆成多个li，或改用dl（定义列表）
• CSS中li:first-child这类选择器生效的前提，是li确实处于语义正确的层级位置

ul/li结构对SEO和可访问性的影响常被低估

搜索引擎和辅助技术依赖HTML语义推断内容重要性。一个没套li的ul，或把导航链接全塞进一个li里，会让机器无法识别“这是n个独立导航项”。

立即学习“前端免费学习笔记（深入）”；

• 搜索爬虫可能忽略无li包裹的ul内容，或降权处理
• 键盘用户按Tab键时，焦点跳转逻辑依赖li的独立性；若多个链接挤在一个li里，只能获得一次焦点
• 移动端双指滑动读屏时，每个li是一次语音播报单元 —— 冗长的li会导致用户跳过关键信息

真正难的不是写对标签，而是判断“这里到底该不该用ul/li”。比如纯图标导航、时间轴、卡片网格，表面像列表，但语义上可能更适合nav+button、section+time或article。语义一旦错位，后续所有样式、交互、无障碍补救都会变重。