《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 06.列表标签

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1列表的概念02无序列表03有序列表04HTML5页面交互标签目录contents05定义列表PART1列表的概念问题1：什么是列表？问题2：列表标签有几种？分别是哪些？列表是HTML中用于显示一系列相关或排序项目的元素。列表特点：整齐、整洁、有序列

表列表的分类列表分为：无序列表、有序列表和定义列表三大类无序列表有序列表定义列表PART2无序列表无序列表ul（重点）1.无序列表的各个列表项之间没有顺序级别之分，是并列的；2.<ul></ul>中只能嵌套<li></li>，不允许在<ul></ul>里放置其他的标签；3.<li></li>可以放置所有的元素（标签）。基本语法格式如下：<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

......

</ul>无序列表中type属性的常用值有三个，它们呈现的效果不同:type属性值列表项目符号备注none不显示项目符号HTML5不支持建议使用CSSdisc（默认值）●circle○square■无序列表ul（重点）任务实践（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建文件401.html（2）根据提供的新闻列表素材，制作成品，如图4.1.1所示（3）练习<ul>的<li>中的插入图片和文字等其他标签（4）运用style="list-style：none；"可以去掉Li前面的小圆点（5）设置图片和文字对齐，可以在图片标签里设置对齐方式，style="vertical-align：middle"。任务1新闻列表页的制作PART3有序列表有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义基本语法格式如下：有序列表用法与无序列表大致相同

但是实际工作中，较少用ol,一般都使用ul<ol>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

......

</ol>有序列表ol（掌握）对于有序列表元素，浏览器会从１开始自动对有序条目进行编号如需要使用其他类型的编号，可运用<ol>标签的type属性如需要从指定的编号上累计编号，可运用<ol>标签的start属性属性属性值描述type1(默认)列表项目符号显示为：“1.”、“2.”、“3.”...a或A列表项目符号显示为：“a.”、“b.”、“c.”...或“A.”、“B.”、“C.”...i或I列表项目符号显示为：“i.”、“ii.”、“iii.”...或“I.”、“II.”、“III.”...start数字用于指定全部列表项目符号的起始值reversed（无）用于降序排列列表项有序列表样式属性有序列表应用PART4HTML5页面交互标签标题是可见的，用户点击标题时，会显示出折叠的内容。给<details>标签添加open属性时，details中的内容开启时不折叠显示。<details>标签和<summary>标签<details>标签用来供用户开启关闭的交互式控件，任何形式的内容都能被放在<details>标签里边。<details>标签与<summary>标签配合使用可以为details定义标题。特点：<details>标签和<summary>标签未添加open属性添加open属性后代码<details><summary>折叠列表</summary><ul><li>列表1</li><li>列表2</li><li>...</li></ul></details><detailsopen><summary>折叠列表</summary><ul><li>列表1</li><li>列表2</li><li>...</li></ul></details>运行效果

下载进度：<progressvalue="22"max="100"></progress><progress>标签<progress>标签用来显示某个任务完成得进度得指示器一般用于表示进度条一般结合js使用有动画效果属性值描述maxnumber规定需要完成的值valuenumber规定进程的当前值<meter>标签<meter>标签定义已知范围或分数值内得标量测量特点:属性值描述highnumber规定被界定为高的极值的范围lownumber规定被界定为低的极值的范围maxnumber规定范围的最大值minnumber规定范围的最小值optimumnumber规定度量的最优值valuenumber必需。规定度量的当前值进度条默认是绿色如果超出极值范围那么颜色，进度条会变成黄色下载进度：<metervalue="2"min="0"max="10"></meter><metervalue="0.6">60%</meter><metervalue="8.5"max="10"high="8"></meter><metervalue="3"max="10"low="5"></meter><metervalue="7"max="10"high="8"low="5"optimum="7"></meter><meter>标签代码演示<progress>标签1.用于显示一项任务的完成进度，表现为一个进度条，用于表示动态的进度变化。最大值可能在元素显示时是不确定的；例如，上传文件到服务器的时间、播放一段音乐的时间等，这些任务的时间上限可以是确定或不确定的‌..2.最小值可以是0，而最大值可能在任务开始时是不确定的；3.表示动态的进度，其值会随着任务的进行而改变，通常与JavaScript一起使用，实现动态的进度更新和动画效果‌。<meter>标签1.用于显示已知范围的标量值或分数值，它表示静态的度量，通常用于展示某种度量或测量结果；如温度、速度等。它的最小值和最大值必须是确定的，且这个范围是固定的，不会发生变化‌...2.最小值和最大值必须是确定的数值，且这个范围在元素创建时就已经设定，不会改变；3.表示的是静态的度量，其值在页面加载时就已经确定，不会随时间改变。<meter>标签和<progress>标签区别任务实践（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建文件402.html（2）根据提供的新闻点击排行，制作成品，如图所示任务2新闻排行榜PART5定义列表定义列表dl（理解）定义列表常用于对术语或名词进行解释和描述定义列表的列表项前没有任何项目符号其基本语法见右：<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.<dl></dl>里面只能包含<dd>和<dt>；2.<dd>和<dt>没有个数的限制，一般是一个<dt>对应多个<dd>进行说明。任务实践（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建文件403.html（2）制作助农电商网底部列表，如图所示任务3页脚部分列表的嵌套应用<h2>古茗</h2><ul><li>奶茶

<!--有序列表的嵌套--><ol><li>大叔奶茶</li><li>招牌奶茶</li><li>珍珠奶茶</li></ol></li><li>茶

<!--无序列表的嵌套--><ul><li>绿茶</li><li>红茶</li></ul></li></ul>任务实践要求：参考本书目录，梳理模块二知识点运用列表知识点，编写代码任务4列表综合运用无序列表嵌套有序列表列表中使用率最多的是？A.无序列表 B.有序列表