最近间插着看了<<HTML.5与CSS.3权威指南>>和<<HTML5秘籍>>两本书,将重要知识点记录下以便沉淀

 
一.兼容性
原则:不破坏现有web,给广泛应用的非标准行为正名,实用至上
W3C官方HTML5标准网址:www.w3.org/TR/html5
非官方新功能: 1. whatwg.org/html     2. blog.whatwg.org
html5验证 :1. validator.w3.org    2.  modernizr.js,插入此js到html5页面,便能检测出浏览器html5兼容情况
html5浏览器支持情况 :  caniuse.com
腻子脚本 : google chrome frame    老浏览器用js   tinyurl.com/polyfills 
现成的正则表达式  regexlib.com
 
二.语义化
语义化html : 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览功能
分区级语义元素,article  aside  figure  figcaption  footer header hgroup nav section
 

 
文本级语义元素,time  output  mark
其它语义标准, ARIA,RDFa,Microformats(microformats.org/wiki,其中hCard和hCalendar最流行,Oomph的js可以丰富其效果),
Microdata(元数据,由html5规范分离)
google rich snippets:检测提供的页面,展示google从中提取出来的语义数据, (支持RDFa,微格式,微数据等, tinyurl.com/google-richsnippets, www.google.com/webmasters/tools/richsnippets)
语义数据被google忽略的原因: 语义数据不是主要内容, 语义元素被css隐藏 ,网站中语义页面过少
查看html纲要
 
三.表单
水印(站位)文本:  html5  <input id="name" placeholder="Cohlint"> 
首次焦点: 只能给一个input或者textarea添加, <input id="name" placeholder="Cohlint"  autofocus>
验证:<input id="name" placeholder="Cohlint"  autofocus required>  required(必填) optional(选填) valid(有效) invalid(无效) in-range(范围内) out-of-range(超出范围),以上属性可用于css伪类:如input:required:invalid{color:yellow;}
关闭验证: 1.<form id="f" action="sev.asp" novalidate>  2.<input type="submit" value="save" formnovalidate>
正则验证:不必使用^和$,html5自动确保匹配的是字段中完整的值,例:<input type="submit" value="save" patten="[A-Z]{3}-[0-9]{3}">
自定义验证:<textarea id="comments" oninput="validateComments(this)"></textarea>  这里,onInput事件会触发一个名为validateCommnets()的函数,代码自己写,然后调用setCustomValidity()方法,
              function validateComments(input){
                   if(input.value.length<20){
                    input.setCustomValidity("You need to comment in more detail.");
                    } else {
                    input.setCustomValidity("");  //没有错误,清除任何错误消息
                    }
              }
html5几个非验证属性:Spellcheck(true|false) 英文拼写检查;  Autocomplete(on|off) 自动完成 ;Autocorrect autocapitalize(移动设备纠错和自动大小写);Multiple(可为部分input元素添加,比如file,email)
新的input控件: <input type=(email|url|search|Tel|number|range|datetime|date|month|week|time|color)>
新元素<datalist>,可以让文本框显示一个下拉建议列表
进度条和计量条:<progress> <meter>,<progress value="0.25"></progress>   <progress value="50" max="200"></progress>   <meter min="5" max="70" value="28">28 pounds</meter>
元素编辑contentEditable:  <div id="ce" contentEditable>here can edit</div>,不过网页一旦可编辑,元素便不会触发事件
整页编辑designMode: document.designMode="on",可利用iframe实现
改良元素:
      dl     :  术语列表 ====>带有多个名字的列表项,每一项包含一个dt和dd
      cite  :  不能引用作者了,只能引用作品
      small:  专门用来标识"小字印刷体"元素,通常用在免责声明,注意事项,法律规定,同时不允许出现在页面主内容中
