第3章 使用列表与表格布局-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）
2023-03-22
|
39页
|
210人阅读
|
1人下载
教辅
内容正文：
第3章 使用列表与表格布局
3.1 添加列表
3.2 添加表格
了解列表与表格的特点
掌握列表与表格的相关标签
掌握列表与表格的使用
学 习 目 标
LEARNING OBJECTIVES
初心至善 匠心育人
引言
在一个网页中经常能看到列表与表格的应用，网页中漂亮的导航、整齐规范的文章标题列表和图片列表等都是利用列表实现的。列表是指容器里面装载着结构、样式一致的文字或图表的一种形式。列表可分为有序列表、无序列表和自定义列表3种类型，它最大的特点就是整齐、规范、有序。表格是由行和列组成的结构化数据集（表格数据），用于呈现数据或统计信息，可以让数据的显示变得十分规整有条理，可读性好。列表与表格的应用可以使图片和文字变得整洁有序，数据也变得“有模有样”，整个网页更加规整。本章将重点学习列表与表格的制作，走进一个“整齐有序”的世界。
初心至善 匠心育人
3.1
添加列表
有序列表
案例—新闻列表
自定义列表
无序列表
目录
Contents
初心至善 匠心育人
3.1 添加列表
3.1.1 有序列表
有序列表（ordered-list）是有排列顺序的列表，其各个列表项按照一定的顺序排列。
<ol>
<li>列表项目1</li>
<li>列表项目2</li>
......
</ol>
语法格式
有序列表使用<ol>标签定义，包含一个或多个<li>列表项目，其语法格式如下。
初心至善 匠心育人
<ol>有序列表标签常用属性的具体说明如表所示。
标签属性
属性 说明
type 定义列表中使用的标记类型，属性值有1（默认值）、A、a、I、i
start 定义有序列表的起始值，属性值为数值，表示自第N个数开始
reversed 定义列表顺序为降序
3.1 添加列表
3.1.1 有序列表
初心至善 匠心育人
3.1 添加列表
3.1.1 有序列表
利用有序列表将诗句降序排列显示。
演示说明
<body>
<!-- 有序列表将诗句从第10个小写罗马数字开始，降序排列 -->
<ol type="i" start="10" reversed>
<li>空山新雨后，天气晚来秋。</li>
<li>明月松间照，清泉石上流。</li>
<li>竹喧归浣女，莲动下渔舟。</li>
<li>随意春芳歇，王孙自可留。</li>
</ol>
</body>
代码 例3.1
运行效果
初心至善 匠心育人
3.1 添加列表
3.1.2 无序列表
无序列表（unordered-listt）各个列表项之间没有顺序级别之分，是并列的。
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
......
</ul>
语法格式
无序列表使用<ul>标签定义，包含一个或多个<li>列表项目，其语法格式如下。
初心至善 匠心育人
<ul>无序列表标签通常使用type属性修改其显示效果
type属性
属性取值 显示效果
disc（默认值） 实心小黑圆点
circle 空心小圆点
square 实心小黑方块
3.1 添加列表
3.1.2 无序列表
初心至善 匠心育人
3.1 添加列表
3.1.2 无序列表
利用无序列表列举本章学习目标。
演示说明
<body>
<!-- 设置无序列表的项目列表标记为实心小黑方块 -->
<ul type="square">
<p>本章学习目标</p>
<li>认识和了解列表与表格的用法</li>
<li>掌握利用列表制作彩色导航栏</li>
<li>掌握利用表格语义化制作成绩表</li>
<li>掌握制作简单个人简历表</li>
</ul>
</body>
代码 例3.2
运行效果
初心至善 匠心育人
3.1 添加列表
3.1.3 自定义列表
自定义列表（definition-list）常用于对术语或名词进行解释和描述，列表项的前面没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1描述一</dd>
<dd>名词1描述二</dd>
语法格式
自定义列表使用<dl>标签定义，列表中并列嵌套<dt>标签和<dd>标签，<dt>标签用于定义名词，<dd>标签用于定义名词的解释和描述。一对<dt></dt>里可以对应多对<dd></dd>，即一个名词可有多个解释和描述。自定义列表的语法格式如下。
<dt>名词2</dt>
<dd>名词2描述一</dd>
<dd>名词2描述二</dd>
</dl>
初心至善 匠心育人
3.1 添加列表
3.1.3 自定义列表
利用自定义列表定义HTML、CSS和JavaScr
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。