背景

#在2012年提出

#跨平台运行

#硬件要求低

#flash之外的选择

软硬件环境

#双核 2G内存

#windows Mac OS Linux

HTML5的新特性、

#用于绘画的Canvas标签

#用于媒体回放的video/audio元素

#本地离线缓存的更好支持

#新的特殊内容元素：语义化【article footer nav header section】

#新的表单控件：【calender date time email url search】

#浏览器的支持【Safari Chrome Firefox Opera IE9】

环境搭建 常用：WebStorm notepad++ Eclipse sublime Dreamweaver 推荐：Interllij IDEA

常见问题解决

1.寻求问题根源 2.查看参考文档 W3C 3.参考示例 4.常见问题用搜索引擎搜 5.问题反馈

技能需求

HTML5 XHTML CSS3 Javascript jQuery: jQuery-UI jQuery-Mobile

HTML

#描述网页的一种语言

#超文本标记语言

#编程语言即标记语言

XHTML

#XHTML 可扩展超文本标记语言 是以XML应用的方式定义的HTML 所有浏览器支持

#使用目的：完整性和良好性

文档声明：

#DTD 规定使用通用标记语言的网页语法

#分为STRICT[严格类型] TRANSITIONAL[过渡类型] FRAMESET[框架类型]

XHTML语法规则 XHTML属性必须使用小写、必须用引号包围、最小化禁止

HTML5新特性

Audio:HTML5提供了播放音频文件的标准 control（控制器）：此属性提供添加播放、暂停和音量控件 标签：

    <audio> 定义声音
    <"source> 规定对媒体资源，可以是多个

视音频编解码工具

视频播放

Video : 提供了展示视频的标准 control（控制器）：control属性供添加播放、暂停和音量控件 标签：

     <video> 定义声音
    <"source>定义多媒体资源，可以是多个

属性： width：宽 height:高

HTML5拖放

1.拖放Drag和drop是HTML5标准的组成部分 2.拖动开始：ondragstart 调用了一个函数，drag(event)规定了被拖动的数据 3.设置拖动数据：setData() 设置被拖数据的数据类型和值 4.放入位置：ondragover事件规定在何处放置被拖动的数据 5.放置: ondrop当放置被拖数据时，会发生drop事件

HTML5拖放本地资源

1.e.dataTransfer.files[0]可以取得拖拽的本地资源的目录。 2.var fileReader = new FileReader(); 3.得到的fileReader.result就是被通过base-64编码过得数据 4.readAsDataURL可以将读取到的文件编码为Data URL 5.适合拖拽比较小的图片

Canvas图形的绘制[图形容器]

1.通过脚本js来完成，canvas只是容器 2.通过多种方法绘制路径，盒，圆，字符以及添加图像

编写方法： 在HTML5中直接编写 在脚本中编写

绘制图片 drawImage

createjs easeljs 处理HTML5的canvas tweenjs 处理HTMl5的动画调整和js属性的 soundjs 处理音频相关的api preloadjs 处理程序的协调和加载的类库