“列表”标签

列表是一种非常有用的数据排列方式，它以列表的形式来显示数据或段落、换行符、图片、链接及其他列表等内容。HTML中共有3种列表，分别是无序列表、有序列表和自定义列表。

列表最大的特点就是：整齐 、整洁、 有序。

 

无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的，项目符号由几个符号构成（默认为黑色小圆点）。

其基本语法格式如下：

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

......

</ul>

 1 <!--举个栗子！-->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8" />
 6 <title>Doument</title>
 7 </head>
 8 <body>
 9 <h3>水果：</h3>
10 <ul>
11 <li>苹果</li>
12 <li>香蕉</li>
13 <li>榴莲</li>
14 <li>橘子</li>
15 <li>西瓜</li>
16 </ul>
17 </body>
18 </html>

 

注意：

  1. ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的！
  2. li相当于一个容器，可以容纳所有元素。
  3. 无序列表会带有自己的样式属性（粗体圆点），想要更改，要使用CSS。

 

有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，项目符号主要是字母或数字。

基本语法格式如下：

<ol>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

......

</ol>

 1 <!--举个栗子！-->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8" />
 6 <title>Doument</title>
 7 </head>
 8 <body>
 9 <h3>水果：</h3>
10 <ol>
11 <li>苹果</li>
12 <li>香蕉</li>
13 <li>榴莲</li>
14 <li>橘子</li>
15 <li>西瓜</li>
16 </ol>
17 </body>
18 </html>​

 

 

所有特性基本与ul 一致。

注：有序列表的序号类型只有5种：大、小写英文字母，大、小写罗马字母及阿拉伯数字（默认）。

 

自定义列表

自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。

其基本语法如下：

<dl>

<dt>名词1</dt>

<dd>名词1解释1</dd>

<dd>名词1解释2</dd>

...

<dt>名词2</dt>

<dd>名词2解释1</dd>

<dd>名词2解释2</dd>

...

</dl>

 1 <!--举个栗子！-->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8" />
 6 <title>Doument</title>
 7 </head>
 8 <body>
 9 <dl>
10 <dt>苹果</dt>
11 <dd>苹果是蔷薇科苹果亚科苹果属植物。</dd>
12 <dd>苹果营养价值很高，富含矿物质和维生素，含钙量丰富，有助于代谢掉体内多余盐分。</dd>
13 <dt>香蕉</dt>
14 <dd>香蕉是芭蕉科芭蕉属植物。</dd>
15 <dd>香蕉含有多种微量元素和维生素，能帮助肌肉松弛，并具有一定的减肥功效。</dd>
16 <dt>榴莲</dt>
17 <dd>榴莲是一种锦葵目、木棉科巨型的热带常绿乔木。</dd>
18 <dd>榴莲被誉为“水果之王”。它的气味浓烈、爱之者赞其香，厌之者怨其臭。</dd>
19 <dt>橘子</dt>
20 <dd>橘子是芸香科柑橘属的一种水果。</dd>
21 <dd>橘子中的维生素A还能够增强人体在黑暗环境中的视力和治疗夜盲症。</dd>
22 <dt>西瓜</dt>
23 <dd>西瓜是一年生蔓生藤本。</dd> <dd>西瓜为夏季之水果，果肉味甜，能降温去暑。</dd>
24 </dl>
25 </body>
26 </html>

 

 

总结

posted @ 2020-12-01 16:03  _jun_jun  阅读(223)  评论(0)    收藏  举报