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