1. 实践目的

1. 能够简要描述HTML5表单标记以及新增常用标签；

2. 能够使用新增表单标记进行表单设计，并能够设置默认值；

3. 能够使用新的HTML相关属性增加表单的功能；

4. 能够使用HTML5多媒体标签以及常用事件进行多媒体相关元素设计；

5. 能够使用事件监听以及事件处理实现多媒体播放器；

6. 能够使用canvas进行简单的图形绘制。

2. 实践内容

1. 设计用户注册页面；

2. 制作简易播放器；

3. 绘制中国国旗。

3. 实践要求

【要求1】设计用户注册页面

具体要求如下：

1. 在网页中添加表单及表单元素，如图所示。

2. 设置昵称输入框自动获得焦点，且此字段必填。

3. 设置密码输入框字段必填。

4. 设置电话输入框必须填入11位数字。

5. 设置邮箱输入框为自动完成。

6. 在幸运色后使用output实时显示用户选择的颜色值。

7. 使用datalist预定义偏好类型，并与三个偏好输入框关联。

8. 在表单外添加两个提交按钮，使用form属性关联到注册表单。

9. 设置点击"会员注册"按钮后，表单提交地址为"/regist"。

10. 设置点击"管理员注册"按钮后，表单提交地址为"/registForAdmin"。

【要求2】制作简易播放器

具体要求如下：

1. 在网页中使用video添加视频元素，同时添加播放按钮、进度滑动条、播放倍速滑动条、音量滑动条、显示信息（当前播放时间、视频时长、倍速、音量）的span等，如图所示。

2. 当加载完视频元数据后，能够显示视频总时长，如果分钟或秒不足两位，则需用"0"补齐。

3. 点击播放按钮能够控制视频的播放与暂停，当播放时按钮显示为"暂停"，当暂停时按钮显示为"播放"。

4. 当视频的当前时间被改变（视频正在播放），当前播放时间会实时更新，同时播放进度条的值也随之更新。

5. 当视频播放完毕，应当设置视频暂停，重置当前播放时间置为"00:00"，重置按钮为"播放"，重置播放进度条的值为0。

6. 当播放进度条被拖动时，视频当前播放时间也随之改变，实现快进和快退。

7. 设置音量滑动条的范围为0~100，默认值为10，步长为10。

8. 当音量滑动条被拖动时，能够实时显示当前音量值，并设置视频的音量大小（需转换为0~1之间才能设置给视频）。

9. 设置倍速滑动条的范围为0.5~3.0，默认值为1.0，步长为0.5。

10. 当倍速滑动条被拖动时，能够实时显示当前倍速，并设置视频的播放倍速。

【要求3】绘制中国国旗

具体要求如下：

1. 在网页中添加画布，尺寸为600*400。

2. 根据图1所示（左上角每个格子大小为20*20）绘制中国国旗。

3. 国旗的标准支持为3:2，且五角星都在左上角四分之一区域。

4. 大五角星坐标为(100,100)，外接圆半径为60。

5. 四个小五角星都会有一个角指向大五角星的中心，坐标及外接圆半径分别为(200, 40, 20)、(240,80,20)、(240,140,20)、(200, 180, 20)，其旋转角度参考图7-5-3辅助线使用Math.atan2()方法完成。

提示：最终成果不需要添加辅助线，如图2所示。

扩展：中华人民共和国国旗的红色象征革命，旗上的五颗五角星及其相互关系象征共产党领导下的革命人民大团结，五角星用黄色是为了在红地上显出光明，黄色较白色明亮美丽，四颗小五角星各有一尖正对着大星的中心点，这是表示围绕着一个中心而团结。