08 # 列表标签

简介: 08 # 列表标签

说明

网道HTML 教程学习笔记


1、<ol>


标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。

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


效果如下:

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



2、u

标签内部可以嵌套

标签或

标签,形成多级列表。

<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



3、该标签有以下属性:

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

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


效果如下:

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



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

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


效果如下:

5. 列表项 A
6. 列表项 B
7. 列表项 C


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

a:小写字母

A:大写字母

i:小写罗马数字

I:大写罗马数字

1:整数(默认值)

I,大写罗马数字为例


<ol type="I">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>


效果如下:

I. 列表项 A
 II. 列表项 B
III. 列表项 C


如果在这个基础上添加 start 属性:

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


效果如下:列表会从大写罗马数字 V 开始

V.列表项 A
 VI.列表项 B
VII.列表项 C




2、<ul>

标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。

列表项的顺序无意义时,采用这个标签。

标签内部可以嵌套

,形成多级列表。



3、li


表示列表项,用在  或  容器之中。


有序列表

之中,

1.  有一个 value 属性,定义当前列表项的编号,后面列表项会从这个值开始编号。

比如:

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



4、,,

标签是一个块级元素,表示一组术语的列表(description list)。


标签:术语名(description term)

标签:术语解释(description detail)

常用来定义词汇表

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>
  <dt>Memory</dt>
  <dd>内存</dd>
  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>



和  都是块级元素

默认会在  下方缩进显示。

CPU
  中央处理器
Memory
  内存
Hard Disk
  硬盘



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

<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>
  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>


上面代码里:A 和 B 有共同的解释 C,而 D 有两个解释 E 和 F。

目录
相关文章
|
6月前
|
Kubernetes Perl 容器
k8s标签
k8s标签
|
6月前
|
移动开发 安全 搜索推荐
H5新增标签
H5新增标签
54 0
|
5月前
|
Python
if标签
【6月更文挑战第29天】if标签。
44 5
|
6月前
with标签
with标签
41 2
|
6月前
|
Python
for...in...标签
for...in...标签。
27 1
|
6月前
|
移动开发 HTML5
基本标签
基本标签
50 2
|
移动开发
常用的不常见标签
常用的不常见标签
55 1
|
移动开发 前端开发 JavaScript
HTML+CSS常用的标签总结
HTML+CSS常用的标签总结
115 0
HTML教程6——列表标签
无序列表用<ul>标签表示,无序列表的每一项前默认都是用圆点标识,<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆),square(实心正方形),<ul>标签中只能有<li>标签,<li>标签的元素代表列表每一行的内容,<ul>标签中可以允许有任意个<li>标签。
HTML教程6——列表标签