云圣天-优快云博客

原创 HTML5实战与剖析之Web存储机制(Web Storage)

Web Storage是以Key-Value的形式进行数据持久性存储。Web Storage是为了克服由cookie带来的一些限制而产生的。当数据需要被严格控制在客户端上的时候，无须持续地将数据发回服务器。Web Storage的目标有两个：提供一种存储会话数据的路径;提供存储大量可以跨会话存在的数据的机制。

2014-08-27 19:59:39 2260

原创 HTML5实战与剖析之离线应用

离线的Web应用，就是在设备不能上网的时候还能运行应用。HTML5把离线应用作为重点，主要是开发人员的心愿。离线应用的开发的步骤有：首先应该知道设备是否能够上网;然后应该还能访问一定的资源(如图像、CSS、JavaScript等)，只有这样才能正常工作。

2014-07-26 23:37:08 1958

翻译 HTML5实战与剖析之使用HTML5 WebSocket API

通过引入一个简洁的接口(见下面的清单),开发者可以替代技术,如长轮询和“永远帧,因此进一步降低延迟。

2014-06-10 08:58:03 2221

翻译 HTML5实战与剖析之WebSocket协议

WebSocket协议是为了工作与现有的网络基础设施。作为这一设计原则的一部分,WebSocket连接的协议规范定义了开始其生命作为一个HTTP连接,保证与pre-WebSocket世界完全向后兼容。从HTTP协议切换WebSocket称为WebSocket握手。浏览器发送一个请求到服务器,这表明它想开关从HTTP WebSocket协议。客户端通过升级标题表达的愿望:GET

2014-05-26 08:53:57 1480

翻译 HTML5实战与剖析之WebSockets简介

HTML5 WebSockets规范定义了一个API,允许web页面使用WebSockets协议与远程主机双向沟通。介绍了WebSocket接口,并定义了一种全双工通信通道,通过一个套接字在网络上。HTML5 WebSockets提供极大的减少了不必要的网络流量和延迟而不能攀登的轮询和长轮询的解决方案是用来模拟全双工连接通过维护两个连接。HTML5 WebSockets账户代理和防火墙等网

2014-05-22 09:53:06 3374

原创 HTML5实战与剖析之历史管理(history对象)

HTML5新添加了对历史的管理，更新了history对象让管理历史状态更加方便了。在现代Web应用中，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用

2014-05-07 14:38:43 4831

原创 HTML5实战与剖析之媒体元素(6、视频实例)

HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比较多。因为手机端基本上废除了flash的独断，让HTML5当家做主人，所以对视频支持的比较好。所以今天专门为大家奉上HTML5视频标签模拟视频播放器的小例子，让大家更好的理解HTML5和有效的应用在项目中。

2014-05-06 09:19:27 2735

原创 HTML5实战与剖析之媒体元素(5、音频实例)

之前已经介绍过了HTML5中媒体元素的相关小概念，和一些事件方法。光有一些理论基础，没有实践实例是不能充分理解的，更不太可能靠小概念来进行实际操作的。所以今天为大家奉上一个有关模拟音乐播放器小例子。希望大家通过这个下例子能够更好的理解和运用HTML5中的媒体元素。　　HTML代码　　CSS代码　　JavaScript代码　　HTML5实战与剖析之媒体元素(5、音频实例)就为大家介绍

2014-04-30 08:48:32 1715

原创 HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

虽然媒体元素可以实现音频和视频功能，但是并不是所有浏览器都支持video标签和audio标签的所有编解码器，这意味着开发人员必须提供很多歌媒体来源。在JavaScript API中能够检测浏览器是否支持某种格式和编解码器。这两个媒体元素都有一个canPlayType()方法，该方法接收一种格式/编解码器字符串，返回”probably”、”maybe”

2014-04-30 08:45:07 2895

原创 HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

HTML5中的媒体元素除了拥有很多的属性之外，video标签和audio标签还可以出发很多事件和方法。这些方法监控着不同的属性的变化，这些变化有可能是媒体播放的结果，也可能是用户操作媒体的结果。下面就为大家开始介绍媒体元素的相关事件。

2014-04-21 10:05:01 2577

原创 HTML5实战与剖析之媒体元素(2、媒体元素的属性)

提到HTML5中的媒体元素，那咱们可有的聊了，刚刚介绍完媒体元素的用法与简介，还没介绍有关媒体元素的相关属性呢，所以今天就为大家介绍一些有关HTML5中媒体元素的相关属性。

2014-04-18 14:31:28 3280

原创 HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

随着HTML5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。很恰巧的是，移动端对HTML5中的媒体标签video标签和audio标签支持的非常好。这就使HTML5在移动端很流行。video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。两个

2014-03-24 10:01:39 2911

原创 HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东，闲话不多说赶快一起看看吧。在默认情况下，链接、文本和图像是可以拖动的，不用再写代码即可拖动。如果想让其他元素标签也可以拖动，那么只有HTML5能实现了。HTML5为所有HTML元素规定了dragable属性，表示元素是否可以拖动。链接和图像的标

