非常靠谱 html 5

《非常靠谱 - Html 5 》闲聊

Html 和 Html 5

http://www.oupeng.com

什么是 Html ？

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


Html 5

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

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

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

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

Html 5 的支持者（浏览器）


• CHROME

• SAFARI

• OPERA

• FIREFOX

• IE

五大主流浏览器

Html 5 的新鲜货

Semantic （语义）


干净整洁的代码清晰的页面结构简单的代码实现强大的媒体功能


结构section ：这可以是书中的一章或一节 header ：页面上显示的页眉；与 head 元素不一样 footer ：页脚；可以显示电子邮件中的签名 nav ：指向其他页面的一组链接 article ： blog 、杂志、文章汇编等中的一篇文章

交互details ：描述文档或文档某个部分的细节 datagrid ：网格控件，可以用它显示树、列表和表格


块元素aside ：说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容 figure ：标签规定独立的流内容（图像、图表、照片、代码等等） dialog ：对话框

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

progress ：表示过程状态

Graphics （图形 & 动画）


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盒子

媒体动画

Storage （存储）


我们想要的是什么

更大的存储空间

在客户端上的

不受页面刷新的影响

不需要提交到服务器


Local Storage

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

Session Storage

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


程序例


相比 Cookie 的优势

空间更大

没有时间期限

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

易用的接口

独立的存储空间


Web SQL DataBase

SQLLite 文件型数据库

SQL 语句

特点减少服务器请求次数

存储复杂的数据结构

避免存储安全性数据


程序例

Form （表单）


新增属性placeholder

autocomplete

autofocus

list/datalist

required

max/min/step


新增 Input类型email

url

range

search

color

tel

date

time

datetime

week

number

month

Audio/Video （音频 /视频）


audio

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

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


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 （地理位置）


它是一个什么东西呢？

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

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

运营商（ GSM/CDMA 的 cell ID ）

浏览器定位功能


浏览器是如何定位的？

定位过程及原理

在访问位置感知的站点时，询问是否要共享你的位置

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

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

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

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


Google 是怎么计算的？

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

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


Geolocation API （访问位置信息）getCurrentPosition

watchPosition

clearWatch

navigator 对象


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

Web Worker （后台异步化）


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

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


原理在当前 javascript 的主线程中，加载一个 javascript 文件来开

辟一个新的线程，线程间互相不阻塞，并可以进行数据交互。

接口postMessageonMessage

WebSockets （双向通信）


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

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


原理


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

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

Html 5 新原则


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

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

• 更优秀的错误处理

• 更多取代脚本的标记

• HTML5 应该独立于设备

• 开发进程应对公众透明

？动画片

Android

疯狂的小鸟

3D

max

电子书

视频聊天

电影

SEO

音乐制作

电视直播

水墨画

三国杀

CS

网络游戏

欧朋

交通路况

动画片

服装店

B2C

！

www.oupeng.com

非常靠谱 html 5

Documents