首页 > 其他分享 >10. HTML-- 列表标签:<ul><ol><dl>

10. HTML-- 列表标签:<ul><ol><dl>

时间:2022-09-29 15:37:34浏览次数:46  
标签:10 序列表 -- 标签 无序 列表 HTML 使用

1. 前言

HTML 列表(List)可以将若干条相关的内容整理起来,让内容看起来更加有条理。在列表内您可以放置​​文本、图像、链接等,也可以在一个列表中定义另一个列表(列表嵌套)。

HTML 为我们提供了三种不同形式的列表:

  • 有序列表,使用 <ol> + <li> 标签
  • 无序列表,使用 <ul> + <li> 标签
  • 定义列表,使用 <dl> + <dt> + <dd> 标签

2. 有序列表

在 HTML 中, <ol> 标签用来表示有序列表。有序列表之间的内容有先后顺序之分,例如菜谱中的一系列步骤,这些步骤需要按顺序完成,这时就可以使用有序列表。

我们来看一个简单的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <p>煮米饭的步骤:</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
</body>
</html>

在浏览器中运行效果如图所示:

HTML有序列表演示
图1:HTML 有序列表演示


有序列表需要使用 <ol> 和 <li> 标签:

  • <ol> 是 order list 的简称,表示有序列表,它可以为列表的每一项进行编号,默认从数字 1 开始。
  • <li> 是 list item 的简称,表示列表的每一项,<ol> 中有多少个 <li> 就表示有多少条内容。列表项中可以包含文本、图片、链接等,甚至还可以是另外一个列表。


注意,<ol> 一般和 <li> 配合使用,不会单独出现,而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。

3. 无序列表

HTML 使用 <ul> 标签来表示无序列表。无序列表和有序列表类似,都是使用 <li> 标签来表示列表的每一项,但是无序列表之间的内容没有顺序。例如,早饭的种类不需要表明顺序,这时就可以使用无序列表。

我们来看一个简单的例子:

标签:10,序列表,--,标签,无序,列表,HTML,使用
From: https://www.cnblogs.com/jiajunling/p/16741739.html

相关文章

  • Vmware 安装使用记录
    关于VMware是常用的一款虚拟机软件,但是让人头疼的是这是一款商业软件,虽然网上可以搜到一些注册码,就怕某天被养肥了让人宰了,所以一直像找些替代产品,但是也没有......
  • 互联网医院系统源码的发展趋势||数字医疗搭建
    疫情当下,为了缓解患者就医难的问题,有很多医院建立了互联网医院。不但可以利用图文,视频等方式为患者提供咨询类的医疗服务,也可以线上诊断,开处方,检查检验,结合线上线下安排进一......
  • 教师节,感恩人生路上遇到的每一位老师!
    十年树木,百年树人。今天是2021年9月10日,农历八月初四,我们迎来了第三十七个教师节。教师,是人类灵魂的工程师,更是无比光荣自豪的职业。但“教师”不仅有荣光,背后更多的是诸多......
  • 【Python程序剖析】tdxExp2.py
    代码:1#encoding=utf-82importre34#readfile5dic={}6pattern="([0-9]{6})\s+([\u4e00-\u9fa5]+)"7withopen(r'C:\new_tdx\T0002\export\20220918......
  • 关于ios手机上拉和下拉到底部和顶部的橡皮筋问题
    之前遇到一个问题,就是写了一个正常的移动端首页,底部是导航,上面的是内容,在安卓手机是页面滑动到底部的时候,不会再滑动的,但是问题就出现在ios手机中。页面正常布局是,导航是p......
  • React+hook+ts+ant design封装一个input和select搜索的组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • nginx 配置静态网页
    nginx配置静态网页进入配置文件/etc/nginx/conf.d/default.conf配置的时候小伙伴们一定要记得先备份一份文件,这样方便后续出错恢复!server{  listen   端口号;......
  • 448 找到所有数组中消失的数字
      方法1:1counter=set(nums)2N=len(nums)3res=[]4foriinrange(1,N+1):5ifinotincounter:6res.append(i)7returnres方法2:原......
  • 如何快速地学习新技术
    如何快速地学习新技术笔记于韩顺平的教学视频:如何学习Golang更高效分为5个步骤:新技术源于需求解决需求了解新技术快速入门案例深入学习技术新技术源于需求项目......
  • # 安卓中实现分页加载方案总结(一)——基于SmartRefreshLayout
    安卓中实现分页加载方案总结(一)——基于SmartRefreshLayout背景项目中多场景使用到了列表分页加载的操作,比如消息列表,先总结一下基于SmartRefreshLayout的分页加载方案。......