非常靠谱 Html 5

《非常靠谱 - Html 5》
闲聊

什么是Html？

此处。。。。。。省略一万字

http://www.oupeng.com

八年的漫长等待。。。。。。。。

Html 5
• HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

• HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

• HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。


Html 5 的支持者（浏览器）

五大主流浏览器
• CHROME

• SAFARI

• OPERA

• FIREFOX

• IE


干净整洁的代码

清晰的页面结构

简单的代码实现

强大的媒体功能


结构
section：这可以是书中的一章或一节

header ：页面上显示的页眉；与 head 元素不一样

footer ：页脚；可以显示电子邮件中的签名

nav ：指向其他页面的一组链接

article：blog、杂志、文章汇编等中的一篇文章

交互
details ：描述文档或文档某个部分的细节

datagrid ：网格控件，可以用它显示树、列表和表格


块元素
aside ：说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容

figure ：标签规定独立的流内容（图像、图表、照片、代码等等）

dialog ：对话框

内联元素
mark：标签定义带有记号的文本。请在需要突出显示文本时使用

time：表示时间值

meter：表示数字值

progress：表示过程状态


Canvas
JavaScript

Context

2D Context API

Canvas 3D

WebGL


SVG
易读取和修改

尺寸小、压缩性强

高质量、可伸缩

文字索引、图像搜索

动态生成图形

纯粹的XML

基于SMIL标准


CSS 3 （丰富多彩的样式）

Selector

DOM API
document.getElementsByClassName(“section”);

Selector API
document.querySelector(“ul li:nth-child(odd)”);


样式
透明度

圆角文字阴影
多栏布局多栏布局
边框多栏布局多栏布局
多栏布局多栏布局多背景图

Web Fonts


我们想要的是什么

更大的存储空间

在客户端上的

不受页面刷新的影响

不需要提交到服务器


Local Storage

用于持久化的本地存储，数据是永远不会过期的

Session Storage

用于存储一个会话（session）中的数据，这些数据只有
在同一个会话中的页面才能访问，并且当会话结束后数
据也随之销毁。


程序例


相比Cookie的优势

空间更大

没有时间期限

存储内容不会发送至服务器端

易用的接口

独立的存储空间


Web SQL DataBase
SQLLite文件型数据库

SQL语句

特点
减少服务器请求次数

存储复杂的数据结构

避免存储安全性数据


新增属性
placeholder

autocomplete

autofocus

list/datalist

max/min/step

required


新增Input类型
email date

url time

range datetime

search week

tel month

color number


Audio/Video （音频/视频）

audio
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条

<audio id="media" src="http://www.abc.com/test.mp3" controls></audio>


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>


Geolocation （地理位置）

它是一个什么东西呢？

浏览器定位功能

常见位置信息源
全球定位系统（GPS）

网络信号（IP地址、RFID、WiFi及蓝牙MAC地址）

运营商（GSM/CDMA的cell ID）


浏览器是如何定位的？

定位过程及原理
在访问位置感知的站点时，询问是否要共享你的位置

如果同意，搜集附近的无线访问点、IP地址等信息

发送信息到服务供应商（Google Location Services）

将位置信息返回给当前页面或站点

※ 如果不同意的话，浏览器就什么都不会做


Google 是怎么计算的？

因为Google是一家很大型的公司，每天会很工
作人员会开一辆车在城市的满大街乱跑，然后将所
有的无线热点信息搜集起来，把那些固定、持久的
无线热点信息保存到Google的位置数据库中。当浏
览器请求解析时，它会去对比搜索对应的无线热点
信息，然后将最近那个无线热点的坐标位置返回。

但这样有一个限制条件，那就是，用户电脑并
须支持WIFI无线上网功能，否则无法搜索WIFI热点。


navigator对象

Geolocation API（访问位置信息）
getCurrentPosition

watchPosition

clearWatch


Position 对象
coords属性（ coordinator 坐标检测器）：
accuracy：准确度
latitude：纬度
longitude：经度
altitude：海拔高度
altitudeAcuracy：海拔高度的精确度
heading：行进方向
speed：地面的速度


Web Worker （后台异步化）

什么
Multi-Thread （多线程解决方案）

意义
提高速度体验，保持操作流畅，不冻结用户界面


原理
在当前javascript的主线程中，加载一个javascript文件来开
辟一个新的线程，线程间互相不阻塞，并可以进行数据交互。

接口
postMessage
onMessage


什么
服务器端向客户端浏览器PUSH内容

意义
实时数据的及时推送，将最新的信息发送至需要接收的客户
端，而不需要手动建立端口连接


原理


客户端事件
onopen：接口打开
onsend：发送消息
onmessage：接收消息
onclose : 接口关闭

服务端
非常简单，只管往socket写数据


• 新特性应该基于 HTML、CSS、DOM 以及 JavaScript

• 减少对外部插件的需求（比如 Flash）

• 更优秀的错误处理

• 更多取代脚本的标记

• HTML5 应该独立于设备

• 开发进程应对公众透明


视频聊天
？
！
CS

非常靠谱 Html 5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 非常靠谱 Html 5

Ähnlich wie 非常靠谱 Html 5 (20)

Mehr von Tony Deng

Mehr von Tony Deng (20)

非常靠谱 Html 5