html5基础知识提纲

最近间插着看了<<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可以丰富其效果),

http://microformats.org/code/hcard/creator  hcardCreator

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,不刷新页面,感觉用处不大.