介绍IndexedDB是HTML5 WEB数据库，允许HTML5 WEB应用在用户浏览器端存储数据。对于应用来说IndexedDB非常强大、有用，可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量数据，下面简单介绍一下IndexedDB的基本概念。 什么是IndexedDBIndexedDB，HTML5新的数据存储，可以在客户端存储、操作数据，可以使应用加载地更快，更好地响应。它不同于关系型数据库，拥有数据表、记录。它影响着我们设计和创建应用程序的方式。IndexedDB...
引子： 最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。 第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器...
最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用 type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。type="tel" 和 type="number" 的区别 这里还是先那么先交代一下最初遇到的问题。其实无论是tel还是number都不是完美的：type="tel"优点是iOS和Android的键盘表现都差不多 缺点是那些...
HTML 4.01 与 HTML 5 之间meta标签用法的主要差异： 在 HTML 5 中，不再支持 scheme 属性。 在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。 在 HTML 4.01 中，不得不这么写：XML/HTML Code复制内容到剪贴板meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 在 HTML 5 中，这样就够了：XML/HTML Code复制内容到剪贴板meta charset="ISO-8859-1"> 例子 定义针对搜索引擎的关键词：X...
2007年W3C(万维网联盟)立项HTML5，直至2014年10月底，这个长达八年的规范终于正式封稿。过去这些年，HTML5颠覆了PC互联网的格局，优化了移动互联网的体验，接下来，HTML5将颠覆原生App世界。这听起来有点危言耸听，但若认真分析HTML5的发展史，你会发现，这个世界的发展趋势确实就是这样。HTML5对开发者的7大优势 跨平台：在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，...
大文件分块 一般常用的web服务器都有对向服务器端提交数据有大小限制。超过一定大小文件服务器端将返回拒绝信息。当然，web服务器都提供了配置文件可能修改限制的大小。针对iis实现大文件的上传网上也有一些通过修改web服务器限制文件大小来实现。不过这样对web服务器的安全带了问题。攻击者很容易发一个大数据包，将你的web服务器直接给拖死。 现在针对大文件上传主流的实现方式，通过将大文件分块。比如针对一个100M文件，按2M拆...
HTML5对表单元素提供了patern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。 比如下面这个表单内，文本框只接受大陆的手机号，输入其它东西就无法提交运行XML/HTML Code复制内容到剪贴板> form> input id="text" pattern="^1[3-9]\d{9}$" required /> input ...
1.跨文档消息通信跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信。它把postMessage API定义为发送消息的标准方式。利用postMessage发送消息非常简单，代码如下所示：chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');接收消息时仅需在页面种增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。消息事件是一个拥有data(数据)和origin(源)属...
HTML5 引入了两种机制，类似于 HTTP 的会话 cookies，用于在客户端存储结构化数据以及克服以下缺点。 每个 HTTP 请求中都包含 Cookies，从而导致传输相同的数据减缓我们的 Web 应用程序。 每个 HTTP 请求中都包含 Cookies，从而导致发送未加密的数据到互联网上。 Cookies 只能存储有限的 4KB 数据，不足以存储所需的数据。这两种存储方式是 session storage 和 local storage，它们将用于处理不同的情况。 几乎所有最新版的浏览器都...
meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、声明文档使用的字符编码XML/HTML Code复制内容到剪贴板meta charset='utf-8'> 2、声明文档的兼容模式XML/HTML Code复制内容到剪贴板meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高...
HTML5 的 HTML 语法允许我们在文档内使用 ... 标签应用 MathML 元素。 下面是一个使用 MathML 的有效 HTML5 文档：XML/HTML Code复制内容到剪贴板html > html> head> meta charset="UTF-8"> title>Pythagorean theoremtitle> head> body> math xmlns="http://www.w3.org/1998/Math/MathML"> mrow> msup>mi>ami>mn>2mn>msup> mo>+mo> msup>mi>bmi>mn>2mn>msup> ...
本地缓存是HTML5出现的新技术，这个技术的出现使得移动web的开发成为了可能。我们都知道，要想打造一个高性能的移动应用，速度是关键。而在HTML5之前，只有cookie能够存储数据，大小只有4kb。这严重限制了应用文件的存储，导致web开发的移动应用程序需要较长的加载时间。有了本地存储，让web移动应用能够更接近原生。 浏览器中，本地存储通过window.localStorage调用。判断浏览器是否支持本地存储的代码如下：XML/HTML Code复制内容...
音频和视频的编码/解码器是一组算法，用来对一段特定的音频或视频流进行编码和解码，以便音频和视频能够播放。原始的媒体文件体积非常大，假如不对其进行编码，那么构成一段视频和音频的数据可能会非常庞大，以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话，接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式，并且对其中的音频轨道和视频轨道解码。理解媒体元素1、基本操作：声明媒...
基本绘制XML/HTML Code复制内容到剪贴板var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 线宽 context.lineWidth = 4; // 画笔颜色 context.strokeStyle = 'red'; // 填充色 context.fillStyle = "red"; // 线帽类型 context.lineCap = 'butt'; // round, square // 开始路径 context...
lufylegend是一个HTML5开源引擎,它实现了利用仿ActionScript3.0的语法进行HTML5的开发， 包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多个AS开发人员熟悉的类， 支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多种热门环境。 利用lufylegend可以轻松的使用面向对象编程，并且可以配合Box2dWeb制作物理游戏， 另外它还内置了LTweenLite缓动类等非常实用的功能, 现在开始使用它吧，它...