Your SlideShare is downloading. ×
非常靠谱 Html 5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

非常靠谱 Html 5

1,586

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,586
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 《非常靠谱 - Html 5》 闲聊
  • 2. Html 和 Html 5
  • 3. 什么是Html? 此处。。。。。。省略一万字http://www.oupeng.com
  • 4. 八年的漫长等待 。。。。。。。。Html 5 • HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 • HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 • HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。http://www.oupeng.com
  • 5. Html 5 的支持者(浏览器)
  • 6. 五大主流浏览器 • CHROME • SAFARI • OPERA • FIREFOX • IEhttp://www.oupeng.com
  • 7. Html 5 的新鲜货
  • 8. Semantic(语义)
  • 9. 干净整洁的代码 清晰的页面结构 简单的代码实现 强大的媒体功能http://www.oupeng.com
  • 10. 结构 section:这可以是书中的一章或一节 header :页面上显示的页眉;与 head 元素不一样 footer :页脚;可以显示电子邮件中的签名 nav :指向其他页面的一组链接 article:blog、杂志、文章汇编等中的一篇文章 交互 details :描述文档或文档某个部分的细节 datagrid :网格控件,可以用它显示树、列表和表格http://www.oupeng.com
  • 11. 块元素 aside :说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容 figure :标签规定独立的流内容(图像、图表、照片、代码等等) dialog :对话框 内联元素 mark:标签定义带有记号的文本。请在需要突出显示文本时使用 time:表示时间值 meter:表示数字值 progress:表示过程状态http://www.oupeng.com
  • 12. Graphics(图形 & 动画)
  • 13. Canvas JavaScript Context 2D Context API Canvas 3D WebGLhttp://www.oupeng.com
  • 14. SVG 易读取和修改 尺寸小、压缩性强 高质量、可伸缩 文字索引、图像搜索 动态生成图形 纯粹的XML 基于SMIL标准http://www.oupeng.com
  • 15. CSS 3 (丰富多彩的样式)
  • 16. Selector DOM API document.getElementsByClassName(“section”); Selector API document.querySelector(“ul li:nth-child(odd)”);http://www.oupeng.com
  • 17. 样式 透明度 圆角 文字阴影 多栏布局 多栏布局 多栏布局 多栏布局 多栏布局 多栏布局 边框 多栏布局 多栏布局 多栏布局 多栏布局 多背景图 Web Fontshttp://www.oupeng.com
  • 18. Storage (存储)
  • 19. 我们想要的是什么 更大的存储空间 在客户端上的 不受页面刷新的影响 不需要提交到服务器http://www.oupeng.com
  • 20. Local Storage 用于持久化的本地存储,数据是永远不会过期的 Session Storage 用于存储一个会话(session)中的数据,这些数据只有 在同一个会话中的页面才能访问,并且当会话结束后数 据也随之销毁。http://www.oupeng.com
  • 21. 程序例http://www.oupeng.com
  • 22. 相比Cookie的优势 空间更大 没有时间期限 存储内容不会发送至服务器端 易用的接口 独立的存储空间http://www.oupeng.com
  • 23. Web SQL DataBase SQLLite文件型数据库 SQL语句 特点 减少服务器请求次数 存储复杂的数据结构 避免存储安全性数据http://www.oupeng.com
  • 24. 程序例http://www.oupeng.com
  • 25. Form (表单)
  • 26. 新增属性 placeholder autocomplete autofocus list/datalist max/min/step requiredhttp://www.oupeng.com
  • 27. 新增Input类型 email date url time range datetime search week tel month color numberhttp://www.oupeng.com
  • 28. Audio/Video (音频/视频)
  • 29. audio src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio>http://www.oupeng.com
  • 30. video src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 <video id="media" src="http://www.abc.com/test.mp4" controls width="400px"heigt="400px"></video>http://www.oupeng.com
  • 31. Geolocation (地理位置)
  • 32. 它是一个什么东西呢? 浏览器定位功能 常见位置信息源 全球定位系统(GPS) 网络信号(IP地址、RFID、WiFi及蓝牙MAC地址) 运营商(GSM/CDMA的cell ID)http://www.oupeng.com
  • 33. 浏览器是如何定位的? 定位过程及原理 在访问位置感知的站点时,询问是否要共享你的位置 如果同意,搜集附近的无线访问点、IP地址等信息 发送信息到服务供应商(Google Location Services) 将位置信息返回给当前页面或站点 ※ 如果不同意的话,浏览器就什么都不会做http://www.oupeng.com
  • 34. Google 是怎么计算的? 因为Google是一家很大型的公司,每天会很工 作人员会开一辆车在城市的满大街乱跑,然后将所 有的无线热点信息搜集起来,把那些固定、持久的 无线热点信 息保存到Google的位置数据库中。当浏 览器请求解析时,它会去对比搜索对应的无线热点 信息,然后将最近那个无线热点的坐标位置返回。 但这样有一个限制条件,那就是,用户电脑并 须支持WIFI无线上网功能,否则无法搜索WIFI热点。http://www.oupeng.com
  • 35. navigator对象 Geolocation API(访问位置信息) getCurrentPosition watchPosition clearWatchhttp://www.oupeng.com
  • 36. Position 对象 coords属性( coordinator 坐标检测器): accuracy:准确度 latitude:纬度 longitude:经度 altitude:海拔高度 altitudeAcuracy:海拔高度的精确度 heading:行进方向 speed:地面的速度http://www.oupeng.com
  • 37. Web Worker (后台异步化)
  • 38. 什么 Multi-Thread (多线程解决方案) 意义 提高速度体验,保持操作流畅,不冻结用户界面http://www.oupeng.com
  • 39. 原理 在当前javascript的主线程中,加载一个javascript文件来开 辟一个新的线程,线程间互相不阻塞,并可以进行数据交互。 接口 postMessage onMessagehttp://www.oupeng.com
  • 40. WebSockets (双向通信)
  • 41. 什么 服务器端向客户端浏览器PUSH内容 意义 实时数据的及时推送,将最新的信息发送至需要接收的客户 端,而不需要手动建立端口连接http://www.oupeng.com
  • 42. 原理http://www.oupeng.com
  • 43. 客户端事件 onopen: 接口打开 onsend:发送消息 onmessage: 接收消息 onclose : 接口关闭 服务端 非常简单,只管往socket写数据http://www.oupeng.com
  • 44. Html 5 新原则
  • 45. • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript • 减少对外部插件的需求(比如 Flash) • 更优秀的错误处理 • 更多取代脚本的标记 • HTML5 应该独立于设备 • 开发进程应对公众透明http://www.oupeng.com
  • 46. 视频聊天 ? ! CS
  • 47. www.oupeng.com

×