首页 > 我的课程 > HTML5教程课程方案

“HTML5教程课程方案”

课程方案

一、主讲老师

顾翔

二、课程简介

本课程培训周期为5

三、培训内容介绍

HTML5是指第5代HTML,也指用HTML5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页,多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML,就可以把网页内容显示出来,它也构成了互联网兴起的基础。

四、课程介绍

本课程分为本课程通过:HTML 5的新特性、HTML 5与HTML 4的区别、HTML 5的结构、HTML 5中的表单、HTML 5中的文件与拖放、多媒体播放、绘制图形、数据存储、获取地理位置信息九个章节,最后以上海旅游网为实习内容进行以拆书形式的教学方式进行互动教学。

五、培训对象

前端开发人员,开发经理,前端测试人员,测试经理。

六、学员基础

熟练掌握HTMLCSS,对CSS3有一定的了解。

七、教学时间

5

八、课程内容

1,HTML 5的新特性
    1.1 谁在开发HTML 5
    1.2 HTML 5的新认识
        1.2.1 兼容性
        1.2.2 实用性和用户优先
        1.2.3 化繁为简
    1.3 无插件范式
    1.4 HTML 5的新特性
2,HTML 5与HTML 4的区别
    2.1 语法的改变
        2.1.1 HTML5的语法变化
        2.1.2 HTML5中的标记方法
        2.1.3 HTML5语法中需要掌握的3个要点
        2.1.4 标记示例
    2.2 新增的元素和废除的元素
        2.2.1 新增的结构元素
        2.2.2 新增的块级(block)的语义元素
        2.2.3 新增的行内(inline)的语义元素
        2.2.4 新增的嵌入多媒体元素与交互性元素
        2.2.5 新增的input元素的类型
        2.2.6 废除的元素
    2.3 新增的属性和废除的属性
        2.3.1 新增的属性
        2.3.2 废除的属性
    2.4 全局属性
        2.4.1 contentEditable属性
        2.4.2 designMode属性
        2.3.3 hidden属性
        2.4.4 spellcheck属性
        2.4.5 tabindex属性
3,HTML 5的结构
    3.1 新增的主体结构元素
        3.1.1 article元素
        3.1.2 section元素
        3.1.3 nav元素
        3.1.4 aside元素
        3.1.5 time元素
        3.1.6 pubdate属性
    3.2 新增的非主体结构元素
        3.2.1 header元素
        3.2.2 hgroup元素
        3.2.3 footer元素
        3.2.4 address元素
4,HTML 5中的表单
    4.1 新增表单元素与属性
        4.1.1 新增的属性
        4.1.2 增加与改良的input元素的种类
        4.1.3 output元素的添加
        4.1.4 应用新增元素制作注册表单
    4.2 对表单的验证
        4.2.1 自动验证
        4.2.2 checkValidity显式验证法
        4.2.3 避免验证
        4.2.4 使用setCustomValidity方法自定义错误信息
    4.3 增加的页面元素
        4.3.1 新增的figure元素
        4.3.2 新增的details元素
        4.3.3 新增的mark元素
        4.3.4 新增的progress元素
        4.3.5 新增的meter元素
        4.3.6 改良的ol列表
        4.3.7 改良的dl列表
        4.3.8 加以严格限制的cite元素
        4.3.9 重新定义的small元素
5,HTML 5中的文件与拖放
    5.1 选择文件
        5.1.1 通过file对象选择文件
        5.1.2 使用Blob接口获取文件的类型与大小
        5.1.4 通过类型过滤选择的文件
    5.2 使用FileReader接口读取文件
        5.2.1 检测浏览器对FileReader接口
        5.2.2 FileReader 接口的方法
        5.2.3 使用 readAsDataURL方法预览图片
        5.2.4 使用 readAsText方法读取文本文件
        5.2.5 FileReader接口中的事件
    5.3 拖放API 290
        5.3.1 实现拖放的步骤
        5.3.2 通过拖放显示欢迎信息
6,多媒体播放
    6.1 HTML 5多媒体的简述
        6.1.1 目前浏览器对Video和Audio的支持
        6.1.2 基本语法
    6.2 媒体元素基本属性
        6.2.1 video元素属性
        6.2.2 audio元素属性
    6.3 多媒体元素常用方法
        6.3.1 媒体播放时的方法
        6.3.2 canPlayType(type)方法
    6.4 多媒体元素重要事件
        6.4.1 事件处理方式
        6.4.2 事件介绍
        6.4.3 事件示例
7,绘制图形
    7.1 canvas的基础知识
        7.1.1 canvas是什么
        7.1.2 在页面中放置canvas元素
        7.1.3 绘制带边框矩形
    7.2 在画布中使用路径
        7.2.1 使用arc方法绘制圆形
        7.2.2 使用moveTo与lineTo路径绘制火柴人
        7.2.3 贝塞尔和二次方曲线
    7.3 运用样式与颜色
        7.3.1 fillStyle 和 strokeStyle属性
        7.3.2 透明度 globalAlpha
        7.3.3 线型 Line styles
    7.4 绘制渐变图形
        7.4.1 绘制线性渐变
        7.4.2 绘制径向渐变
    7.5 绘制变形图形
        7.5.1 坐标的变换
        7.5.2 矩阵变换
    7.6 组合多个图形
    7.7 给图形绘制阴影
    7.8 应用图像
        7.8.1 绘制图像
        7.8.2 图像的局部放大
        7.8.3 图像平铺
        7.8.4 图像裁剪
        7.8.5 像素的处理
    7.9 绘制文字
    7.10 保存与恢复状态
    7.11 文件的保存
    7.12 对画布绘制实现动画
    7.13 综合实例——桌面时钟
8,数据存储
    8.1 初识Web Storage
        8.1.1 Web Storage是什么
        8.1.2 使用WebStorage中的API
        8.1.3 sessionStorage和localStorage的实例——计数器
        8.1.4 Web Storage综合实例——留言本
        8.1.5 JSON对象的存数实例——用户信息卡
    8.2本地数据库
        8.2.1 Web SQL数据库简介
        8.2.1 使用Web SQL Database API
        8.2.3 本地数据库实例——用户登录
9,获取地理位置信息
    9.1 Geolocation API的概述
        9.1.1 使用getCurrentPosition获取当前地理位置
        9.1.2 持续监视当前地理位置的信息
        9.1.3 停止获取当前用户的地理位置信息
    9.2 position对象
    9.3 案例
10,练习-上海旅游网

软件测试咨询

  

   

投稿关闭窗口打印