2014-03-17 09:16:51 4079

原创 HTML5实战与剖析之原生拖拽(三dataTransfer对象)

虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTransfer对象。dataTransfer对象是事件对象的一个属性，用于从被拖拽元素相放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataT

2014-03-10 08:49:21 12307

原创 HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)

通过拖拽事件，咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发，有些事件是在放置目标上触发的。拖动某元素时候，触发的事件有：dragstart事件、drag事件和dragend事件。

2014-03-04 08:33:45 8928

原创 HTML5实战与剖析之原生拖拽(一拖拽历史概述)

提起拖拽，我就想起了在JavaScript培训的时候一个非常好玩的效果，那就是拖拽了。可以用鼠标任意拖拽着一个物体到任何你想去的地方。最早拥有JavaScript拖拽功能的是IE4浏览器。当时，网页中只有两种对象是可以拖拽的，那就是：图形和某些文字。拖拽图像的时候，把鼠标放在图像上，按住鼠标不放就可以拖拽了。拖拽文字时，要先选中文字，然后可以像拖动图像那样拖拽选中的文字。在IE4中，唯一有

2014-02-25 08:41:25 3098

原创 HTML5实战与剖析之跨文档消息传递(iframe传递信息)

在来自不同域名的页面间传递消息一般统称为跨文档消息传送，简称XDM。如，www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.youkuaiyun.com/lee_magnum域名中的页面通信。在XDM机制出现之前，要毫无压力地实现这种通信需要用很长时间。XDM把这种机制规范化，让咱们能够既稳妥又简单地实现跨文档通信。

2014-02-20 08:41:58 3879

原创 HTML5实战与剖析之表单那些事儿

HTML5针对表单方面也做了一些完善，新添加了一些验证数据的功能，新添加了一些标签属性。有了这些验证功能，就可以不用JavaScript进行验证，哪怕是JavaScript被禁用了也可以毫无压力的验证表单了。开发人员不用JavaScript，浏览器会根据标记中的规则执行验证，然后显示适当的错误信息。这些人性化的功能在支持HTML5的浏览器中才能有效，支持的浏览器有Opera 10+、Safari

2014-02-17 08:51:08 5312

原创 HTML5实战与剖析之剪贴板事件

很多网站当复制粘贴的时候，都会出现有关剪贴板的相关提示，在刚刚入行前端工程师的时候，我还在一直纳闷，这是怎么实现的呢。如今，咱们再也不用纳闷了，因为已经有浏览器把剪贴板相关事件纳入标准了。

2014-02-14 08:59:39 101558

原创 HTML5实战与剖析之表单——文本框脚本

在编写表单相关的东西的时候，通常有两个标签标示文本框：一种是单行文本框input标签，另一种是多行文本框textarea标签。这两种标签比较相似，但是他们也有区别。如果一定要用input标签标示文本框，那么就必须在type属性中设置”text”。通过设置size属性可以指定文本框中显示字数的字符数。通过value属性，可以设置文本框的默认文字。通过maxlength属性可

2014-02-11 09:02:44 4797

原创 HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)

HTML5在表单中新添加了很多功能，梦龙小站将慢慢为大家介绍，今天为大家介绍HTML5表单中新添加的有关焦点的属性。HTML5添加了autofocus属性，这个属性在支持它的浏览器中，只要设置了这个属性，不用JavaScript动态获取焦点，就能自动把焦点移动到相应字段。小例子如下：

2014-02-10 09:49:35 18280

原创 HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。

2014-02-07 11:37:32 67656 2

原创 HTML5实战与剖析之自定义数据属性(dataset)

说道HTML5实战与剖析之自定义数据属性，我就想起以前在外面学习JavaScript的时候了，那时候真可谓是跟打了鸡血似的，永远那么兴奋。早在那个时候，我就听说过自定义属性这回事儿了。下面就为大家介绍一下有关自定义属性的事儿吧。

2014-01-28 09:02:58 2682

原创 HTML5实战与剖析之字符集属性(charset和defaultCharset)

HTML5对字符集属性也进行了更新，其中charset和defaultCharset属性就是HTML5中新添加的字符集属性。有关charset和defaultCharset属性的具体讲解尽在HTML5实战与剖析之字符集属性，下面就一起了解下吧。

2014-01-27 08:52:21 2955

原创 HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)

之前为大家介绍了些许关于HTML5新添加的小东东，想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HTML5中有关HTMLDocument方面新添加的内容都有什么呢?HTML5中有关HTMLDocument方面新添加的内容有readyState属性、兼容模式判断和head属性。下面就为大家一一介绍这些新添加的小东东吧。

2014-01-26 09:17:34 3221

原创 HTML5实战与剖析之焦点管理(activeElement和hasFocus)

现在的网站越来越注重残障人士了，很多网站都开始有专为视力不好的人们制作一些便捷通道，方便他们进行浏览网页。下面就为大家介绍一下有关焦点管理和盲人网站方面的事儿，希望能对大家有所帮助。

2014-01-24 09:47:04 4547

