教案
序号：4
授课日期
课时数
4
章节名称
任务5页面交互标签、层次语义标签和全局属性
教学内容
重点
页面交互标签、层次语义标签。
难点
页面交互标签的使用。
教学目的与要求
掌握全局属性的应用方法。
教学方法
与手段
教师采用任务驱动法，使用教学PPT辅助授课。
教师操作演示，学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题，通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
（任务5结构标签和分组标签
5.1页面交互标签、5.2层次语义标签：time标签）
实操任务目标发布
制作“书评网”页面
图4-SEQ图\*ARABIC\r11“书评网”网页
图4-SEQ图\*ARABIC2单击“新书速递”栏目时的效果
图4-SEQ图\*ARABIC3单击“销售榜单”栏目时的效果
强化训练——制作“面试应答技巧”网页
图4-SEQ图\*ARABIC4“面试应答技巧”网页
图4-SEQ图\*ARABIC5单击分标题时的效果
准备知识介绍
页面交互标签
details标签和summary标签
details标签：details标签用于描述文档或文档某个部分的细节。
summary标签：与details标签配合使用，作为details的第一个子元素，用于定义details标题。标题是可见的，当用户单击标题时，会显示或隐藏details标签中的其他内容。
子任务：
图4-SEQ图\*ARABIC6单击标题时的效果
progress标签
progress标签：用于定义运行中的任务进度（进程）。
progress标签的属性：
子任务：
图4-SEQ图\*ARABIC7progress标签的使用
meter标签
meter标签：定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。
meter标签的属性：
子任务：
图4-SEQ图\*ARABIC8meter标签的使用
层次语义标签
time标签
time标签：用于定义时间或日期，它不会在浏览器中呈现任何效果，但是该元素能以机器可读的方式对日期和时间进行编码，主要给机器识别，这样用户可以将事件提醒添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
time标签的属性：
子任务：
图4-SEQ图\*ARABIC9time标签的使用
第二学时
（任务5结构标签和分组标签
5.2层次语义标签：mark标签、cite标签，5.3全局属性）
层次语义标签
mark标签
mark标签：定义带有记号的文本，它可实现高亮显示某些字符，以引起用户的注意。
子任务：
图4-SEQ图\*ARABIC10mark标签的使用
cite标签
cite标签：用于定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
人名不属于作品的标题。
cite标签定义的文本将以斜体显示。
图4-SEQ图\*ARABIC11cite标签的使用
全局属性
draggable属性
draggable属性：规定元素是否可拖动。
false：默认值，表示该元素选中之后不可以进行拖动操作。
true：表示该元素选中之后可以进行拖动操作。
子任务：
图4-SEQ图\*ARABIC12draggable属性的使用
hidden属性
hidden属性：规定元素是否可见。
false：默认值，表示该元素显示。
true：表示该元素被隐藏。
子任务：
图4-SEQ图\*ARABIC13hidden属性的使用
spellcheck属性
spellcheck属性：规定是否对元素的输入内容进行拼写和语法检查。
false：不检测拼写和语法。
true：默认值，检测拼写和语法。
图4-SEQ图\*ARABIC14spellcheck属性的使用
contenteditable属性
contenteditable属性：规定是否可以编辑元素的内容，前提是该元素必须是可获得鼠标焦点且不是只读的。
false：默认值，表示内容不可编辑。
true：表示内容可编辑。
图4-SEQ图\*ARABIC15contenteditable属性的使用
第三学时
实战演练——制作“书评网”网页
案例描述：设计并制作书评网页面，网页效果如下，网页中间的热门书籍图片呈现滚动显示效果。
图4-SEQ图\*A