文件API:
     FileList对象:用户选择的文件列表,file对象数组
     file对象:属性name表示文件名,不包括路径;lastModifiedDate属性表示文件最后修改日期
     Blob对象: 表示原始二进制数据,提供一个slice方法,访问字节内部原始数据块,size属性表示对象字节长度,type属性表示mime类型,切都以"image/"开头;file对象也集成自blob对象
     FileReader接口:把文件读入内存,提供了一个异步API,有4个方法
          readAsBinaryString(file):将文件读取为二进制码
          readAsText(file,[encoding]):将文件读取为文本
          readAsDataURL(file):将文件读取为DataURL
          aboit():中断读取操作
          6个事件:onabort,onerror,onloadstart(读取开始),onprogress(读取中),onload(成功),onloadend(成功或失败)
拖放API:
     相关事件
     事件                    产生事件的元素                    描述
     dargstart             被拖放的元素                        开始拖放操作
     drag                    被拖放的元素                        拖放过程中
     dragenter            拖放过程中鼠标经过的元素     被拖放的元素开始进入本元素的范围内
     dragover             拖放过程中鼠标经过的元素     被拖放的元素正在本元素范围内移动
     dragleave            拖放过程中鼠标经过的元素     被拖放的元素离开本元素的范围
     drop                    拖放的目标元素                     有其它元素被拖放到了本元素中
     dragend               拖放的对象元素                     拖放操作结束
     DataTransfer对象专门用来存放拖放时携带的数据,它可以被设置为拖动事件对象的dataTransfer属性,有setData("text/plain","你好")方法,getData(DMOString format)方法,clearData(DMOString format)方法,setDragImage(Element image,long x,long y)
 
四.音视频
缺点:
1.没有版权保护
2.不支持客户端之间音视频传送,比如在线聊天视频
3.不支持精细化控制,比如调整质量,分辨率,缓冲等
4.不支持高性能音频,比如虚拟合成器,音乐观察器
5.不支持动态创建或编辑音视频
 
<audio src="hello.mp3" controls autoplay loop preload="metadata|auto|none"></audio>
<video src="hello.mp4" controls autoplay loop preload="metadata|auto|none" width="600" height="400"  poster="pre.jpg"></video>
以下三种情况视频窗口会使用poster图片:(1)视频第一帧未加载完毕 (2)preload设置为none (3)没有找到指定视频文件
 
兼容多种格式:
<audio id="audio3">
<source src="boing3.wav" type="audio/wav">
<source src="beep.mp3" type="audio/mp3">
<p>don't support html5</p> //此行对于不支持html5的浏览器显示
</audio>
 
js控制:
video.pause();   
video.currentTime = 0; //当前时间
video.duration //视频时间   
video.play();   
video.playbackRate =2; //播放速度
 
属性:
src,autoplay,preload,poster(video独有),loop,controls,
width与height(video独有),error(error.code=1|2|3|4),currentSrc(只读),buffered(实现TimeRanges接口,已缓存数据TimeRanges.start(0),TimeRanges.end(0)),
readyState(0|1|2|3|4,媒体就绪状态),seeking与seekable(表示浏览器是否正在请求某一特定播放位置的数据),
currentTime,startTime与duration:读取和计算媒体当前播放位置,
played,paused,ended,defaultPlaybackRate与palybackRate
方法:play,pause,load,canPlayType
 
 
html5视频播放插件: (1)jquery  www.jplayer.org  (2) vedeojs.com   两个都支持flash后备
字幕插件: VideoSub  www.storiesinflight.com/js_videosub/     LeanBack Player dev.mennerich.-name/showroom/html5_video
 
web常用音视频格式
mp3           .mp3   audio收费
ogg vorbis  .ogg    audio免费
wav           .wav    audio未压缩,大
H.264        .mp4    video收费
ogg theora  .ogv     video免费,质量稍次
webm        .webm  video免费,google收购推广,有潜力
 
 
五.canvas (这个信息量很大,要另外整一篇)
 
六.数据存储
 
