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