基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第4讲次 任务5 页面交互标签、层次语义标签和全局属性.docx
文件大小:3.53 MB
总页数:13 页
更新时间:2025-05-27
总字数:约2.43千字
文档摘要

教案

序号: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