讲师中心 微信公众号
AI工具推荐 视频效率加速

如何正确嵌套 HTML 有序列表以实现连续递增的十进制编号

胖明吖_6815

胖明吖_6815

发布时间:2026-01-11 19:13:02

|

685人浏览过

|

来源于php中文网

原创

如何正确嵌套 HTML 有序列表以实现连续递增的十进制编号

html 中嵌套 `

    ` 列表时,若将 `
      ` 直接置于 `
    ` 的 `
  • ` 外部(如兄弟元素),浏览器会将其视为多个独立列表,导致编号重置为 1;正确做法是将子 `
      ` 严格嵌套在父 `
    1. ` 内部,才能继承并延续序号。

      在 HTML 规范中,有序列表

        的编号连续性完全依赖于其 DOM 结构层级
      :只有当多个

    2. 元素属于同一个
        父容器时,编号才会自动递增(1 → 2 → 3…)。而一旦
          被错误地放在
        内但脱离
      • 上下文(例如紧随
      • 后作为同级标签),它就成为一个全新的、孤立的列表——无论 CSS 类名是否相同,编号都会从 1 重新开始。

        你原始代码的问题正在于此:

        Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
        Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

        实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。

        下载
        <ul class="a">
          <li>General Aviation (piston-driven engines)</li>
          <ol class="f"> <!-- ❌ 错误:此 ol 不在任何 li 内,是 ul 的直接子元素 -->
            <li>Single-Engine Aircraft</li>
          </ol>
          <ol class="f"> <!-- ❌ 同样错误:另一个独立 ol,编号再次从 1 开始 -->
            <li>Dual-Engine Aircraft</li>
          </ol>
        </ul>

        上述写法违反了 HTML 列表嵌套语义——

          和
          只能包含
        • (以及 <script>/<template> 等特殊元素),<strong>不能直接混排在父列表项之外。这不仅导致编号中断,还使 HTML 结构无效(W3C 验证失败)。<p>✅ 正确嵌套方式如下(关键原则:子列表必须是某一个 <li> 的<strong>内部内容):<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)”;<pre class="brush:php;toolbar:false;">&lt;ul class=&quot;a&quot;&gt; &lt;li&gt;General Aviation (piston-driven engines) &lt;!-- ✅ 正确:ol 是该 li 的子元素 --&gt; &lt;ol class=&quot;f&quot;&gt; &lt;li&gt;Single-Engine Aircraft&lt;/li&gt; &lt;ol class=&quot;u&quot;&gt; &lt;li&gt;Tail wheel&lt;/li&gt; &lt;li&gt;Tricycle&lt;/li&gt; &lt;/ol&gt; &lt;li&gt;Dual-Engine Aircraft&lt;/li&gt; &lt;!-- 编号自动变为 2 --&gt; &lt;ol class=&quot;t&quot;&gt; &lt;li&gt;Wing-mounted engines&lt;/li&gt; &lt;li&gt;Push-pull fuselage-mounted engines&lt;/li&gt; &lt;/ol&gt; &lt;/ol&gt; &lt;/li&gt; &lt;!-- li 闭合位置至关重要 --&gt; &lt;/ul&gt;</pre><p>? <strong>注意事项与最佳实践:<ul><li><strong>语义优先:避免使用过时的 <font> 标签(已废弃),改用 CSS 控制字体、颜色和大小(如 font-family: Arial; font-size: 2em; color: #add8e6;);</script>
        • CSS 类复用更安全:无需为每个
            单独定义 .f 类,可统一用 ol { list-style-type: decimal; },再通过嵌套选择器微调(如 ol ol { list-style-type: upper-roman; });
        • 验证结构:使用 W3C Markup Validator 检查 HTML 是否符合标准,及时发现非法嵌套;
        • 无障碍友好:正确嵌套确保屏幕阅读器能准确播报层级关系(如 “列表项 1,子列表,罗马数字一…”)。

        ? 总结:HTML 列表编号不是由 CSS 驱动,而是由 DOM 层级决定。要获得连续十进制编号,请始终确保所有

      • 属于同一个
          ,并将子列表(
            或
          )作为父
        • 的直接子元素嵌入——结构即逻辑,语义即功能。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

6541

2024.08.14

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

0

2026.11.05

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

0

2026.11.04

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

0

2026.11.04

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

0

2026.11.04

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

0

2026.11.04

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

0

2026.11.04

XORM框架零基础入门教程
XORM框架零基础入门教程

本专题梳理XORM框架的入门路径,从框架定位、依赖安装、连接数据库到跑通第一个增删改查示例,讲清Engine初始化、日志开启与项目目录规划,并对比GORM等同类ORM的差异,帮助Go开发者建立整体认知。

0

2026.11.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn