HTML5+CSS3网页设计实战 教案 7.3 属性选择器

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.3掌握更多的CSS选择器该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）理解属性选择器概念。（2）掌握常见的5种属性选择器的写法。能力目标：（1）具备使用属性选择器对指定元素进行样式定义的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。属性选择器的应用属性选择器概念及应用场景。通过成语解析概念，然后借助案例强化选择器的写法。5种常见属性选择器的写法。通过相关案例的属性设置前后对比，让学生加强理解与认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习关系选择器包括后代、子元素、相邻兄弟、兄弟元素选择器，各有何特点？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入关系选择器是根据标签的结构关系来进行定义的，选择器书写的是标签本身或者是id、class名称。今天介绍的属性选择器，则是针对标签本身自带的属性来定义，相对关系选择器，属性选择器更加灵活，适用的范围也更广。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授7.3.2属性选择器属性选择器是CSS中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景：为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。属性选择器写法为[属性]，用法示例：a[href]{color:red;}/*只对有href属性的a元素应用样式*/知识点：属性选择器特点记忆关键词：有的放矢关键词解析：CSS属性选择器允许针对具有特定属性或属性值的元素来应用样式。通俗理解成针对具有特定“属性箭靶”的元素来“发射”样式规则的。☆思政讲解：作为学生，将“有的放矢”这一成语融入学习之中，可以帮助我们更加高效、有针对性地规划和管理自己的学习，以下是几个具体的实践方法：（1）设定明确的学习目标（2）制定个性化的学习计划（3）选择适合的学习资源和方法。常见的大部分用法如表7-1所示。写法作用范例[属性]选择所有具有指定属性的元素，不论其属性值为何。选择所有带有'type'属性的元素[type]{……}[属性="值"]选择属性值完全等于指定值的元素。选择href属性值完全等于指定URL的元素[href=""]{……}[属性^="值"]选择属性值以指定值开始的元素。选择href属性值以'https://'开始的元素[href^="https://"]{……}[属性$="值"]选择属性值以指定值结束的元素。选择href属性值以'.pdf'结束的元素[href$='.pdf']{……}[属性*="值"]选择属性值包含指定字符串的元素。选择title属性值包含'hello'字符串的元素[title*='hello']{……}表7-1属性选择器用法听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例3】敲入如图7-9所示代码，尝试属性选择器的作用。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分[属性]写法代码书写正确、规范，样式效果生效。20[属性="值"]写法代码书写正确、规范，样式效果生效。20[属性^="值"]写法代码书写正确、规范，样式效果生效。20[属性$="值"]写法代码书写正确、规范，样式效果生效。20[属性*="值"]写法代码书写正确、规范，样式效果生效。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1