html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

最安全做法是手动在最后一个后、前插入完整新步骤，确保结构闭合、语义正确；动态添加则用appendchild()到节点，编号自动连续，无需改start。

直接往 <ol></ol> 里追加一个 <li> 就行，但顺序、闭合和语义必须对齐，否则编号错乱或可访问性受损。

如何在现有 <ol></ol> 末尾插入新 <li>

最安全的做法是手动在最后一个 之后、 之前插入新项：

• 必须显式写出完整的 <li>新步骤</li>，不能只写文本或漏掉闭合标签
• 不要把 <div>、<code><p></p> 等块级元素直接塞进 <ol></ol> 和 <li> 之间——HTML 规范只允许 <li> 作为直接子元素
• 如果用 JS 动态添加，确保调用 appendChild() 或 insertAdjacentHTML() 到正确的 <ol></ol> 节点上，而不是父容器

start 属性要不要改？

默认情况下，浏览器会自动按位置递增编号（第 5 个 <li> 就是 “5.”），start 属性仅在你需要跳过编号或重置起点时才用：

• 新增项后编号仍连续 → 不用动 start
• 想让新项从 “10” 开始（比如原列表只显示前 9 步，后续另起）→ 加 start="10" 到 <ol></ol> 标签上
• start 是整数，不支持字母或罗马数字；要换格式请用 CSS 的 list-style-type

为什么新增后编号变成 “1.” 或重复？

常见原因不是浏览器 bug，而是结构污染：

• <ol>步骤一<li>步骤二</li> </ol> → 第一个“步骤一”没包 <li>，被当成文本渲染，<li> 从第二个开始计数，结果是 “1. 步骤二”
• 嵌套了未闭合的 <li>，比如 <li>主项<ol><li>子项</li></ol> </li> 缺了
→ 浏览器自动补全逻辑可能把后续所有 <li> 都归入该子项，导致外层编号中断
• CSS 中写了 list-style: none 但忘了恢复，或用了 display: flex 包裹 <ol></ol> → 列表样式失效，只剩内容无编号

真正麻烦的不是加一项，而是加完之后屏幕阅读器读不出序号、JS 用 document.querySelectorAll('ol li') 拿到的数量和 DOM 实际不一致——这种问题往往藏在嵌套过深或标签未闭合的角落里。