摘要：
翻屏 阅读全文
随笔分类 - html5相关
placeholder
2012-02-18 08:18 by 边缘er, 483 阅读, 收藏, 编辑
摘要：
html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。(function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function Placeholder(obj){ ... 阅读全文
html5离线
2012-02-17 21:47 by 边缘er, 377 阅读, 收藏, 编辑
摘要：
要构建离线应用程序，需要一个以manifest为后缀名的离线清单，清单中包括3类内容，1.CACHE：需要缓存的文件2.NETWORK：不需要缓存的文件3.FALLBACK：包括2个文件，第一个是能在线访问的资源，第二个是如果第一个访问不了的备用资源list.manifest文件示例CACHE MANIFEST#注释以#开头，清单必须以CACHE MANIFEST开头CACHE#下面是需要缓存的文件test.jstest.csstest.jpgNETWORK#以下是不需缓存的文件over.htmlabout.htmlFALLBACK#加入1.js读取不到就用2.js1.js 2.js使用离线清 阅读全文
html5 web Storage
2012-02-17 21:46 by 边缘er, 271 阅读, 收藏, 编辑
摘要：
web Storage本地存储是对cookies机制的改善。Storage分为sessionStorage和localStorage（都是window的属性）。前者在窗口之间可以共享存储数据（会话），如果关闭浏览器，数据就没了；后者即使关了浏览器再打开依然可以读到数据（需是同一个浏览器）。二者的用法一样。简单示例首页<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5 webStorage</title></head> 阅读全文
html5 workers线程
2012-02-17 21:42 by 边缘er, 314 阅读, 收藏, 编辑
摘要：
html5之前，javascript脚本都是在单线程中执行的，也就是说如果js运行时间过长，除了等待什么也干不了，甚至卡死。创建一个worker后台线程，这样就不影响前台的渲染了。简单演示主页面<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5 workers</title></head><body><span id="span1">5</span><di 阅读全文
html5 webSockets实时通信
2012-02-17 21:39 by 边缘er, 386 阅读, 收藏, 编辑
摘要：
webSockets是html5提供的客户端和服务器端通信机制，优点是一旦连接建立成功，它就是双向的、实时的、永久的（除非被显式的关闭）。建立连接var w = new WebSockets('ws://bianyuan.me');建立一个WebSockets连接实例即可，注意url必须以ws或wss（加密通信）开头。这样就可以和服务器端进行通信了，当然前提是服务器端支持WebSockets并已配备好。websockets3个监听事件//打开事件w.onopen = function(){alert('连接已打开')}//接收数据通信事件w.onmessage 阅读全文
html5 geolocation地理位置
2012-02-17 21:36 by 边缘er, 323 阅读, 收藏, 编辑
摘要：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html5 geolocation</title><link href="css/html5.css" rel="stylesheet" type="text/css"></head><body><span id="support">请将下面的经纬度输入谷歌地图： 阅读全文
html5 message和postMessage跨域
2012-02-17 21:34 by 边缘er, 556 阅读, 收藏, 编辑
摘要：
设计背景：父页面和子页面(iframe)不同域，进行跨域操作。实现功能：父页面可以改变子页面的"状态"内容，子页面可以改变父页面的title。父页面代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>postMessage演示</title></head><body><p><b>父页面源</b>: event51</p><input type 阅读全文
html5中的video和audio
2012-02-17 20:55 by 边缘er, 965 阅读, 收藏, 编辑
摘要：
html5中的video和audio最大的优点就是不需要第三方插件，可以直接插入，并且用同一的API接口控制；目前缺点就是不支持流播放和播放媒体类型不统一。<video src="test1.mp4" controls>如果浏览器不支持，备用代码写在这里，比如可用flash插入视频或是提示</video><audio src="test2.mp3" controls>同上</audio>如果浏览器不支持，备用代码写在这里，比如可用flash插入视频或是提示如果使用了controls属性，就是使用默认的播放控 阅读全文
html5强大的表单
2012-02-17 20:53 by 边缘er, 647 阅读, 收藏, 编辑
摘要：
html5表单无论多么强大，都不能依赖它自身的验证，服务器的验证是不可少的。html5表单的验证能更快的把结果反映给用户，增强用户体验。input新增的type类型tel,email,url,search,range,number,color,datetime,datetime-local,time,date,week,month。这些type类型的含义一看就明白，目前opera浏览器是支持最好。如果输入的值不符合相应类型，就会报错。新增属性1.required：此项为必填项。2.placeholder：默认显示的描述或提示信息，比如placeholder="请输入账号"， 阅读全文
初识html5
2012-02-17 20:50 by 边缘er, 189 阅读, 收藏, 编辑
摘要：
变简洁了DOCTYPE声明声明没有那么长了，只需<!doctype html>即可。charset编码拿utf-8编码来说，<meta charset="utf8">。有没有引号无所谓，大小写无所谓（html本身就很松散，不像xml，但最好养成良好的习惯）。html、head、body这3个标签是可选的，浏览器会自动生成，为了可维护行，最好写上。部分新增标签header：页眉，用于整个页面或某区块footer：页脚，同上section：一部分一个块（有点像DIV）article：自构成的一部分，可以复用或聚合。如一篇博客，一个故事，一个教程等asid 阅读全文
