0

0

如何在HTML中创建有序列表?OL和LI标签组合使用教程。

雪夜

雪夜

发布时间:2025-10-08 17:18:01

|

488人浏览过

|

来源于php中文网

原创

使用和标签可创建有序列表,自动添加数字编号,支持自定义起始数(start属性)和编号类型(type属性),还可嵌套多层列表用于步骤说明或层级内容展示。

如何在html中创建有序列表?ol和li标签组合使用教程。

在HTML中创建有序列表非常简单,只需要使用

  1. 标签组合即可。有序列表会自动为每一项添加数字编号,适合用于步骤说明、排名或任何需要顺序展示的内容。

    使用OL和LI标签的基本语法

      代表“ordered list”,用来定义整个有序列表的容器。
    1. 代表“list item”,表示列表中的每一项。

      基本结构如下:


          
      1. 第一项内容

      2.   
      3. 第二项内容

      4.   
      5. 第三项内容

      浏览器会将其显示为带数字前缀的列表:

      立即学习前端免费学习笔记(深入)”;

      1. 第一项内容
      2. 第二项内容
      3. 第三项内容

      自定义列表起始编号和类型

      你可以通过start属性设置列表从哪个数字开始。


          
      1. 第五步操作

      2.   
      3. 第六步操作

      这样列表将从数字5开始编号。

      扣子编程
      扣子编程

      扣子推出的AI编程开发工具

      下载

      使用type属性可以更改编号样式:

      • type="1":阿拉伯数字(默认)
      • type="A":大写英文字母
      • type="a":小写英文字母
      • type="I":大写罗马数字
      • type="i":小写罗马数字

      示例:


          
      1. 选项一

      2.   
      3. 选项二

      嵌套有序列表

      你可以在一个

    2. 中再包含另一个
        ,实现多层结构。


            
        1. 主步骤一
              

                  
          1. 子步骤 a

          2.       
          3. 子步骤 b

          4.     

            

        2.   
        3. 主步骤二

        这种结构常用于详细的操作指南或层级分明的信息展示。

        基本上就这些。掌握

        1. 的用法后,就能清晰地组织有顺序的内容,让网页信息更易读。不复杂但容易忽略细节,比如嵌套时的缩进和样式控制,建议结合CSS进一步美化显示效果。

        2. 相关文章

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

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

          下载

          相关标签:

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

          热门AI工具

          更多
          DeepSeek
          DeepSeek

          幻方量化公司旗下的开源大模型平台

          豆包大模型
          豆包大模型

          字节跳动自主研发的一系列大型语言模型

          通义千问
          通义千问

          阿里巴巴推出的全能AI助手

          腾讯元宝
          腾讯元宝

          腾讯混元平台推出的AI助手

          文心一言
          文心一言

          文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

          讯飞写作
          讯飞写作

          基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

          即梦AI
          即梦AI

          一站式AI创作平台,免费AI图片和视频生成。

          ChatGPT
          ChatGPT

          最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

          相关专题

          更多
          li是什么元素
          li是什么元素

          li是HTML标记语言中的一个元素,用于创建列表。li代表列表项,它是ul或ol的子元素,li标签的作用是定义列表中的每个项目。本专题为大家li元素相关的各种文章、以及下载和课程。

          419

          2023.08.03

          俄罗斯Yandex引擎入口
          俄罗斯Yandex引擎入口

          2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

          177

          2026.01.28

          包子漫画在线官方入口大全
          包子漫画在线官方入口大全

          本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

          35

          2026.01.28

          ao3中文版官网地址大全
          ao3中文版官网地址大全

          AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

          79

          2026.01.28

          php怎么写接口教程
          php怎么写接口教程

          本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

          2

          2026.01.28

          php中文乱码如何解决
          php中文乱码如何解决

          本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

          4

          2026.01.28

          Java 消息队列与异步架构实战
          Java 消息队列与异步架构实战

          本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

          8

          2026.01.28

          Python 自然语言处理(NLP)基础与实战
          Python 自然语言处理(NLP)基础与实战

          本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

          24

          2026.01.27

          拼多多赚钱的5种方法 拼多多赚钱的5种方法
          拼多多赚钱的5种方法 拼多多赚钱的5种方法

          在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

          122

          2026.01.26

          热门下载

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

          精品课程

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

          共46课时 | 3万人学习

          AngularJS教程
          AngularJS教程

          共24课时 | 3.1万人学习

          CSS教程
          CSS教程

          共754课时 | 24.6万人学习

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

          Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号