Web前端开发实例与实战第10 章 高级特性.pdfVIP

编写日期：授课日期：任课教师：

课程《Web前端开发实例与授课授课

名称实战》专业班级

授课授课

周次节次第10章2学时

章高级特性学时

1.了解语义元素。

知识

2.了解画布的作用。

教学

1.理解画布中绘制图形的原理。

目标能力2.能够绘制阴影。

素质提升学生的专业技能水平，引导学生自觉践行社会主义核心价值观。

教学

绘制渐变图形

重点

教学

使用路径方法绘制多种图形。

难点

教学

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

方法

教学多媒体、课件

用具

第10章高级特性

10.1HTML5文档结构

HTML5提供多种标签用于更好地表达HTML文档的结构和语义。同时，HTML5提供了专

门的属性支持元素的拖放效果，增加用户交互的类型。

教学

10.1.1文档结构元素

内容HTML5中定义了一组新的语义化文档标签来描述元素的内容。这些标签自带语义，对

于网页展示更加友好，使用这些标签可以弥补div标签缺乏描述性的问题，从而让整个

文档的

结构更加清晰。HTML5中提供的文档结构标签如下所示。

（1）article标签，定义文档内的文章元素，规定独立的自包含内容。

（2）header标签，定义文档或节的页眉，一个文档中可以有多个该标签。

（3）main标签，定义文档的主内容，用于存放整个网页的核心内容，在一个网页

中只使用1次。该元素中不包含侧边栏、导航栏、页脚等部分的信息。

（4）nav标签，定义文档内的导航链接，一般位于网站搜索栏下方，会包含网站中

所有分页的导航信息。

（5）section标签，定义文档中的节，包括章节、页眉、页脚及其他部分。

（6）aside标签，定义页面内容之外的内容，一般用于定义整个网页或模块中的侧

边栏，如提供导航功能。

（7）footer标签，定义文档或节的页脚，位于网页最下方。

10.1.2拖放API

拖放API是HTML5中新增的一种特性。拖放包括拖和放2个部分。文档中所有的元素

都是支持拖放的。拖放时首先要将元素设置为可以拖放，然后需要确定将指定元素拖放至

什么位置。

1.设置元素可以拖放

设置元素可以拖放通过设置元素的draggable属性为true实现，设置完成后，对应

的元素可以支持拖放操作，其语法形式如下所示。

标签draggable=true

2.设置拖放的内容

设置拖放内容是需要将ondragstart鼠标事件添加到对应的标签内，当触发指定的事

件，就会调用setData()方法。标签的语法形式如下所示。

标签ondragstart=函数名(event)

3.设置拖放的目标位置

设置拖放的目标位置需要将ondragover鼠标事件添加到目标元素中，并且调用

event.preventDefault()方法，标签的语法形式如下所示。

标签ondragover=函数名(event)

4.进行