随笔分类 - HTML5
摘要:web worker 简介 === 通常,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题。通过worker线程完成密集计算,避免程序的阻塞和页面的卡顿( fps过低 ) 示例 用fibonacci数列来模拟测试 worker te
阅读全文
摘要:[转]html5: postMessage解决跨域和跨页面通信的问题 =================== 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 1. 多窗口之间消息传递( ); 2. 页面与嵌套的iframe消息传递 postMessage方法
阅读全文
摘要:客户端持久化解决方案:indexedDB ======================== indexedDB适合大量的结构化的数据存储;打开数据库和获取数据对象都是异步的; 需要开启事务,访问的objectStore都要是在开启的事务中。 数据库结构: db transaction objectS
阅读全文
摘要:客户端持久化解决方案: Web SQL ============= 提供了一组使用 操作客户端数据库的 APIs, 不是 HTML5 规范的一部分,是一个独立的规范. 核心方法 + : 打开或新建数据库,返回数据库对象。 + : 打开一个事务,从而可以执行提交或者回滚。 + : 执行实际的 SQL
阅读全文
摘要:客户端数据持久化解决方案: localStorage ============================== localStorage主要用来替代cookie,解决cookie读写困难、容量有限的问题。 有以下几个特点 1. 是一个普通对象,任何对象的操作都适用。 2. 对象的属性值只能是字符
阅读全文
摘要:转: HTML5新特性之Mutation Observer ========================= Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知
阅读全文
摘要:script中的async和defer ======================= defer : This Boolean attribute is set to indicate to a browser that the script is meant to be executed aft
阅读全文
摘要:Html 5 drag and drop 简介 ========================= HTML5提供了专门拖拽和拖放的API draggable属性 启用拖拽 draggable属性是否可被拖拽, 可选值: , , 可以被拖拽哦 1. 为触发拖拽的元素添加 特性,用于启动HTML5的D
阅读全文
摘要:移动平台对 meta 标签的定义 ===================== 下面介绍一些有关标记的例子及解释。 一、meta 标签分两大部分:HTTP 标题信息(http equiv)和页面描述信息(name)。 1. (页面内容类型和字符集的设定) 说明:设定页面使用的字符集,用以说明主页制作所
阅读全文
摘要:canvas 基础 ================== 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas 你的浏览器不支持canvas var canvas = document.getElementById('canvas'); if(
阅读全文
摘要:HTML5的特点 + 绘图支持 canvas + 多媒体支持 video audio + 离线应用 和 离线存储 + 新的语义化元素 article footer header nav section + 表单增强 calendar date time email url search 浏览器对HT
阅读全文
摘要:从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论。正当你想要停下滚轮细看的时候,手残按到了F5。然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次。 再或者,你想把这个评论发给别人分享,一面给了别人页面地址(为什么不直接复制
阅读全文
摘要:## HTML5的特点+ 绘图支持 canvas+ 多媒体支持 video audio+ 离线应用 和 离线存储+ 新的语义化元素 article footer header nav section+ 表单增强 calendar date time email url search## 浏览器对HT...
阅读全文
摘要:viewpointcss3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh,...
阅读全文
摘要:示例见: css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目
阅读全文
摘要:最近我做了一点儿针对手机的Web开发和相关研究。按说,Web自设计之初,就已经考虑了设备无关性。然而,现实总是不尽如人意。 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显示器小很多,比如iPhone也就是320px。那么那些网页在手机上如何浏览呢? 一种是把网页缩放到很
阅读全文
摘要:最近仿的几个主题中,有几个是采用html5语法制作的,html5嘛,以后必然大势所趋,但是现有的很多浏览器并不支持这种新的标准。而我制作网站习惯用的是chrome浏览器的,当然不存在不兼容问题了。 it is header content it is footer content等主题做完上线后,...
阅读全文
摘要:最近我很关注移动前端的知识,但做为一个UI设计师和web前端工作人员没有这个工作环境接触,做为门外汉,网上系统的知识也了了,一直有种雾里看花的感觉,见到本文,我自己是奉为经典。所以我分享之后又专门打笔记留帖。 Go! 原文: 原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方博整理的,让我们了
阅读全文
摘要:js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。 touchstart在触摸开始时触发事件 touchend在触摸结束时触发事件 touchmove这个事件比较奇怪,按道理在触摸到
阅读全文
摘要:~~~针对需要读取本地图像,并立即显示在浏览器的情况,由于chrome firefox出于安全限制,input file并不返回文件的真实路径,经测试IE6/7/8都会返回真实路径,所以chrome, firefox无法直接将图像显示在页面上,这里刚好可以用到 FileReader这个东东 我们曾经
阅读全文