模块2任务2.4：使用列表组织课程大纲（课件）-《网页设计与制作》（电子工业出版社）上好课

任务2.4：使用列表组织课程大纲 网页设计与制作 模块2 HTML网页元素 ①理解有序列表、无序列表、定义列表的作用与适用场景 ②掌握三类列表的语法格式与start、type属性 ①能按信息类型正确选择列表类型并完成代码编写 ②能制作“课程大纲”页面，做到标签成对闭合、嵌套正确 ①养成标签成对书写、代码规范缩进的编码习惯 ②树立“结构清晰、便于阅读”的网页信息组织意识 知识目标 能力目标 素养目标 01 01 01 学习目标 目录 Part 01 教学导入 Part 02 知识讲授 Part 03 师生互动 Part 04 课堂练习 Part 05 课堂小结 教学导入：从“一段文字”到“三类列表” 思考一下：两个页面怎样快速找到信息？ 教学导入：从“一段文字”到“三类列表” 思考一下：两个页面怎样快速找到信息？ “全部堆进段落”方案 把课程模块、课程资源、技术术语全部写进<p>段落，文字连成一片。 结果往往是：找不到重点、看不出层次，读者只能一行一行地读下去。 “使用列表组织”方案 把有顺序的内容排成有序列表、并列的内容排成无序列表、需要解释的术语排成定义列表。 信息各归其位、层次分明，一眼就能定位到目标内容。 教学导入：列表的启示——给信息分分类 💡 列表的智慧 聪明的做法是：先判断信息的类型——有先后顺序的排成有序列表，彼此并列的排成无序列表，需要解释的排成定义列表。 🚀 核心任务：制作课程大纲页面 本节课我们就用这三类列表，把“课程模块”“课程资源”“技术术语”三部分内容，组织成一个条理分明的课程大纲页面。 教学导入：迁移到网页世界 💡 列表的奇妙隐喻 在网页的世界里，一个课程网站就像一本教科书。而那些把信息一条条排开的列表标签，就是教科书的“目录页”。 我们把这些神奇的“目录”正式命名为： 列表标签 制作网页就像编写目录：先分清信息的类型，再选用对应的列表标签，页面自然条理分明。 🚀 本课目标：掌握三类列表的用法。 第一部分 有序列表 <ol> 知识讲授 知识讲授：什么是有序列表 什么是有序列表？ 💡核心定义 有序列表标签<ol>用于定义带有编号的有序列表，需要和列表项标签<li>配合使用，用来展示有先后顺序、不宜随意调换的信息。 按顺序排队 “有先后顺序的信息，就用有序列表” 知识讲授：什么是有序列表 知识讲授：有序列表的语法与属性 语法格式 <ol> <li>第一项</li> <li>第二项</li> </ol> start 属性 <ol start="n"> 重新定义编号的起始值，n 为重新定义的起始编号。 type 属性 <ol type="类型值"> 自定义编号样式，可取值 1、a、A、i、I。 默认显示效果 默认编号为 1,2,3…，列表项默认采用缩进形式显示。 知识讲授：有序列表的编号样式 type属性值 编号样式 type属性值 编号样式 1 阿拉伯数字（1,2,3,4…） a 小写英文字母（a,b,c,…） A 大写英文字母（A,B,C,…） I 大写罗马字母（I,II,III,IV,…） i 小写罗马字母（i,ii,iii,iv,…） 有序列表默认编号为 1,2,3…，可用 type 属性自定义编号样式。 例题分析 程序文本：有序列表 example07.html <ol> <li>大师兄孙悟空</li> <li>二师兄猪八戒</li> <li>三师弟沙和尚</li> </ol> <ol> <li type="1" value="1">第一名状元</li> <li type="a">第二名榜眼</li> <li type="I">第三名探花</li> </ol> 易错点深度剖析 <li> 必须写在 <ol> 内部 写在容器外面，浏览器无法正确编号。 标签必须成对闭合 <li> 写完要写 </li>，<ol> 写完要写 </ol>。 type 属性要写对位置 type 写在 <ol> 或 <li> 上才会生效。 例题分析 实践总结 type属性的作用 控制序号显示样式，每一个li单独设置type会改变当前这一项的编号样式。 type属性作用域 写在<li>标签内只作用在该标签。写在<ol>内，作用整个列表 value属性的作用 强制这一行序号起始数是多少 第二部分 知识讲授 无序列表 <ul> 知识讲授：什么是无序列表 什么是无序列表？ 💡核心定义 无序列表标签<ul>用于定义不带编号的无序列表，需要和列表项标签<li>配合使用，用来展示彼此并列、没有先后之分的信息。 彼此并列 “彼此并列的信息，就用无序列表” 知识讲授：无序列表的符号样式 type属性值 符号样式 type属性值 符号样式 disc 实心圆形 circle 空心圆形 square 方形 无序列表默认的项目符号是实心圆形，可用 type 属性自定义符号样式。 知识讲授：无序列表的语法与属性 语法格式 <ul> <li>第一项</li> <li>第二项</li> </ul> type 属性 <ul type="类型值"> 自定义项目符号，可取值 disc、circle、square。 默认符号样式 一级列表默认为实心圆 disc，嵌套的二级列表默认为空心圆 circle。 与 <ol> 的区别 两者都使用 <li> 标记列表项，区别只在于有没有编号。 例题分析：example08.html 页面核心功能 用 <ul type="square"> 排列“春、夏、秋、冬”，观察方形符号效果。 无序列表 type 属性 程序文本：无序列表 example08.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>无序列表</title> </head> <body> <ul type="square"> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ul> </body> </html> 例题分析：example08.html示例演示 页面核心功能 用 <ul type="square"> 排列“春、夏、秋、冬”，观察方形符号效果。 无序列表 type 属性 第三部分 定义列表 <dl> 知识讲授 知识讲授：什么是定义列表 什么是定义列表？ 💡核心定义 定义列表标签<dl>是用于进行词条定义的特殊列表，每个表项需要结合词条标签<dt>和定义标签<dd>，完成“名词—解释”的配对展示。 名词—解释 “要解释名词术语，就用定义列表” 知识讲授：定义列表的标签配对 语法格式 <dl> <dt>名词1</dt> <dd>名词1描述信息</dd> </dl> <dt> 词条标签 标记在每个词条的开头，相当于词典里被解释的“词条”。 <dd> 定义标签 标记在每个定义部分的开头，默认采用全文缩进形式显示。 配对关系 一个 <dt> 后面可以跟多个 <dd>，但 <dd> 不能写在 <dt> 前面。 例题分析 程序文本：定义列表 example09.html <dl> <dt>红色</dt> <dd>可见光谱中长波末端的颜色。</dd> <dd>是光的三原色和心理原色之一。</dd> <dd>代表着吉祥、喜庆、热烈、奔放。</dd> <dd>红色的补色是青色。</dd> </dl> 核心要点剖析 <dt> 与 <dd> 成对出现 一个 <dt> 后面可以跟多个 <dd>。 <dd> 默认全文缩进 解释内容自动缩进，层次一目了然。 顺序不能颠倒 必须先写 <dt>，再写 <dd>。 例题分析 核心要点剖析 <dt> 与 <dd> 成对出现 一个 <dt> 后面可以跟多个 <dd>。 <dd> 默认全文缩进 解释内容自动缩进，层次一目了然。 顺序不能颠倒 必须先写 <dt>，再写 <dd>。 例题分析 选用原则 有序选有序 并列选无序 解释选定义 知识讲授：三类列表的对比归纳 💡 选用依据 看信息有没有顺序：有顺序用 <ol>，相并列用 <ul>，要解释用 <dl>。先判断类型，再选标签。 🌟 类比记忆：词典 <dl> 是整本词典，<dt> 是一个个词条，<dd> 是词条后面的释义，三者缺一不可。 口诀：有顺序用<ol>，相并列用<ul>，要解释用<dl> 三类列表各司其职，页面自然条理分明。 课堂问答 概念题 有序列表和无序列表有什么区别？ 有序列表带编号，用于有先后顺序的信息；无序列表不带编号，用于并列的信息。 理解题 课程大纲里的“课程模块”能不能换成无序列表？为什么？ 不能。课程模块有先后学习顺序，调换后会影响学习路径，应当使用有序列表 <ol>。 辨析题 定义列表中 <dt> 和 <dd> 分别写什么？ <dt> 写词条，<dd> 写解释。顺序不能颠倒，必须先 <dt> 后 <dd>。 背诵记忆 有序列表 <ol> 💡 核心思想 <ol> 内写 <li>，默认编号 1,2,3…。 🌟 核心优势 start="n" 改起始编号 type 取 1、a、A、i、I 无序列表 <ul> 🧩 基本组成 <ul> 内写 <li>，默认符号为实心圆。 🚪 唯一入口 type 取 disc、circle、square 嵌套二级默认空心圆 定义列表 <dl> 📝 基本结构 <dl> 内写 <dt> 与 <dd>，配对展示。 ▶️ 显示特点 <dd> 默认全文缩进，一个 <dt> 可跟多个 <dd>。 练习题1：要让有序列表以大写罗马字母 I、II、III 编号，正确写法是（　） A. <ol type="1"> B. <ol type="I"> C. <ul type="I"> D. <ol start="I"> 答案：B 解析：type 属性用于自定义有序列表的编号样式，取值 I 表示大写罗马字母；start 只用于改变起始编号，取值应为数字。 课堂练习 练习题2：要把无序列表的项目符号改成空心圆形，正确的写法是（　） A. <ul type="disc"> B. <ul type="circle"> C. <ol type="circle"> D. <ul type="square"> 答案：B 解析：circle 表示空心圆形；disc 为实心圆形，square 为方形，且符号样式只用于无序列表 <ul>。 课堂练习 任务实施 【实操题】任务2-4.html 制作要求 1. 打开 VS Code，在 website 文件夹中新建“任务2-4.html”，先写出 HTML 文档骨架。 2. 用 <h1> 写标题“课程大纲”，并添加 <hr> 分隔线。 3. 用 <ol> 展示课程模块：HTML5网页基本元素、CSS3样式设计。 4. 用 <ul type="square"> 展示课程资源：课件下载、视频教程。 5. 用 <dl> 解释技术术语：<dt> 写术语，<dd> 写解释。 关键提示： 按照“先写外层容器、再写内部项、最后补闭合标签”的顺序书写。 任务实施 程序文本：任务2-4.html <!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>课程大纲</title> </head> <body> <h1 align="center">课程大纲</h1> <hr width="80%" color="#3366CC" size="2"/> <!-- 1.有序列表：课程模块 --> <ol> <li>HTML5网页基本元素</li> <li>CSS3样式设计</li> </ol> <!-- 2.无序列表：课程资源 --> <ul type="square"><li>课件下载</li><li>视频教程</li></ul> <!-- 3.定义列表：技术术语 --> <dl><dt>HTML</dt><dd>超文本标记语言。</dd></dl> </body></html> 由于页面篇幅限制，我并没有严格按照格式书写，大家书写的时候，注意文档格式，该换行换行，该缩进缩进。 课堂小结 有序列表与无序列表 核心作用：把有先后顺序的信息和彼此并列的信息分开呈现。 语法格式：<ol> 与 <ul> 内部都使用 <li> 标记列表项。 常用属性：start 改起始编号，type 改编号或符号样式。 定义列表 核心作用：完成“名词—解释”的配对展示，如术语表、常见问题解答。 语法格式：<dl> 内部用 <dt> 写词条，用 <dd> 写解释。 显示特点：<dd> 默认全文缩进，一个 <dt> 可跟多个 <dd>。 💡 核心总结：有顺序用<ol>，相并列用<ul>，要解释用<dl>。 作业布置： 1. 预习教材任务2.5“使用超链接完成页面跳转”。 2. 完善“任务2-4.html”：设置 type="I"、type="circle"，并嵌套一个无序列表，截图提交。 3. 新建“试一试2-4.html”：用 <dl> 解释 <img>、<a>、<p>，并设 start="5"。 课后任务 谢谢观看 THANKS 单击此处编辑母版标题样式 单击此处编辑母版副标题样式 EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn $