html5基础知识大纲
终极管理员 知识笔记 125阅读
最近看了两本书，HTML.5和CSS.3的权威指南和HTML5的秘籍。为了沉淀和一.兼容性,我记录了重要知识点X； 0；-WebKit-border-horizontal-spacing : 0px；-WebKit-border-vertical-spacing : 0px；-WebKit-text-decorations-in-effect :无；-WebKit-text-size-adjust : auto；-WebKit-text-stroke-width : 0px '原理：不破坏现有Web，为广泛使用的不规范行为平反。实用性第一W3C官方HTML5标准网站：非官方新功能： 1。whatwg.org/html 2。blog.whatwg.org html 5验证：1。validator.w3.org 2。Modernizr.js，把这个js插入html5页面，可以检测浏览器html5兼容性，HTML 5浏览器支持： caniuse.com putty脚本：谷歌chrome框架老浏览器用JS tinyurl.com/polyfills现成的正则表达式regexlib.com。
bkit-text-stroke-width: 0px">二.语义化
语义化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, )
语义数据被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元素添加,比如)
新的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:
对象:用户选择的文件列表,file对象数组
file对象:属性name表示文件名,不包括路径;lastModifiedDate属性表示文件最后修改日期
Blob对象: 表示原始二进制数据,提供一个slice方法,访问字节内部原始数据块,size属性表示对象字节长度,type属性表示mime类型,切都以"image/"开头;file对象也集成自blob对象
接口:把文件读入内存,提供了一个异步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 g (2) vedeojs.com 两个都支持flash后备
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,不刷新页面,感觉用处不大.