当前位置:主页HTML 教程

7. 列表标签

文章来源:知付 更新时间:2022-05-28 23:24 热度:174

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

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

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

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

· 列表项 A
· 列表项 B
· 列表项 C
目录
 - <ol>

 - <ul>

 - <li>

 - <dl>,<dt>,<dd>

<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

分享到:

#免责声明#

版权声明:《 7. 列表标签 》为作者 知付 原创文章,转载请注明原文地址!
本站所有文章,如无特殊说明或标注,均为本站原创或整合发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本文地址:https://www.yoppunion.com/HTML%20%E6%95%99%E7%A8%8B/142.html
同类推荐
评论列表
签到

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

微信扫一扫打赏