《HTML5案例制作》由会员分享，可在线阅读，更多相关《HTML5案例制作（80页珍藏版）》请在金锄头文库上搜索。
1、,亲密接触下一代网页语言 HTML5 WEB专用教程,主讲：,内部教程 注意保密,亲密接触下一代网页语言,HTML5初体验 Canvas在网站设计中的应用 增强的表单Form 媒体支持：Video html文件命名、 css文件命名、Js文件命名,HTML5初体验,html书写规范,文档类型声明及编码 样式文件及JS文件的引入 无兼容性问题的html自身标签 语义化html 布局嵌套 重定向问题， style使用 lable使用 图片控制 注释 特殊符号使用,HTML5初体验,css书写规范,编码统一为utf-8; 协作开发及分工 class与id的使用 css属性书写顺序 样式重复使用率;
2、html自身属性及继承原理 中文字体名转码; 背景图片使用sprite技术 table标签使用 兼容ie8; 用png图片 避免兼容性属性的使用 减少使用影响性能的属性 注释 代码缩进与格式,HTML5初体验,JavaScript书写规范,文件编码统一为utf-8 库引入 变量命名 类命名 函数命名 命名语义化 避免用存在兼容性及消耗资源的方法或属性 转换成unicode编码 注释. 提高函数重用率 10. 注重与html分离, 减小reflow,HTML5初体验,归档; 图片格式仅限于gif | png | jpg; 命名 减少加载时间; 运用css sprite技术,图片规范,HTML5初
3、体验,注释规范 html注释 css注释 JavaScript注释,HTML5初体验,测试工具 前期开发仅测试FF 建议测试顺序: FireFoxIE7IE8IE6OperaChromeSafari, 建议安装firebug及IE Tab Plus插件.,Canvas在网站设计中的应用,用canvas元素实报表图表 使用CANVAS的基本步骤 CANVAS图形图片处理机制及应用 CANVAS动画设计原理,Canvas在网站设计中的应用,CANVAS 绘图API Canvas标记由Apple在Safari 1.3 Web浏览器中引入 JavaScript脚本的支持,Canvas在网站设计中的应用
4、,使用CANVAS的基本步骤 A.建立CANVAS对象 B.通过JAVASCRIPT绘制,Canvas在网站设计中的应用,Canvas在网站设计中的应用,案例演示,Canvas在网站设计中的应用,JavaScript?,Canvas在网站设计中的应用,JavaScript在设计中的应用 JavaScript与HTML5 BOM JavaScript应用思想,Canvas在网站设计中的应用,JavaScript应用方法 使用频繁的方法 常规交互操作,Canvas在网站设计中的应用,Canvas在网站设计中的应用,Canvas在网站设计中的应用,Canvas在网站设计中的应用,Canvas在网站设
5、计中的应用,Canvas在网站设计中的应用,Canvas在网站设计中的应用,Canvas在网站设计中的应用,Canvas在网站设计中的应用,CANVAS图形图片处理机制 了解坐标：,Canvas在网站设计中的应用,CANVAS图形图片处理机制 基础CANVAS API：属性与方法,Canvas在网站设计中的应用,CANVAS动画设计原理 清空CANVAS 存储CANVAS状态 重绘FRAME 恢复CANVAS状态,Canvas在网站设计中的应用,动画测试1,Canvas在网站设计中的应用, HTML5 Demo const fps=30; var x=0;var y=0;xD=1; var y
6、D=1; var image=new Image(); image.src=test1.jpg; var mycanvas=null; var context2D=null; window.onload=mc; function mc() mycanvas=document.getElementById(canvas); context2D=mycanvas.getContext(2d); setInterval(draw,1000/fps); ,Canvas在网站设计中的应用,动画测试2,Canvas在网站设计中的应用,动画测试2,Canvas在网站设计中的应用,Canvas在网站设计中的应
7、用,Canvas在网站设计中的应用,操作思路 1.准备工作？ 2.画表盘？ 3.画12个时间刻度？ 4.画60个分钟刻度？ 5.取当前系统时间？ 6.画时针画分针画秒针画中心点？ 7.触发？,Canvas在网站设计中的应用,准备工作？,Canvas在网站设计中的应用,2.画表盘？,Canvas在网站设计中的应用,3.画12个时间刻度？,Canvas在网站设计中的应用,4.画60个分钟刻度?,5.取当前系统时间？,Canvas在网站设计中的应用,6.画时针,Canvas在网站设计中的应用,6. 画分针？,画秒针,Canvas在网站设计中的应用,7.触发？,增强的表单Form,web form 2
8、.0,改进功能 改进语义化 增强用户体验 提高工作效率,增强的表单Form,(所有HTML4的标签在 HTML5还是100支持) 表单结构松散 丰富的INPUT 增强表单属性,增强的表单Form,HTML4一个大容器,增强的表单Form,放在页面任何位置，通过新增的form属性指向ID . ,增强的表单Form,自动获取焦点 autofocus属性 新版Chrome或Safari (FF也可),增强的表单Form,文本框的输入提示（输入框占位符）：placeholder属性,Opera或Chrome或Safari,增强的表单Form,表单验证功能 判断必填项 判断数据格式 email输入类型：
9、 url输入类型：,增强的表单Form,滑动块输入 ,Opera或Chrome或Safari,增强的表单Form,案例,增强的表单Form,数字输入框（ Opera或Chrome ） ,增强的表单Form,输入框下拉提示,增强的表单Form,日期选择框 ,增强的表单Form,媒体支持：Video、Audio,媒体支持：Video、Audio,媒体支持：Video、Audio, ,SoundManager 2 ：植入简单,媒体支持：Video、Audio,媒体支持：Video、Audio,HTML5丰富的交互功能体验,contentEditable Dom方法处理编辑 拖放 编辑API,HTML
10、5丰富的交互功能体验,contentEditable,HTML5丰富的交互功能体验,哪些元素可编辑？ Div ,img ,table.,HTML5丰富的交互功能体验,HTML5丰富的交互功能体验,制作一个可编辑的TABLE,HTML5丰富的交互功能体验,Drag & Drop,HTML5丰富的交互功能体验,HTML5丰富的交互功能体验,实现拖放,HTML5丰富的交互功能体验,文件拖放,HTML5丰富的交互功能体验,HTML5中的File及FileReader接口 dragover、dragend、drop是三个与拖拽相关的事件。 File及FileReader判断读取拖拽的文件。 用FileReader的readAsDataURL方法将图片读取。 如果想显示 文本文件内容，应如何操作？,THANKS,
