H5学习一

H5流行于乔布斯关于H5可以战胜flash的文章，优点在于安全性能高
CSS3
Web1.0
Web2.0
H5与H4的区别
-文件类型声明

• 编码声明
• 可以直接嵌入MathML / SVG
• 新的解析规范，H4没有真正规范。H5在不同浏览器下显示一致
• 移除一些无用的标签
  big,center,font,acronym,applet,basefont,dir,frame,frameset,isindex,noframes,strike,tt
  可以用css3 代替，去除重复功能

H5 的优势
1.富图形，富媒体
2.本地存储
3.LBS
4.实时通信

• 选择器querySelector,querySelectorAll, document.querySelectorAll(".hed")
• Canvas API
• 音频和视频API
• 离线存储API
• 通讯API
• 文件操作
• 地理位置API
• 拖放API

新元素，新属性
一、结构化、语义化（一看便知）

• section 代表一个统一的文件或应用部分，他可以和元素同时使用来表明文档的结构
• article 代表了一个文档内容的独立片段，比如博客条目或标志文章
• aside 代表了一段与页面的其余部分稍稍相关的内容
• hgroup代表一个部分的头
• header 代表一组介绍或导航辅助
• footer 代表一个部分的尾部并可以容纳关于作者、版权等信息
• nav 代表了用于导航目的的文档的一部分
• figure 代表一个独立的流内容片段，通常作为一个文档主流的独立单元
• figcaption 用作标题

二、增强功能的新元素

• vidio/audio 用于多媒体内容，两者都提供了一个API 是的作者可以编写他们自己的用户节目，但也有一种方法出发有用户代理提供的用户界面。
• track
• embed
• mark
• progress
• meter
• time
• bdi
• wbr
• canvas
• command

三、增强的input输入框

• input 中的type属性现在有了下面的新值
• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

touch events

**

• ontouchstart
• ontouchend
• ontouchmove
• ontouchcancel

**
document.querySelector(’#touchable’).addEventListener(‘touchstart’,function(ev){
ev.touches:触摸的对象书（直接对应触摸的受指数
ev.targetTouches:当前touch时间元素上对象数(当前绑定元素的受指数)
}
touch对象属性：
pageX 相对于富元素的x坐标
pageY
clientX 相对于当前窗口的x坐标
clientY
screenX 相对于当前屏幕的x坐标
screenY
target 指代当前点击的对象