HTML5+CSS3网页设计实战 教案 4.8 列表类标签- ol标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.8列表类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） ol标签的写法及应用。（2） 理解ol标签的使用场景，并与ul标签做对比。能力目标：具备编写排行榜列表的布局能力。素养目标：（1）通过资讯排行榜案例，引导学生关注社会热点问题，如数字鸿沟、网络安全、隐私保护等，培养他们的社会责任感。ol标签ol标签的写法及应用。通过与ul标签进行对比，强调ol标签的使用场景。li中嵌入span标签产生列表图标。通过演示多个网页中ol标签的应用场景来让学生明白ol的应用。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习列举ul标签的使用场景。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入有序列表用于表示项目按照特定顺序排列的列表。每个列表项前面通常有数字或字母，表示它们的顺序。以下常见的使用场景： 步骤说明——当需要向用户展示一系列步骤时，可以使用有序列表。例如，在教程或指南中，通过有序列表清晰地列出每个步骤，帮助用户按顺序完成操作。 排行榜——在需要展示排名或顺序的场景中，有序列表是一个很好的选择。例如，在游戏或体育网站上，可以使用有序列表来展示玩家的排名或比赛结果。 账单或发票——在电商或金融网站上，有序列表可用于展示账单或发票的详细信息。通过列出每个项目的名称、数量和价格等信息，帮助用户清晰地了解他们的消费情况。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.8.2ol标签<ol>标签是有序（序号）标签。此列表标签我们常常使用在文章标题列表、图片列表等有规律列表类内容排版布局。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例18】敲入下图的代码，完成小说的章节目录效果。【案例19】完成如图4-86所示的新闻排行榜（数字序号）。☆思政讲解：关注国内，国际时事，家事国事天下事，事事关心。时事新闻能够拓宽我们的视野，增强我们的社会责任感和全球意识。通过了解不同国家和地区的文化、政治和经济状况，我们可以更好地理解世界，有助于我们形成独立思考和判断的能力，更好地应对复杂多变的社会环境。（1）先编写HTML代码。（2）编写对应的CSS代码。（3）预览后，这也是原始的ol标签的外观。（4）在数字外层添加span标签。（5）编写对应的CSS代码（6）保存文件后预览。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10练习1使用快捷键快速按图敲入对应代码。20练习2H2标签及图标对应的代码正确输入，预览效果一致20Li嵌套span标签20Ul对应的css样式代码正确，预览效果基本一致。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）ol标签的写法及应用。（2）理解ol标签的使用场景，并与ul标签