ul只能直接包含li元素，其他内容必须包裹在li内；嵌套ul需置于li标签内部；li内须含可聚焦的a标签以保障可访问性；list-style-type仅对display:list-item生效。

直接上手写 ul 和 li，别学理论——浏览器一刷新就暴露问题，这才是最有效的入门方式。

ul 里塞文字或 div 就“消失”？那是结构违法了

常见错误：<ul>首页</ul> 或 <ul><div>关于我们</div></ul>。浏览器不会报错，但会自动把“首页”或 <div> 移到 <ul> 外面，导致语义断裂、屏幕阅读器读不到、CSS 选择器失效。

• ul 的合法子元素只有 li，其他一律不许直接嵌套
• 哪怕只有一行字，也必须包在 <li>...</li> 里
• 需要加图标、链接、按钮？可以往 li 里面塞，但容器不能换
• 验证是否合规：用 W3C HTML Validator 扫一遍，提示 “ul must only contain li elements” 就是踩坑了

嵌套二级菜单时 ul 放错位置，整个导航就垮了

典型误写：<ul><li>首页</li><ul><li>关于我们</li></ul></ul>。子 ul 没被任何 li 包住，浏览器当成独立列表渲染，CSS 定位和键盘 Tab 焦点全乱。

• 子 ul 必须完整写在某个 li 的起始与闭合标签之间，例如：<li>产品<ul><li>Web</li><li>App</li></ul></li>
• 嵌套超过 3 层后，部分屏幕阅读器可能无法准确播报父子关系，建议用 <nav> 包裹顶层 ul 明确语义边界
• 别用 <div> 包 li 再放子 ul —— 会破坏 li:hover > ul 这类关键选择器

list-style-type 不生效？先看 li 的 display 值

很多人写 li { list-style-type: square; } 没反应，不是 CSS 写错，而是 li 的 display 被改成了 flex、inline-block 或 grid。list-style-type 只对 display: list-item（li 默认值）有效。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 横向排列菜单时，优先改 ul 为 display: flex，保持 li 的 display: list-item 不变
• 如果非得改 li 的 display，记得手动补：list-style-position: inside 和 vertical-align: top 对齐符号
• 想彻底清空符号和缩进，用 list-style: none，比 list-style-type: none 更彻底（它还清掉 list-style-image 和位置）
• ul type="square" 这种写法 HTML5 已废弃，现代浏览器忽略，验证器会警告

做导航菜单时，光有 li 是不够的

li 本身没有交互能力，也不是可聚焦元素。只写 <ul><li>首页</li></ul>，键盘用户按 Tab 键根本跳不到，屏幕阅读器也不会把它当导航项读。

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

• 每个 li 内必须包含一个带 href 的 <a> 标签，哪怕是 href="#" 占位
• 如果用 JavaScript 控制跳转，也要给 <a> 加 role="button" 和 tabindex="0" 保证可访问性
• 别用 li 模拟按钮或下拉触发器却不配链接——那是语义滥用，影响 SEO 和辅助技术识别

真正难的不是记住语法，是写出能被屏幕阅读器准确播报、键盘用户顺畅操作、不同浏览器一致渲染的列表。这些细节藏在嵌套层级、display 值、a 标签缺失和验证器警告里，而不是教程第一行代码中。