产品网站设计武汉百度推广seo
文章目录
- 一、HTML列表
- 二、列表的应用
- 1、无序列表
- 2、有序列表
- 3、自定义列表
- 三、总结
一、HTML列表
html的列表有三种，一种是无序列表，一种是有序列表，还有一种为自定义列表。
二、列表的应用
1、无序列表
<ul> <li>
无序列表：无序列表基础版 主要使用<ul>标签
和<li>标签无序列表表示只是列表而已，
没有什么顺序之分它的展现形式是由<ul>标签包裹着<li>标签：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>
结果为：
2、有序列表
<ol> <li>
有序列表：简单的有序列表 由<ol>标签包裹着<li>标签组成
在网页上显示的时候会有1，2，3，4这样的数字图标显示，
表示为有顺序的显示：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ol><li>1</li><li>2</li><li>3</li></ol>
</body>
</html>
结果为：
3、自定义列表
自定义列表：简单的自定义列表 由<dl>标签包裹着
<dt>和<dd>标签组成
dl为声明列表，而dt一般为小标题，dd则为内容
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><dl><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd></dl>
</body>
</html>
结果为：
三、总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| ul | 无序列表 | 里面只能包含li，没有顺序，使用比较多，li里面可以包含任何标签 |
| ol | 有序列表 | 里面只能包含li,有序，使用相对较少。li里面可以包含任何标签 |
| dl | 自定义列表 | 里面只能包含 dt 和 dd。dt和dd里面都可以放任何标签 |