<ul>里直接写文字没反应，因浏览器只认<li>为合法子元素；正确写法是每个条目必须独立包裹在<li>中，子<ul>也必须嵌套在父<li>内部。
直接写 <ul> 或 <ol> 标签就能跑起来，但多数人卡在标签嵌套错误或样式“看不见”上——不是代码不生效，是浏览器根本没把它当列表解析。
为什么 <ul> 里直接写文字没反应？
浏览器只认 <li> 是合法子元素。<ul> 下面如果直接写“首页 产品 关于”，它会当成普通文本流处理，既不加圆点，也不参与语义结构。常见错误写法：
<ul>首页 产品 关于</ul>
正确写法必须每个条目独立包裹在 <li> 里：
<ul> <li>首页</li> <li>产品</li> <li>关于</li> </ul>
-
<li>不可省略闭合标签（XHTML 风格可自闭合，但 HTML5 不推荐） - 别用
<p>、<div>或纯文本替代<li> - 嵌套子列表时，子
<ul>必须放在某个<li>内部，不能挂在父<ul>下
<ol> 的 start 和 type 不是摆设
这两个属性直接影响编号逻辑，不是 CSS 装饰。比如：
立即学习“前端免费学习笔记（深入）”；
<ol start="5"> <li>第五步</li> <li>第六步</li> </ol>
会真实渲染为 “5. 第五步”、“6. 第六步”。type 大小写敏感：
-
type="a"→ a、b、c -
type="A"→ A、B、C -
type="i"→ i、ii、iii -
type="I"→ I、II、III
设 start="-1" 多数浏览器不支持，会 fallback 到 1；start="0" 显示 0，但旧版 IE 可能忽略。
CSS 清除列表默认样式时，list-style-type: none 不够
只设这个只会隐藏符号，<ul> 和 <ol> 默认带 padding-left: 40px，视觉上仍空一大块，常被误以为“样式没清掉”。真正干净的重置要两步：
ul, ol {
list-style-type: none;
padding-left: 0;
}
注意：list-style-image 在移动端 Safari 支持不稳定，优先用伪元素 + background 替代；用 background-image 时，务必加 background-repeat: no-repeat，否则图标会重复铺满。
嵌套列表时，<li> 是层级锚点，不是容器
很多人把 <li> 当成 <div> 乱塞内容，其实它是语义边界。子列表必须挂载在某个 <li> 内部，否则结构断裂。例如：
<ul>
<li>一级项
<ul>
<li>二级项</li>
</ul>
</li>
</ul>
如果漏掉外层 <li> 的闭合，或把子 <ul> 放在父 <ul> 同级，浏览器会自动纠错，但结果不可控——可能合并成一项，也可能错位缩进。嵌套超过三层时，可访问性与屏幕阅读器支持会明显下降。
