《前端开发工程师 课件》由会员分享，可在线阅读，更多相关《前端开发工程师 课件（147页珍藏版）》请在金锄头文库上搜索。
1、HTML5进阶,HTML5技术而今已不再陌生，不管是趋之若鹜，热情拥抱，还是远远张望，保持距离，HTML5都是技术论坛热门的话题。,HTML5进阶 HTML5新特性 Day1,1. HTML5概述,HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。 广义的HTML5包括HTML, CSS和JavaScript在内的一套技术组合，其目标是减少浏览器对于插件的依赖，提供丰富的RIA（富客户端）应用。所以CS
2、S3， SVG， WebGL， Touch事件，动画支持等都属于HTML5技术范围,HTML5时间表,2. HTML5的新特性,语义,离线存储,设备通用,位置,多媒体,三维、图形与特效,性能与集成,Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。作为下一代互联网标准，HTML5自然也是备受期待和瞩目，技术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来什么。那么就一起来窥探一下这个还未诞生就已经声名在外的新标准吧。,2. HTML5的新特性 语义,HTML5 引入了新的 HTML 元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引
3、擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。,2. HTML5的新特性 多媒体,Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。, ,2. HTML5的新特性 三维、图形与特效,基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。, var ctx = document.getElementById(canvas).getContext(2d); ctx.fillRect(20, 25, 150, 100); ctx.beginPath(); ct
4、x.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2); ctx.lineWidth = 15; ctx.lineCap = round; ctx.strokeStyle = rgba(255, 127, 0, 0.5); ctx.stroke(); ,2. HTML5的新特性 离线存储,现在，web应用的火爆已经是不折不扣的现实，并且相对传统的应用,web应用不需要安装，所占空间小的特性使其具备传统软件应用所不具备的优势，然而，目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上，汽车上，火车上，有很多地方都无法被网络信号所覆盖，因此
5、web应用也就无法使用。 HTML5的离线存储使得这个问题迎刃而解。,2. HTML5的新特性 离线存储,HTML5的web storage API 采用了离线缓存，会生成一个清单文件（manifest file），这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。当使用离线应用时，应用会引入这一清单文件，浏览器会读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之
6、处。,2. HTML5的新特性 设备通用性,从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。,2. HTML5的新特性 位置,这个大头针图标从2010年到2011年在各类应用和互联网上应该是非常火爆了吧？没错，就是地理位置，各处都可以看到人们在签到，查找自己当前的地理位置和周边。作为新标准的HTML5自然也不会置身事外，HTML5通过提供应用接口Geolocat
7、ion API，在用户允许的情况下共享当前的地理位置信息，并为用户提供其他相关的信息。,3. HTML5的未来,随着网络架构的完善，宽带提升，网速满足实时交互需求时，计算机结构也将发生变化，光驱消失，硬盘消失，内存增大，GPU愈加重要，现在B/S结构的应用越来越多，而HTML5旨在富互联网应用，能够改善B/S结构应用的用户体验，是互联网应用的趋势之一。 面向未来互联网，基于“云+终端”的构架，终端的HTML5的兼容解决方案必然会出现，那时候你就可以全面拥抱HTML5了。,HTML5表单 Day1,1. 新增input输入类型,HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制
8、和验证： email-输入邮件地址的文本框 url-输入URL地址的文本框 number-输入数字的文本框,可以设置范围 range-通过滑动条改变一定范围内的数字 date-选择日期(年、月、日、星期)的文本框 search-输入搜索关键字操作的文本框 Color-颜色选择器,浏览器支持,注释：Opera 对新的输入类型的支持最好。 不过您已经可以在所有主流的浏览器中使用它们了。 即使不被支持，仍然可以显示为常规的文本域。,Email - 输入邮件地址的文本框,email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时，会自动验证 email 域的值。 实例: E-mail:
9、,url-输入URL地址的文本框,url 类型用于应该包含 URL 地址的输入域。 在提交表单时，会自动验证 url 域的值。 实例： Homepage: ,number-输入数字的文本框,number 类型用于应该包含数值的输入域。 您还能够设定对所接受的数字的限定： 实例: Points: ,number-输入数字的文本框,下面的属性来规定对数字类型的限定：,range-通过滑动条改变一定范围内的数字,range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条。 您还能够设定对所接受的数字的限定： 实例: ,range-通过滑动条改变一定范围内的数字,下面的属性来
10、规定对数字类型的限定：,date-选择日期(年、月、日、星期)的文本框,HTML5 拥有多个可供选取日期和时间的新输入类型： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间）,date-选择日期(年、月、日、星期)的文本框,实例: Date: ,date-选择日期(年、月、日、星期)的文本框,实例: Month: ,date-选择日期(年、月、日、星期)的文本框,实例: Week: ,date-选
11、择日期(年、月、日、星期)的文本框,实例: Time: ,date-选择日期(年、月、日、星期)的文本框,实例: Date and time: ,date-选择日期(年、月、日、星期)的文本框,实例: Date and time: ,search-输入搜索关键字操作的文本框,search 类型用于搜索域，比如站点搜索或 Google 搜索。 search 域显示为常规的文本域。,search-输入搜索关键字操作的文本框,实例： Search: ,Color-颜色选择器,这是颜色选择器控件，相当的给力。使用很简单。 实例： Color：,2. 新增input属性,HTML5的input标签新增了
12、很多属性，也是让大家非常兴奋的一件事，用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性，使得html和js的分工更明确了，使用起来十分舒畅。新增主要属性如下： autoconmplete autofocus required placeholder,autocomplete,autocomplete可以赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候，浏览器能把用户写过的值自动填写在相应的input框里。 现在很多网站都实现了这个功能，不过基本都是用php来实现的。用了这个属性，无疑可以减少很多前端和后台的交流量
13、和工作量。,autoconmplete,实例： First name: Last name: E-mail: ,autofocus,autofocus 可以赋值为 autofocus，也就是在页面加载完成的时候自动聚焦到这个input标签，自然 type=hidden的时候是不能用的。 这个也是一个比较常见的效果，至今为止的实现方法是用js。在页面加载完时执行聚焦操作，现在也被一个属性搞定了。 可以想象，一个页面至多只有一个input标签会设置 autofocus，否则必然不会达到预期效果。因为不可能同时聚焦在两个input上。 实例： User name: ,required,input的有
14、一个强力新增属性，免去验证的麻烦。可以赋值为 required。 比如用户注册页面的用户名和密码都是必填的，只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。 注意：这里required属性是需要用户来填写的，所以Type是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。 实例： Name: ,placeholder,这个新增属性也是非常使用，用在type= text email等等类型的时候，提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。是一种比较常见的效果。 实例： ,3. 新增fo
15、rm元素,HTML5主要新增的form元素如下： datalist keygen output,datalist,datalist 元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的。 如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。,datalist,实例： Webpage: ,keygen,keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）
16、存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。 实例： Encryption: ,output,output 元素用于不同类型的输出，比如计算或脚本输出： 实例： 0100 + = ,4. 新增form属性,HTML5主要新增的form属性如下： autocomplete novalidate,autocomplete,autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 注释：autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：,autocomplete,实例： First name: Last na
