ul 和 ol 的基本用法区别在哪
根本区别不在样式，而在语义：ul 表示项目之间无顺序依赖，ol 表示项目存在明确的先后、步骤或优先级关系。浏览器默认渲染时，ul 用圆点，ol 用数字，但这只是表象；搜索引擎和屏幕阅读器会据此理解内容结构。
常见错误是把操作步骤写成 ul，比如“安装三步”用了无序列表，这会让辅助技术用户丢失关键顺序信息。
正确写法只需确保：每个列表项都用 li 包裹，且 li 必须直接嵌套在 ul 或 ol 内——不能跳层，比如 ul > div > li 是无效 HTML，可能被浏览器自动修正或导致样式错乱。
如何控制 ol 的起始编号和计数方式
ol 默认从 1 开始，但实际场景常需自定义：比如续接上一列表、从 0 开始编号、或改用字母/罗马数字。这些靠原生属性就能解决，无需 CSS。
立即学习“前端免费学习笔记（深入）”；
-
start属性设起始数字，如<ol start="5">→ 5, 6, 7 -
type控制编号类型：type="a"（小写字母）、type="I"（大写罗马）、type="1"（默认数字） - 多个
ol连续出现时，不要手动设start来“续号”，应使用 CSS 的counter-reset/counter-increment更可靠 -
type在嵌套列表中会自动降级（外层1，内层默认a），但不可依赖——不同浏览器行为不一致，显式声明更稳妥
ul 和 ol 嵌套时的常见结构陷阱
嵌套本身合法，但容易写出语义混乱或渲染异常的结构。最典型的是把导航菜单写成 ul > li > ul > li 却忽略可访问性支持。
必须注意：
- 嵌套的子列表必须仍放在父
li内部，不能脱离——ul > li > ul正确，ul > li后跟独立ul是扁平结构，不是嵌套 - 屏幕阅读器对多层
ol的层级提示较弱，若步骤中含子步骤，建议用标题（h3）+ 段落替代深层嵌套，语义更清晰 - 移动端点击区域小：纯靠缩进区分层级不够，需配合 CSS 增加左 padding 或 icon 视觉提示，否则用户难识别父子关系
为什么有时列表项不显示符号或编号
表面看是“没显示”，实际多为三类原因：CSS 覆盖、HTML 结构错误、或浏览器解析容错失败。
排查顺序建议：
- 检查是否写了
list-style: none或list-style-type: none—— 这是最常见原因，尤其在重置样式（reset.css）或组件库中 - 确认
li是否被设了display: block以外的值（如flex），某些 display 值会隐式禁用列表标记 - 查看开发者工具的“Computed”面板，确认
list-style-type计算值是否为none或空字符串 - 避免在
li上直接设float或绝对定位——老式布局写法易导致标记消失，现代应改用 flex/grid
真正难调试的是 HTML 解析问题：比如 ul 内混入了 p 或 div，浏览器会自动闭合 ul，后续 li 变成孤儿节点，既不参与列表计数，也不受列表样式影响。
