标签原生支持自动编号，浏览器默认将其识别为有序列表并渲染数字，无需JS或CSS；关键在于严格嵌套为直接子元素，禁用或文字直出，确保语义正确与无障碍可用。

不难，

和

两个标签就能跑起来，根本不用 JS、不用框架，浏览器原生支持自动编号。

为什么直接写

就能编号？

因为

是语义化标签，浏览器默认把它理解为“有顺序的条目集合”，所以自动加数字、渲染编号。这不是 CSS 效果，而是 HTML 规范层面的行为。

• 只要嵌套正确——
  里只放
• ，别塞
  或文字直出，编号就稳
• 漏闭合
或 ，浏览器通常会容错补全，但 DOM 结构可能错乱，后续 JS 选中或无障碍读取容易出问题
• 里可以放心放链接、图片、甚至另一个
  或
  （但必须包在
• 里）

type 和 start 属性到底能不能用？

能用，但别依赖它们做关键逻辑。这两个属性是 HTML 原生支持的，比如

会让编号从 “C” 开始、用大写字母，但实际效果很受限：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• type 只支持 "1"（默认）、"A"、"a"、"I"、"i" 五种，IE 和部分 Android WebView 对 "I" 会 fallback 成数字
• start="5" 在嵌套列表里不会自动延续父级序号，跨区块（如分页步骤）时很难对齐
• 如果和 CSS 的 list-style-type 同时设，CSS 会覆盖 HTML 属性，容易白配

想彻底自定义编号样式，该怎么做？

优先用 CSS 控制，而不是硬改 HTML 属性。三步到位：

• 先清掉默认：给
  加 list-style: none 和 padding-left: 0，否则编号消失但缩进还在
• 再用伪元素接管：给
• 设 counter-increment，再用 ::before 注入内容，比如 content: "Step " counter(item) ". "
• 注意 list-style-position: outside（默认）比 inside 更稳，后者遇上换行容易让文字顶到编号下方

最常被忽略的一点：编号是否“正确”，不取决于它看起来像不像 1.2.3，而取决于结构是否合法——

必须只含

，且每个

都得闭合。其他所有美化、交互、嵌套，都是在这根骨架上长出来的。骨架歪了，后面全得打补丁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！