HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石，至今还很少人知道它的价值。 你可能已经知道了那古老而又闻名的图片预加载功能，链接预取功能就是将此概念由图片扩展到了网页内容（不需要任何AJAX代码）。 它是这样工作的：在页面上添加一个像这样的链接： 代码如下: 这样，当你的机器空闲时，浏览器就会自动的在后台把page2.html下载下来。 当用户最终点击了page2.html的链接时，浏览器会从缓存里把这个页面取出来...
在html 5中，可以设置当页面加载时，自动焦点到达某个控件中，这个就是autofocus属性了，如下： 代码如下: Hi! 浏览器支持该属性的有： fiefox 4+,safari 5+,chrome 6+,opera 11+,ie 10, 而android 2.3和safari mobile 5-都不支持 实例 当页面加载时，会获得焦点的一个按钮： 代码如下: 点击这里 亲自试一试 定义和用法 autofocus 属性规定当页面加载时按钮应当自动地获得焦点。 如果使用该属性，则按钮会获得焦点。 HTML 4.01...
HTML5是最新的HTML标准，或迟或早，所有的web程序员都会发现需要使用到这个最新的标准，而且，很多人都会感觉到，重新开发一个HTML5的网站，要比把一个网站从HTML4迁移到HTML5上容易的多，这是因为这两个版本之间有很大不同之处。 事实上，HTML5并没有对HTML4做什么重大的修改，它们很多东西都是相似的。 可是，其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部，全部列出来是不可...
在前面的几篇文章里，我向大家共享了几个HTML5的例子，分别是拖拽功能演示，页面内容可编辑化演示 和 本地存储功能演示。 今天，我将向大家分享一个简单的应用，用来演示使用FileReader的方法, FileReader是HTML5里提供的一个文件操作API。 当你在看我前面所写的HTML 5例子时，我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API，而是想用例子来告诉开发...
淘宝网的语音搜索也有了一阵子了，但似乎都没看到相关的博客或帖子在说这个如何实现，今天查了点资料，发现原来实现是如此简单，可能是因为太简单了，也就没有人讨论了吧。 其实实现只需一句代码即可： x-webkit-speech 一看到这句代码，想到了什么？对，这说明语音搜索只支持webkit内核浏览器，那么这段代码具体要放在哪呢？代码如下:放在文本输入框内就行了，其他的什么都不用做，看当然还有一些其他的参数，比如设置语音限制语言...
HTML5 向开发人员提供了很多新的标签, 如 section, nav, article, header 和 footer 等. 这些标签语义化程度高, 会被经常使用, 但在 IE6, IE7, IE8 和 Firefox 2 等老式浏览器中不能识别和正常使用.为什么老式的浏览器不能识别这些标签? 其实错不在浏览器, 因为在那个时代根本不存在这种标签, 所以不能正确识别出来, 而这种不寻常的标签识别令 DOM 结构变得异常. 我们有测试代码如下. 是一个文章标题和蓝色字的文章内容, 其中文章内...
在canvas中当在canvas上写width和height时为canvas的实际画板大小，默认情况下width为300px，height为150px。 在style里面写css样式的时候widht和height为实际显示尺寸大小。 现在以用canvas画一个对角线为例： 代码如下: canvas window.onload = function(){ getCanvas(); }; //canvase绘图 function getCanvas(){ //获得canvas元素及其绘图上下文 var canvas = document.getElementById('canvasId'); var context = canvas.g...
Javascript中的数组是个强大的家伙： 你可以创建的时候不规定长度，而是动态的去改变长度。你可以把他当成普通的数组去读取，也可以当他是堆栈来使用。你可以改变数组中每个元素的值甚至是类型。 好吧，其实他是一个对象，比如我们可以这样去创建数组：代码如下:var array = new Array(10);Javascript的数组的强大以及全能，给我们带来了便捷性。但一般而言： 全能的东西能在各种环境下使用，但却不一定适用于各种环境。 而TypedAr...
在html5中我觉得最重要的就是引入了Canvas，使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。在html5外web中也有基于xml的绘图如：VML、SVG。而Canvas为基于像素的绘图。Canvas是一个相当于画板的html节点，我们必须以js操作绘图。 如下： 你的浏览器还不支持哦定义。 我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举： 1：绘制渲染对象，c.g...
好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后分享出来。 开始进入正题，提到slider，过去一直都是用css+js来配合实现相关的...
Html5支持语音搜索，可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可，例子如下： 这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示 这时说出来识别后就可以了，如淘宝店语音搜素：语音输入其他属性： lang 就是语言种类 可以控制输入框里面的语音的语言种类，例如 目前已知的只有onwebkitspeechchange，顾名思义，就是语音发生变化时触发的事件，一般可以作为...
谷歌的网站是时逛时新啊，今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可，例子如下： 代码如下: 这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示 这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。 语音输入其他属性： lang这玩意可以强制输入框里面的语音的语言种类，例如 语音事件目...
先来看一段正常的canvas画图语法：代码如下:ctx.arc(centerX,centerY,radius,0,PI*2,true);ctx.shadowColor = rgba(0,0,0,0.5);ctx.shadowBlur = "10";ctx.fill();ctx.beginPath();ctx.shadowColor = rgba(0,0,0,0);ctx.moveTo(centerX-radius,centerY);ctx.lineTo(centerX-radius,centerY - 50);ctx.lineTo(centerX+radius,centerY - 50);ctx.lineTo(centerX+radius,centerY);// ctx.lineTo(centerX-radius,centerY);ctx.fill();c...
今天我们将把html5的geolocation结合google maps开发一个小的应用。google maps的api地址：https://developers.google.com/maps/documentation/javascript/?hl=zh-CN。 调用google maps，实现需要添加js引用，其中sensor参数的具体含义： 要使用 Google Maps API，您需要指明自己的应用程序在任何 Maps API 库或服务请求中是否是使用传感器（如 GPS 定位器）来确定用户所处位置的。这对移动设备尤为重要。如果您的 Google Maps API...
html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能说：爱信不信！ 下面我们来看一个标准的html5标签结构：（我这里只是说标签，其它概不涉及） 代码如下: html5