ol是语义化有序列表标签，必须仅含li子元素；start和value只改视觉编号，不影响语义顺序或读屏播报；type属过时属性，推荐用css控制样式。
ol 是 HTML 中定义「有序列表」的标签，核心不是“带数字”，而是表达「条目之间存在不可交换的逻辑顺序」。它不等于“编号显示”，而是一种语义声明：浏览器、屏幕阅读器、搜索引擎都据此理解内容结构。
为什么ol必须只包含li？
HTML 规范强制规定：ol 的直接子元素只能是 li（以及 script、template 等极少数例外）。任何其他内容——比如纯文本、p、div——都会被浏览器忽略或错误修复。
常见现象：
-
<ol>第一步<p>第二步</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </ol>→ 编号消失，或“第一步”被移出列表 -
<ol>Hello World</ol>→ 页面什么也不显示（连文字都不见），且无控制台报错
正确写法只有一个模式：<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
start 和 value 到底改的是什么？
两者都只影响视觉编号，不改变 DOM 顺序、不重置计数逻辑、不影响屏幕阅读器播报（仍按“第1项、第2项”读）。
-
start="5"写在ol上：第一条li显示为 “5.”，后续自动 +1（6.、7.……） -
<li value="10">苹果</li>：仅该li显示为 “10.”，下一项仍为 “11.”（不是从 1 重新开始） -
start值必须是整数；start="-2"或start="3.5"会被忽略，退化为start="1" - IE11 及更早版本完全不支持
start，始终从 1 开始
type 属性现在还能用吗？
能用，但属于「遗留属性」：HTML5 已将其标记为过时（obsolete），不推荐在新项目中依赖它。
-
type="a"、type="I"等仍被主流浏览器支持，但 Safari 对type="I"（大写罗马数字）渲染不稳定 -
type只控制样式，不改变语义；无障碍技术仍按位置播报“第 X 项” - 真正需要灵活控制编号样式的场景，应优先用 CSS：
list-style-type: lower-greek、upper-roman等值更多、继承性更好、响应式更可控 -
type="1"是默认行为，显式写出来纯属冗余
最容易被忽略的点：把 ol 当作“只是想显示数字”的排版工具。一旦条目没有真实先后依赖（比如“产品优势”罗列），就该换用 ul ——否则语义污染会悄悄影响 SEO、自动化测试定位和读屏体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
