6、HTML中的列表（ul, ol, dl）
2022-05-23 本文已影响0人
小黄不头秃
一、列表的种类
在HTML中一共有三种列表的表现形式，我们来看一下，具体长什么样子呢？
1.无序列表（ul）
- 使用ul标签来创建
- 使用li标签来创建列表项
2.有序列表(ol)
- 使用ol标签来创建
- 使用li标签来创建列表项
3.定义列表(dl)
- 使用dl来创建一个定义列表
- 使用dt来定义其中的内容
- 使用dd进行解释说明
列表之间可以嵌套
二、代码
(1) 使用方法
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构1</li>
<li>表现2</li>
<li>行为3</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构用来表示网页的结构，结构用来表示规定哪里是标题，哪里是强调</dd>
<dt>表现</dt>
<dd>表现用来表示网页的渲染，表现可以告诉浏览器怎么显示</dd>
</dl>
(2) 测试一下(可以先想想看是什么效果呢？)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构1</li>
<li>表现2</li>
<li>行为3</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构用来表示网页的结构，结构用来表示规定哪里是标题，哪里是强调</dd>
<dt>表现</dt>
<dd>表现用来表示网页的渲染，表现可以告诉浏览器怎么显示</dd>
</dl>
<ul>
<li>ONE
<ul>
<li>one
<ul>
<li>1.null</li>
<li>2.null</li>
<li>3.null</li>
</ul>
</li>
<li>two
<ul>
<li>1.null</li>
<li>2.null</li>
<li>3.null</li>
</ul>
</li>
<li>three
<ul>
<li>1.null</li>
<li>2.null</li>
<li>3.null</li>
</ul>
</li>
</ul>
</li>
<li>TWO
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
</UL>
</li>
</ul>
</body>
</html>
7.jpg
