欢迎来到天天文库
浏览记录
ID:25198819
大小:7.46 MB
页数:54页
时间:2018-11-17
《html5入门课程2》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库。
HTML5入门课程2021/6/30演示:演示:Page1 讲师介绍宋涛做软件开发11年现在是一名兼职讲师也是项目经理和资深程序员做公司管理有很多年的经验QQ号:64955834Page2 目录一什么是HTML5二HTML5新特性和应用三HTML5目前的应用局限四开放讨论:HTML5适合应用于哪些项目?Page3 一什么是HTML5Page4 1HTML历史Page5 2什么是HTML5官方概念:HTML5草案的前身名为WebApplications1.0,是HTML4的更新加强版本。它增加了新的标签和属性,强化了网页的标准、语义化、图像表达能力和交互效果。广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,这些技术包括:HTML5,DOM3,CSS3,JSAPI,SVG,WebGL(3D)等减少互联网富应用对Flash、Silverlight、JavaFX等的依赖,并提供更多有效增强网络应用的API后面我们描述的HTML5就是基于广义来讲述Page6 3从事岗位设计师-需要熟悉交互设计和视觉设计,掌握Html5+CSS3+JS最佳;可从事产品设计、视觉设计和交互设计相关职位;程序员-需要熟悉Html5、CSS3、Javascript等Web前端开发技术,了解DOM、XML、JSON等相关技术,了解常见的JS开发框架。可从事前端工程师。求职途径:人才招聘网(chinahr,zhaopin,51job),微博,专业社区(威锋,机锋,CSDN,QQ群)薪水待遇5k-20k/m,猎头职位25-30K/mPage7 4职业寿命 二HTML5新特性和应用Page9 HTML5新特性媒体支持:Video和Audio画布元素-Canvas以及WebGL视频加速增强的表单Form更炫的平面动画-CSS3页面渲染及CSS33D矢量支持-SVGHTML5的图形机制比较-SVGvsCanvas本地数据库-离线应用-本地储存原生的拖拽后台异步化|双向信息传输|桌面提醒|地理位置定位其他HTML5特性..Page10 媒体支持Video/Audio/webRTCPage11 AudioVideo&WebRTC标签定义视频,比如电影片段或其他视频流。标签定义声音,比如音乐或其他音频流。WebRTC(WebReal-TimeCommunication)是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与API(用navigator.getUserMedia启动用户计算机的摄影机,用PeerConnection进行点对点传输等等)Page12 演示:一个轻量的,免费的,开源的视频播放器。当遇到不支持的视频时,它会强制使用Flash播放。Page13 演示:一个免费的HTML5音频、视频播放器,在所有的浏览器中提供统一的UI。Page14 画布元素-Canvas以及WebGL视频加速Page15 CanvasAPIcanvas,HTML5最期待元素之一,可以通过脚本可以任意创建图形,编辑图形,导入图片,导出图片。其中分2D与3D:2DcontextAPI:基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。3DcontextAPI(WebGL):WebGl定义了一套API,能够允许在网页中使用类似于OpenGL,实际上是一套基于OpenGLES2.0的3d图形API。这些API是通过HTML5的canvas标签来使用的。Page16 演示: 演示:Html5策略型网页游戏《三国时代OL》Page18 三国时代OL:采用了哪些HTML5canvas,applicationcache,localstorage,audio结合JS+CSS3+DIVcss3animation,divtransform第三方APIJQuery1.6,JQueryMobile,JQuerytmpl跨平台iphone,android,Pad,PC浏览器自带,UC,QQ,fireforx,opera等Page19 WebGLWater 增强的表单FormPage21 新的Form元素HTML5的表单定义了十几个新的元素和特性,这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括:1新元素:Email、Number、Range,colorpicker等2新属性:placeholder、pattern、required、autofocus、multiple等特性3新样式:新的伪类样式,比如:focus,:required,:valid等4新的输入方式-语音输入:x-webkit-speech可以让标签接受语音并转化为数字Page22 演示:Page23 演示: 演示: 更丰富的样式支持-CSS3Page26 CSS3新特性选择器RGBA和透明度多栏布局:弹性布局(水平布局、垂直布局)多背景图WordWrap文字阴影@font-face属性盒阴影:阴影,文本阴影盒模型:,多背景,圆角(边框半径),边框图片2D:旋转,缩放,倾斜,请参考:CSS基础变换3D:透视,transform3D,等等媒体查询语音 演示:BostonGlobeisabeautifulcommercial“responsivewebdesign”websitemakinguseofHTML5.Tryresizingthebrowserwindowtoseetheresponsiveeffect. 使用了HTML5API和,支持CSS3transforms和CSS3transitions。 SVG矢量图形Page30 SVGSVG(ScalableVectorGraphics):可缩放矢量图形,使用XML来描述二维图形和绘图程序的语言。可以在浏览器中构造矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果,和动画等Page31 演示: 演示: HTML5的图形机制比较:SVGVSCanvasPage34 相同点均是HTML5规范的一部分均能实现图形和动画均可以通过脚本编程控制显示Page35 不同点SVGCanvasDOM是!非!最大的区别!Everythingispixel是否矢量矢量,放大不失真像素操作,放大失真图形内存模式保留模式即发即弃。直接向它的位图呈现它的图形,然后对所绘制的形状没有任何认知,只会得到最终的位图。基本图形种类丰富(线,圆,矩形,多边形,路径等)除了矩形,只有路径原生动画支持支持不支持。需要js去模拟,即刷屏3D不支持支持交互支持Dom事件只能用js根据坐标进行编程可访问性好。Xml结构易于分析差。程序无法感知内容,除非图像识别或专门做canvas内容映射最终实现的代码特征Svg标签+css,少量依赖js基本上是完全依赖jsPage36 小结互有所长,均适用不同应用场景:SVG更适合规则图形的绘制和动画,更好管理。典型场景:图表,流程图等高保真度矢量文档。Canvas更适合不规则或涉及像素级的变化场景,更高效。典型场景:图片编辑和图形数据分析,位图动画,2D游戏,3D虚拟空间等像素操作。Page37 离线应用Page38 离线应用:让网络应用变为桌面应用离线存储使得你的web应用可以在用户离线的状况下进行访问。离线存储的两个特性:1离线资源缓存2本地数据存储localstorage离线存储技术技术显然至少有三个好处:1最直接的好处就是用户可以离线访问你的web应用2因为文件被缓存在本地使得web页面加载速度提升许多3离线应用只加载被修改过的资源,因此大大降低了用户请求对服务器造成的负载压力Page39 案例:Page40频道缓存,海报缓存,减低服务器负载,提升用户开机体验-IPTVWebkit机顶盒离线保存桌面和通讯录数据,定时和服务器同步-UCweb版 拖拽Page41 Drag&Drop简介HTML5为元素新增了用于拖拽的属性draggable,这个属性决定了元素是否能被拖拽,或只能选择元素的文本。同时HTML5使用dataTransfer接口用来支持拖拽数据存储。三个重要特性:draggable属性:就是标签元素要设置draggable=true,否则不会有效果,例如:列表1
此文档下载收益归作者所有
举报原因
联系方式
详细说明
内容无法转码请点击此处