原创 HTML5实战与剖析之classList属性

前面为大家介绍了一些有关HTML5新添加的选择器，分别是querySelector()，querySelectorAll()和getElementsByClassName()。这三个都有自己独特的功能，大家有需要的话可以看HTML5实战与剖析中的相关内容。今天为大家介绍classList属性。

2014-01-22 09:16:21 2964

原创 HTML5实战与剖析之CSS选择器——getElementsByClassName()方法

HTML5中的querySelector()方法和querySelectorAll()方法都在前几篇中为大家介绍过了，不知道大家了解得怎么样了呢?在这里复习一下，querySelector()方法是返回与传递的CSS选择符相匹配的第一个元素;querySelectorAll()方法是返回与传递的CSS选择符相匹配的所有元素，是一个NodeList对象。

2014-01-21 08:44:06 6476

原创 HTML5实战与剖析之CSS选择器——querySelectorAll()

之前，我们介绍了HTML5中的选择器querySelector()。今天，我们继续为大家分享HTML5中新添加的选择器querySelectorAll()。querySelectorAll()方法接收的参数也是CSS选择符，但是返回的是所有匹配元素，而querySelector()方法返回的是第一个匹配的元素。querySelectorAll()方法返回的是一个NodeList的实

2014-01-20 09:43:20 7825

原创 HTML5实战与剖析之CSS选择器——querySelector()

今天为大家介绍一下HTML5的相关知识，今儿主要以新增的选择器为主题，为大家介绍。今天为大家介绍的选择器是querySelector()。我将用jQuery和JavaScript两种写法对比的方式为大家分享。希望能为大家在学习HTML5的道路上有所帮助。

2014-01-17 08:50:50 4148

原创 HTML5实战与剖析之是否从主屏幕图标进入的网站

手机端的IOS系统中的safari浏览器可以把Webapp作为图标存在本地方便用户进行查看。那么我们怎么用户是否从主屏幕图标进入的网站呢?下面将为大家慢慢介绍。

2014-01-16 10:10:18 2519

原创 HTML5实战与剖析之判断移动端横屏竖屏功能

在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿梦龙就为大家分享分享。

2014-01-15 08:51:24 13136

原创 HTML5实战与剖析之移动端IOS系统收缩地址导航栏功能

前些日子为大家倾囊为大家分享了一些有关移动端的结构与标签的相关介绍，今天将继续为大家介绍的则是一个小小的功能，那就是移动端IOS系统收缩地址导航栏功能。以上便是有关HTML5实战与剖析之移动端IOS系统收缩地址导航栏功能的介绍，大家以后再遇到这样的需求的时候还是会比较方便的拿来就能用了。

2014-01-14 08:56:02 2708

原创 HTML5实战与剖析之一行一行看移动端结构

很长时间不和大家分享小东东了，在这里梦龙向大家说声对不起啦。之前，也给自己放了个长假。由于个人小原因换了个比较有前途的公司，从Web前端变成了HTML5了。我打交道的也从PC端变成了移动端，瞬间也觉得有很多值得玩的东西了，想到这里也感觉浑身充满了干劲儿。

2014-01-13 08:41:48 2302

原创 HTML5实战与剖析之延迟脚本

什么是延迟脚本呢?重度剖析HTML5之延迟脚本是帮大家解决一些JavaScript加载问题的。有了重度剖析HTML5之延迟脚本这个功能，我们可以不再为了JavaScript加载而发愁页面加载的时候结构会凌乱了。

2014-01-10 09:12:30 2555

原创配置本地环境之Mongodb在Windows XP下安装及配置

今天看了一本关于nodejs 的书籍，里面有要求使用mongoDB数据库的相关知识。了解这些知识之前，还是要先安装一下mongoDB。下面就是安装的相关步骤，希望能对大家在安装mongoDB有所帮助。　　1、下载mongoDB　　根据自己电脑的系统配置，下载mongoDB的版本。由于我电脑是XP系统的，所以先用XP系统安装作为案例。下载地址：http://www.mongodb

2014-01-09 09:12:15 4088

原创配置本地环境之phpmyadmin安装

phpmyadmin的配置是了解php语言的一个前期准备工作。

2014-01-08 08:49:49 3430

原创配置本地环境之mysql数据库安装

Mysql下载　　http://www.leemagnum.com/zip/mysql.zip　　Mysql安装步骤如下图　　第1步　　第2步　　第3步　　第4步　　第5步　　第6步　　第7步　　第8步　　第9步　　第10步　　第11步　　第12步　　第13步　　第14步　　第15步　　第16步　　第17步　　第18步

2014-01-07 08:48:52 5102

原创配置本地环境之PHP开发环境的搭建

PHP开发环境搭建　　PHP下载-　　http://www.leemagnum.com/zip/php.zip　　PHP安装-　　压缩到指定目录即可　　将apache和php整合-　　在apache的conf目录下的httpd.conf，前面加入如下代码　　LoadModule php5_module D:/MyHost/PHP/php5apache2_2.dll

2014-01-06 09:10:58 1839