详细介绍Html5响应式设计实现九宫格的示例代码（图）
自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。 至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下：12345678910111213141516171819202122232425262728293031323334353637383940414243
HTML5
HTML5元素拖拽drag与拖放drop相关API的具体介绍（图文）
其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来（手动滑稽） 今天就来写一下这个拖拽API默认拖拽说起拖放，其实最早实现拖放功能的还是IE（IE4） H5就是在IE实例的基础上指定的拖拽规范 在浏览器中，是有默认拖拽的 比如说图片的拖拽选中文本的拖拽链接的拖拽元素拖拽浏览器默认
HTML5无插件多媒体Media-音频audio与视频video的详细介绍
音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 仍然选择使用flash（源码截自优酷）多媒体标签使用HTML5增加了audio与video两个多媒体标签 兼容性还不错，低版本IE不支持 可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件 而且非常的简单（源码截自Bilibili）元素用法如下:12<audio src="media/xi-Halcyon.mp3" id=
具体解析HTML5文件读取FileReader及文件读取模块的封装
FileReader是File-API重要的组成部分 用于读取本地文件FileReader创建要想使用读取文件功能 同样需要实例化FileReader对象1var fr = new FileReader();它为我们提供了一些接口方法和事件方法通过实例对象可以调用5个方法 其中4个指定文件读取方式 另1种方法用来中断文件读取API参数描述FileReader.readAsBinaryStringFile/Blob文件读取为二进制字符串，每字节包含一个0到255之间的整数FileReader.readAsT
HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法（图文）
HTML5提供了Geolocation-API允许我们获取地理位置坐标 不过只有针对特定的需求才会用到 比如说地图应用一般还是很少用到的Geolocation-API使用的方法也很简单 API都存在于navigator.geolocation对象的原型上核心的方法就是getCurrentPostion和watchPositiongetCurrentPositionnavigator.geolocation.getCurrentPosition方法有三个参数success 获取位置信息成功的回调函数（必须）
HTML5多线程JavaScript解决方案Web Worker-专用Worker和共享Worker的详细代码介绍
不得不说，HTML5确实提供了大量强大的功能特性 甚至颠覆了我们之前理解的JavaScript单线程 它提供了JavaScript多线程的解决方案 这个新特性叫做Web Worker （在此之前没有多线程，setTimeout等本质仍然是单线程） 虽然是多线程编程 不过我们不用担心传统的多线程语言C++、Java等等遇到的多线程问题 下面我们就来看看什么是Web Worker专用Worker专用Worker（Dedicated Worker）是最常用的Web Worker 而且各个浏览器实现的还不错声明什
HTML5新增加的标签和表单新增属性的代码实例
1.以前的盒子都有<p>标签，现在都用语义化的标签，例如：<header>头标签<nav>导航栏标签<aside>侧栏标签<article>文章内容标签<footer>页脚标签<section>章节、页眉、栏目代码如下：1234567<header>头部</header><nav>导航</nav><section> &l
如何自动获取HTML5的data-*属性示例代码详解
项目中需要设计一系列的自定义标签，于是涉及到标签的属性如何访问。使用 HTML5 的 data-* 属性的话，获取元素后直接访问 dataset.属性名称 即可，dataset 的类型为 DOMStringMap {}，一个 MAP 对象，仍是 key / value 式的对象，使用上比较方便。但却遇到一个兼容性的问题， 在 Android 2.3 等的一些旧有浏览器上尚不支持。对此，我们可以写一个兼容性的补丁。主要原理是在“劫持” document.querySelector/querySelector