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