无序列表必须用包裹，有序列表必须用包裹；或内直接写文本而不套，浏览器不识别为列表项，仅作匿名文本渲染。
直接说结论：无序列表必须用 <ul></ul> 包裹 <li>，有序列表必须用 <ol></ol> 包裹 <li>；任何在 <ul></ul> 或 <ol></ol> 里直接写文本、不套 <li> 的写法，浏览器都不认作列表项。
为什么 <ul>首页产品关于</ul> 不显示项目符号？
因为 <ul></ul> 只接受 <li> 作为直接子元素。你写的那段文本被当成“匿名文本节点”，浏览器既不渲染项目符号，也不参与列表语义——它只是流式文本，和写在 <p></p> 里没区别。
- 正确写法只有一种：
<ul> <li>首页</li> <li>产品</li> <li>关于</li> </ul> - 嵌套也一样：子级
<ul></ul>必须放在某个<li>内部，比如<li>水果<ul><li>苹果</li></ul> </li> - 漏闭合
<ol></ol> 的 start 和 type 是真逻辑，不是装饰
它们改变的是浏览器内置计数器行为，不是换图标那么简单。
-
<ol start="5"><li>第五步</li></ol>真的从 5 开始编号，不是视觉欺骗 -
type="a"输出小写 a、b、c；type="A"才是 A、B、C；type="i"是 i、ii、iii，type="I"是 I、II、III —— 大小写敏感，混用会中断编号 -
start="-1"多数浏览器不支持，直接回退到 1；start="0"显示 0，但旧版 IE 可能忽略 - 嵌套
<ol></ol>时，子<ol></ol>的start独立计算，不会自动接续父级末尾
CSS 清除默认列表样式，list-style-type: none 不够
只设 list-style-type: none 会让符号消失，但 <ul></ul> 和 <ol></ol> 默认带 padding-left: 40px（各浏览器略有差异），视觉上仍空一大块，容易误判为“已清空”。
- 真正干净的重置要两步：
ul, ol { list-style-type: none; padding-left: 0; } - 用
background-image替换项目符号时，路径错或没加background-repeat: no-repeat，图标会横向重复铺满 - 移动端 Safari 对
list-style-image支持不稳定，建议改用伪元素 +background方案 - 注意：序号/符号是“画”在内容左侧的，不影响盒模型宽度；单独调
margin或padding时，它不包含符号占位空间
最常被忽略的点是：列表的语义边界在 <li>，不是容器标签。它不是用来“装内容”的 div，而是表示“这是一个独立条目”的语义锚点——哪怕里面只放一个链接或一段文字，也必须先有 <li>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
