2.5 列表-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）
2023-05-12
|
11页
|
232人阅读
|
2人下载
精品
内容正文：
单元2 HTML基础
2.5 列表
主要内容
CONTENTS
PART 01
有序列表
PART 03
定义列表
PART 02
无序列表
2
列表
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类
无序列表 ，使用<ol> + <li>标签
有序列表，使用<ul> + <li>标签
定义列表，使用<dl> + <dt> + <dd>标签
有序列表
在 HTML 中，<ol> 标签用来表示有序列表。有序列表之间的内容有先后顺序之分。
有序列表需要使用 <ol> 和 <li> 标签：
<ol>是 order list 的简称，表示有序列表，它可以为列表的每一项进行编号，默认从数字 1 开始。
<li>是 list item 的简称，表示列表的每一项，<ol> 中有多少个 <li> 就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。
<ol> 一般和 <li> 配合使用，不会单独出现，而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。
有序列表的特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
有序列表
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<p>关闭计算机流程：</p>
<ol>
<li>保存编辑的文档</li>
<li>关闭应用程序</li>
<li>关闭操作系统</li>
<li>切断电源</li>
</ol>
</body>
</html>
有序列表示例
【案例2.5.1】有序列表的使用
无序列表
HTML 使用 <ul> 标签来表示无序列表。无序列表和有序列表类似，都是使用 <li> 标签来表示列表的每一项，但是无序列表之间的内容没有顺序。
无序列表需要使用 <ul> 和 <li> 标签：
<ul> 是 unordered list 的简称，表示无序列表。
和 <ol> 中的 <li> 一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。
<ul> 一般和 <li> 配合使用，不会单独出现，而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签。
无序列表的特性
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
无序列表
<html>
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<p>关闭计算机流程：</p>
<ul>
<li>保存编辑的文档</li>
<li>关闭应用程序</li>
<li>关闭操作系统</li>
<li>切断电源</li>
</ul>
</body>
</html>
无序列表示例
【案例2.5.2】无序列表的使用
定义列表
在HTML中，<dl> 标签用于创建定义列表。
定义列表由“标题”（术语）和“描述”两部分组成，“描述”是对“标题”的解释和说明，“标题”是对“描述”的总结和提炼。
定义列表需要使用 <dl>、<dt> 和 <dd> 标签：
<dl> 是 definition list 的简称，表示定义列表。
<dt> 是 definition term 的简称，表示定义术语，也就是我们说的标题。
<dd> 是 definition description 的简称，表示定义描述 。
定义列表的特性
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
定义列表
<dl>
<dt>标题1<dt>
<dd>描述文本2<dd>
<dt>标题2<dt>
<dd>描述文本2<dd>
<dt>标题3<dt>
<dd>描述文本3<dd>
</dl>
定义列表示例
【案例2.5.3】定义列表的使用
三种列表对比
类型 说明 项目符号
无序列表 以<ul>标签来实现
以<li>标签表示列表项 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表 以<ol>标签来实现
以<li>标签表示列表项 有序列表ol-li一般用于显示带有顺序编号的特定场合
定义类表 以<dl>标签来实现
以<dt>标签定义列表项
以<dd>标签定义内容 定义列表一般适用于带有标题和标题解释性内容的场合
感谢观看
$
资源预览图
1
2
3
4
5
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。