2014.01.15 笔记
Html5的相关笔记(后续会完善)
HTML5与以前的HTML技术相比，变化是显著的。主要体现在以下几个方面：
1.标准统一： 主要体现在开发人员可以透过统一的标准语法，制作出针对不同浏览器的相同的Web浏览体验
2.简化语义表达：所有的Web页面的标签，HTML5都给予了大量的简化和统一
3.完美搭配CSS3：HTML5的所有元素都可以被CSS样式化
一、 HTML5的两大特点：
1. 强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。
2. 追加了本地数据库等Web应用的功能。
二、Html5浏览器兼容问题
1.谷歌浏览器Chrome5.0.375.70 支持
2.FireFox3.6.3支持
3.Opera10.54支持
4.苹果最新Safari 5浏览器支持
5. IE9 支持
三、Html5新增的元素：
1.多媒体（video, audio...）及交互式元素（details,menu,command...）
2. 结构元素（header,footer,section,article,nav...）
3. 块级语义（aside,figure,dialog...）及行内元素（time,meter,mark,progress...）
4. 表单控件（email,url,datetime,number,range,color...）
5. Canvas，此元素可被JavaScript语言用来绘制图形。
四、Html5新增的属性
{
contenteditable:
contextmenu:
data-*:
hidden:
item:
itemprop:
subject:
role:
aria-*:
spellcheck:
draggable:
irrelevant:
template:
placeholder:
autofocus:
required:
async:
manifest:
...
}
五、Html5新增的事件：
六、Html5移除的元素
（font,center...）
七、Html5移除的属性
{
link:target属性，
td:scope属性，
script:language属性，
body:alink,link,text,vlink属性，
...
}
八、Html5的基本布局：
1 <!DOCTYPE html> 2 <htmlang = "en"> 3 <head> 4 <meta charset = "utf-8"> 5 <title>HTML5 Demo</title> 6 <body> 7 <header><h1></h1><h2></h2></header> 8 <nav><ul><li></li><li></li></ul></nav> 9 <section> 10 <article></article> 11 <article></article> 12 </section> 13 <aside></aside> 14 <footer></footer> 15 </body> 16 </html>
九、Html5对表单的支持：内建表单验证，例：
十、 Web Storage:
它是在Web上针对客户端本地储存数据的功能，具体来说Web Storage分为两种：
sessionStorage 会话存储：将数据保存在session对象中。Session对象可以用来保存在这段时间内(也就是用户浏览这个网站所花费的时间(即session的生命周期))所要求保存的任何数据。【临时保存】
localStorage 本地存储： 将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍存
在，下次打开浏览器再访问网站时，仍然可以继续使用。【永久保存】
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key
用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代码示例：sessionStorage.clear(); localStorage.clear();
其他操作方法：点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及
[]的方式进行数据存储，像如下的代码：
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
