用<ol>和<ul>分别创建有序、无序列表，内部用<li>包裹项并必须显式闭合；编号起始用start属性，符号样式统一用CSS的list-style-type或::before控制，避免省略</li>导致解析错乱。
怎么用 HTML 写有序和无序列表
直接用 <ol> 和 <ul> 标签，里面套 <li>。别手抖写成 <ul><li>...</ul> 却漏了闭合 </li> —— 浏览器虽会容错，但嵌套深了容易错位。
-
<ol>生成数字编号（1. 2. 3.），默认从 1 开始；想改起始值用start属性，比如<ol start="5"> -
<ul>生成圆点（•），不支持原生换符号，要换实心方块或短横线得靠 CSS 的list-style-type - 列表项里可以嵌套其他块级元素（如
<p>、<div>），但别把<div>直接塞进<ul>和<li>之间——HTML 规范不认，解析结果不可控
为什么 <li> 闭合标签不能省
虽然 HTML5 允许省略部分 </li>（遇到下一个 <li> 或父标签结束时自动闭合），但实际开发中极易出问题：比如在 <li> 里写了 <div class="detail">... 却没闭合 </li>，浏览器可能把整个 <div> 判为 <li> 外内容，样式和 JS 选中全乱。
- Vue/React 等框架模板里，省略
</li>会导致编译报错或渲染异常 - 用 JS 动态操作
document.querySelectorAll('li')时，未显式闭合的节点可能被跳过或重复计算 - 校验工具（如 W3C Validator）会警告，CI 流水线若配置严格校验会直接失败
用 CSS 控制列表样式比改标签更灵活
想让无序列表用短横线、有序列表用字母，别去折腾 <ol type="a"> 这种老旧属性（它只支持 a/A/i/I/1，且不兼容自定义符号），直接上 CSS。
-
list-style-type: disc | circle | square | none控制<ul>符号 -
list-style-type: decimal | lower-alpha | upper-roman控制<ol>编号格式 - 真要自定义图标（比如箭头、emoji），用
list-style: none清掉默认，再用::before+content插入 - 注意：
list-style-position: inside会让文字换行后对齐缩进，outside（默认）则保持项目符号在左侧固定位置
常见错误现象和定位方法
列表显示错乱、编号跳变、JS 获取不到预期数量，八成不是浏览器 bug，而是结构或属性误用。
立即学习“前端免费学习笔记（深入）”；
- 现象：
<ol><li>A<li>B</ol>显示为 “1. A 1. B” → 原因：第二个<li>没写开标签，浏览器当成文本渲染了 - 现象：CSS 设置了
list-style-type: lower-greek但没生效 → 原因：该值仅在部分旧浏览器支持，现代项目应避免，改用lower-alpha或伪元素 - 现象：嵌套列表子项缩进过大 → 检查是否意外继承了外层
padding-left，list-style本身不控制缩进，靠padding或margin - 现象：用
display: flex包裹<ul>后项目符号消失 → 因为list-style在 flex 容器下不触发，需给<li>单独加display: list-item
list-style 是不是被某层父元素重置掉了。 
