必须用显式包裹每项内容，和不可直接包含文本；语义上按顺序关系选标签，CSS控制样式优于HTML的type属性，嵌套需注意padding重置问题。
直接用 <ul></ul> 或 <ol></ol> 就能插入列表，但选错标签、漏写 <li>、或依赖过时的 type 属性，后续会卡在样式、JS 获取节点、屏幕阅读器播报上。
必须用 <li> 包每一条内容，不能直接往 <ul></ul> 里塞文本
常见错误是这样写：
<ul> 苹果 香蕉 橙子 </ul>
这是无效 HTML —— 浏览器可能容错渲染，但 DOM 中不会生成 <li> 节点，document.querySelectorAll('li') 拿不到任何结果。正确写法必须显式包裹：
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
-
<li>是唯一合法的直接子元素，其他标签（如<p></p>、<div>）虽可嵌套在 <code><li>内，但不能替代它 - HTML5 不允许省略
- 漏闭合
<li>容易导致嵌套错乱，比如子<ul></ul>被当成上一条的文本内容 - 该用
<ol></ol>的场景：步骤说明、法律条款、搜索结果排名、安装流程 - 该用
<ul></ul>的场景：导航菜单、产品特性并列项、标签云、友情链接 -
start和reversed属性可用，但别依赖type="A"控制字母序号 —— 它不支持 CSS 伪元素扩展，且部分旧浏览器兼容性差
<ol></ol> 不是“要编号才用”，而是“内容有内在顺序才用”
很多人只看视觉效果：想显示数字就用 <ol></ol>，想显示圆点就用 <ul></ul>。这会导致语义污染 —— 屏幕阅读器会把“热门城市：北京、上海、广州”读成“第1项、第2项、第3项”，而它们之间根本没先后关系。
立即学习“前端免费学习笔记（深入）”；
CSS 控制样式比 HTML 的 type 属性靠谱得多
type 属性（如 <ol type="a"></ol>）是 HTML4 遗留方案，现代项目应统一走 CSS：
ol {
list-style-type: lower-alpha;
}
ul {
list-style-type: square;
}
-
list-style-type支持更多值：disc、circle、square、decimal、lower-roman等，且可分别控制ul和ol - 要彻底自定义（比如用箭头、emoji 或 SVG 图标），先设
list-style: none，再用li::before { content: "→ "; } - 慎用
list-style-position: inside—— 换行后第二行文字容易和前缀不对齐，尤其在响应式布局中
嵌套列表时，缩进失效通常不是 list-style 的问题
写完嵌套后发现子列表没缩进？大概率是全局 CSS 重置了 padding-left，比如：
ul, ol {
padding-left: 0;
}
浏览器默认给 <ul></ul> 和 <ol></ol> 设了 padding-left: 40px，一旦被清掉，嵌套就塌了。
- 优先检查父级列表的
padding是否被覆盖，而不是反复调list-style-type - 三层以上嵌套会显著降低可维护性和可访问性，屏幕阅读器对深度嵌套支持不稳定
- 如果子项是解释性内容（如“支付方式 → 支付宝：支持花呗”），更适合改用
<dl></dl>，而非强行嵌套<ul></ul>
