列表标签

By | 十一月 2, 2019

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

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

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

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

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

1. <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开始编号。

2.<ul>

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

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

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

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

3.<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。

4.<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

文章来源: 网道

作者开源在GitHub: https://github.com/wangdoc/html-tutorial
采用知识共享 署名-相同方式共享 3.0协议

除非注明,否则均为日常生活博客原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.mezgy.com/425.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

有人回复时邮件通知我