本地存储 localStorage,长期保存整个网站的数据,大多数浏览器限制在5M以下
会话存储 sessionStorage,临时保存一个窗口或标签页的对象
localStorage[keyName] = data;
sessionStorage["lastUpdateTime"] = data;
sessionStorage.setItem(key,value);
sessionStorage.getItem(key);
localStorage.removeItem("user_name");
localStorage.clear();
localStorage.key(); 取得保存过的所有数据项;
localStorage[keyName] = JSON.stringify(score);  /*用JSON.parse() 转成对象
被保存的数据会自动被转化成string格式,
数据存储发生变化时,同一域下打开的页面会触发window.onStorage 事件,事件属性有key,oldValue和newValue
SQLLite: 
     var db = openDatabase('dbname','dbversion','db descirption','db size');
     db.transaction(function(tx){
          tx.executeSql(sqlquery,[],dataHandler,errorHandler);     
})
更强大的数据库: Indexed DB
 
 
七.离线应用
一个MANIFEST文件告诉页面存什么,可以一个页面一个MANIFEST,也可以多个页面共享MANIFEST
safari默认限制5MB,Firefox默认限制50MB,mime类型: text/cache-manifest
<html lang="en"  manifest = "PersonalityTest.manifest">
CACHE MANIFEST(必写,下面列表中页面本身不需要写)
test1.html
test2.html
1112.png
 
NETWORK:    (不进行本地缓存的资源文件,支持通配符)
Images/logo.png  
 
FALLBACK:   (备胎,在线/离线,支持通配符)
test3.html  test4.html
*.jpg   test.jpg
 
applicationCache 对象代表本地缓存,可以通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存.
     onUDateReady事件,通知本地缓存已被更新;swap方法控制如何进行本地缓存更新
 
八.通信API
短轮询:客户端定期setTimeOut或者setInterval请求;服务器端马上响应
长轮询:客户端定期请求,服务器端先hold住,有数据再响应
服务器发送时间:保持链接,服务器端推, header("Content-Type:text/event-stream"),header("Cache-Control:no-cache")
     格式  id:495\n
             retry:15000\n  (失去连接后,客户端到时把数据和ID一起重发)
             data:Hello World.\n\n
     客户端网页接收到的消息不会包含data:和\n\n,只有其中的消息内容,监听代码如下:
     var source = new EventSource("TimeEvents.php");
     source.onmessage = receiveMessage;
     function receiveMessage(e){
          timeDisplay = e.data ;
     }
     
跨文档消息传输(眉来眼去剑法)
A页:
window.addEventListener("message",function(ev){
     alert("从"+ev.origin+"那里传过来的消息:\n\"+ev.data);
},false);
otherWindow.postMessage(message,targetOrigin);
B页:
window.addEventListener("message",function(ev){
     alert("从"+ev.origin+"那里传过来的消息:\n\"+ev.data);
     //向主页面发送消息
     ev.source.postMessage("你好,这里是"+this.location,ev.origin)
},false);
 
Web Sockets 通信
var webSocket = new WebSocket("ws://localhost:8005/socket");  //wss,加密时使用
webSocket.send("data"); //发送
webSocket.onmessage=function(event){  //获取
var data=event.data;
}
事件:onopen,onclose
readyState属性值:  0(CONNECTING)|1(OPEN)|2(CLOSING)|3(CLOSED)
 
九.Web Workers
后台线程,跑与浏览器无关耗时任务
A页:
var worker = new Worker("worker.js");
worker.onmessage = function(event){
//收到的消息
}
worker.postMessage(message);
B js:
onmessage = function(event){
     var num = event.data;
     var result = 0;
     for (var i=0;i<=num;i++){
          result+=i;
     }
     postMessage(result);
}
可以使用多个子线程
 
 
十.地理位置信息 Geolocation API
 
window.navigator 对象新增geolocation属性,根据位置供应商提供最优选择,IP,卫星定位等
void getCurrentPosition(onSuccess,onError,options);  //获取用户地理位置
int watchPosition(onSuccess,onError,options);  //持续获取用户地理信息位置,返回watchid
void clearWatch(watchid); //停止获取
获取成功后,可得position对象,有以下属性
latitude(纬度),altitude(经度),accuracy(获取到的纬度或经度的精度,以米为单位),altitudeAccurancy(海拔高度精度),heading(设备前进方向),speed(设备前进速度),timestamp(获取地理信息时的时间)
 
 
十一.历史管理
pushState()方法,可以改变浏览器地址url,不刷新页面,感觉用处不大.
 
posted on 2012-12-10 01:07  川川哥哥  阅读(3145)  评论(0编辑  收藏  举报