首页 > 其他分享 >HTML-列表标签

HTML-列表标签

时间:2025-01-05 22:29:38浏览次数:10  
标签:序列表 标签 代码 列表 HTML 编号 属性

列表是一系列排列好的项目,主要分成两类:有序列表和无序列表。

有序列表是每个列表项前面有编号,呈现出顺序,就像下面这样。

1. 列表项 A
2. 列表项 B
3. 列表项 C

无序列表则是列表项前面没有编号,只有一个列表符号,默认是一个圆点。

· 列表项 A
· 列表项 B
· 列表项 C

<ol>

<ol>标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。

<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码会在列表项 A、B、C 前面,分别产生1、2、3的编号。

<ol>标签内部可以嵌套<ol>标签或<ul>标签,形成多级列表。

<ol>
  <li>列表项 A</li>
  <li>列表项 B
    <ol>
      <li>列表项 B1</li>
      <li>列表项 B2</li>
      <li>列表项 B3</li>
    </ol>
  </li>
  <li>列表项 C</li>
</ol>

上面代码中,一个有序列表内部嵌套了另一个有序列表,渲染结果如下。

1. 列表项 A
2. 列表项 B
  1. 列表项 B1
  2. 列表项 B2
  3. 列表项 B3
3. 列表项 C

该标签有以下属性。

(1)reversed

reversed属性产生倒序的数字列表。

<ol reversed>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中,列表项 A、B、C 前面,产生的编号是3、2、1。

(2)start

start属性的值是一个整数,表示数字列表的起始编号。

<ol start="5">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中,列表项 A、B、C 前面,产生的编号是5、6、7。

(3)type

type属性指定数字编号的样式。目前,浏览器支持以下样式。

  • a:小写字母
  • A:大写字母
  • i:小写罗马数字
  • I:大写罗马数字
  • 1:整数(默认值)
<ol type="a">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中,列表项 A、B、C 前面的编号,分别是英文小写字母a、b、c。

注意,即使编号是字母,start属性也依然使用整数。

<ol type="a" start="3">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中,type属性指定编号采用小写英文字母,start属性等于3,表示从c开始编号。

<ul>

<ul>标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。

<ul>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ul>

上面代码的渲染结果是,列表项 A、B、C 前面,分别产生一个实心小圆点,作为列表符号。

<ul>标签内部可以嵌套<ul><ol>,形成多级列表。

<li>

<li>表示列表项,用在<ol><ul>容器之中。

有序列表<ol>之中,<li>有一个value属性,定义当前列表项的编号,后面列表项会从这个值开始编号。

<ol>
  <li>列表项 A</li>
  <li value="4">列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中,value属性指定第二个列表项的编号是4,因此三个列表项的编号,分别为1、4、5。

<dl><dt><dd>

<dl>标签是一个块级元素,表示一组术语的列表(description list)。术语名(description term)由<dt>标签定义,术语解释(description detail)由<dd>标签定义。<dl>常用来定义词汇表。

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>

<dt><dd>都是块级元素,<dd>默认会在<dt>下方缩进显示。上面代码的默认渲染结果如下。

CPU
  中央处理器

Memory
  内存

Hard Disk
  硬盘

多个术语(<dt>)对应一个解释(<dd>),或者多个解释(<dd>)对应一个术语(<dt>),都是合法的。

<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>

  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>

上面代码中,AB有共同的解释C,而D有两个解释EF

标签:序列表,标签,代码,列表,HTML,编号,属性
From: https://blog.csdn.net/xinfanyyds/article/details/144952049

相关文章

  • HTML5 翻转动画(Flip Animation)详解
    HTML5翻转动画(FlipAnimation)详解翻转动画(FlipAnimation)是一种动态效果,使元素在Y轴或X轴上翻转,常用于卡片效果或展示详细信息。以下是翻转动画的详细介绍及实现示例。1.翻转动画的特点动态视觉效果:通过翻转效果使页面更具吸引力,增加交互感。信息展示:适合用于展示额外......
  • HTML5 滑动效果(Slide In/Out)详解
    HTML5滑动效果(SlideIn/Out)详解滑动效果(SlideIn/Out)是一种常见的动画效果,使元素从一侧滑入或滑出,增强页面的动态感和用户体验。以下是滑动效果的详细介绍及实现示例。1.滑动效果的特点动态视觉:通过滑动动画使界面更加生动,吸引用户注意。空间利用:可以有效地展示和隐藏......
  • MyBatis 一对一查询中的 `<association>` 标签配置详解
    MyBatis一对一查询中的<association>标签配置详解引言在使用MyBatis进行数据库操作时,一对一查询是一种常见的需求。尤其是在处理主表和从表之间的关联关系时,如何正确配置<association>标签成为了一个关键问题。本文将通过一个具体的案例,详细分析MyBatis中<associatio......
  • Mybatis 映射文件中,如果 A 标签通过 include 引用了 B 标签的内容,请问,B 标签能否定义
    在MyBatis的映射文件中,如果A标签通过 <include> 引用了B标签的内容,那么B标签必须定义在A标签的前面。这是因为MyBatis在解析XML文件时是按顺序进行的,它需要在解析到 <include> 标签时已经知道被引用的内容。示例假设我们有一个映射文件 UserMapper.xml,其......
  • Python 将html格式书签转为excel
    1.导出html格式书签2.对数据做处理提取<a></a>标签可以用vscode正则替换<a></a>标签的ICON属性ICON=".*"3.安装pythonpip替换成清华镜像4.描述问题生成代码importpandasaspdfrombs4importBeautifulSoupfromdatetimeimportdatetimeimportredef......
  • 使用js写一个方法对html进行压缩
    在前端开发中,压缩HTML通常意味着移除多余的空白字符、换行和注释,以减小文件大小并提高加载速度。以下是一个简单的JavaScript函数,用于压缩HTML字符串:functioncompressHTML(html){//移除多余的空白字符(包括空格、制表符和换行符)letcompressed=html.replace(/>\s+<......
  • 【爬虫逆向】HTML里面提取的JSON怎么解析不了?
    我们在开发爬虫的过程中,经常发现有一些网站,会直接把数据以JSON的形式,通过<script>标签放到页面源代码中。如下图所示:有时候请求URL拿到HTML的过程比较麻烦,有些同学习惯先把HTML复制到代码里面,先把解析的逻辑写好,然后再去开发请求HTML的代码。这个思路本身是没有什么问题的,于是......
  • vue中keep-alive从详情页返回列表页缓存,保持原滚动条位置
    项目需求:需要从商品列表页diamond中点击某一个商品进入商品详情页productDetail后,从详情页返回到列表页时需保持原来的滚动位置,并使用keep-alive进行组件缓存实现性能优化1、在路由中设置keepAlive属性默认为true,避免无法及时识别是否需要缓存{path:'/diamond',n......
  • ACL---访问控制列表---策略
    在路由器流量流入或者流出的接口上匹配流量,之后执行设定好的动作---permit(允许)deny(拒绝)1.访问控制:在路由器流量流入或者流出的接口上匹配流量,之后执行设定好的动作---permit(允许)deny(拒绝)2.抓取感兴趣流ACL--匹配规则:自上而下逐一匹配,一旦匹配上就不在向下匹配......
  • 设置谷歌浏览器打开新标签页
    谷歌浏览器打开新标签页是总是覆盖之前的标签页,对快速切换标签页带来一定的不便,接下来是如何设置在新标签页打开新页面。很多小伙伴找不到谷歌浏览器的打开新标签页的设置选项在哪里,我们需要打开谷歌浏览器的”Google应用“点击“搜索”点击浏览器右下角的“设置”选项......