ul只能直接包含li元素，其他内容必须包裹在li内；嵌套ul需置于li标签内部；li内须含可聚焦的a标签以保障可访问性；list-style-type仅对display:list-item生效。
ul 和 li，别学理论——浏览器一刷新就暴露问题，这才是最有效的入门方式。
ul 里塞文字或 div 就“消失”？那是结构违法了
常见错误：<ul>首页</ul> 或 <ul><div>关于我们</div></ul>。浏览器不会报错，但会自动把“首页”或 <div> 移到 <code><ul></ul> 外面，导致语义断裂、屏幕阅读器读不到、CSS 选择器失效。
-
ul的合法子元素只有li，其他一律不许直接嵌套 - 哪怕只有一行字，也必须包在
<li>...</li>里 - 需要加图标、链接、按钮？可以往
li里面塞，但容器不能换 - 验证是否合规：用 W3C HTML Validator 扫一遍，提示 “
ulmust only containlielements” 就是踩坑了
嵌套二级菜单时 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></nav>包裹顶层ul明确语义边界 - 别用
<div> 包 <code>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默认值）有效。- 横向排列菜单时，优先改
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></a>标签，哪怕是href="#"占位 - 如果用 JavaScript 控制跳转，也要给
<a></a>加role="button"和tabindex="0"保证可访问性 - 别用
li模拟按钮或下拉触发器却不配链接——那是语义滥用，影响 SEO 和辅助技术识别
- 横向排列菜单时，优先改
