1.HTM5新特性——新的语义化标签
1>、<section></section> 定义文档中的主体部分的节、段。
2>、<article></article> 一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。
3>、<aside></aside> 用来装载页面中非正文的内容，独立于其他模块。例如广告、成组的链接、侧边栏。。。
4>、<header></header> 定义文档、页面的页眉。通常是一些引导和导航信息，不局限于整个页面头部，也可以用在内容里。
5>、<footer></footer> 定义了文档、页面的页脚，和header类似。
6>、<nav></nav> 定义了一个链接组组成的导航部分，其中的链接可以链接到其他网页或者当前页面的其他部分。
7>、<hgroup></hgroup>
用于对网页或区段(section)的标题元素(h1~h6)进行组合。
8>、<figure></figure> 用于对元素进行组合。
9>、<figcaption></figcaption> 为figure元素加标题。一般放在figure第一个子元素或者最后一个。
10>、<details></details> 定义元素的细节，用户可以点击查看或者隐藏。
11>、<summary></summary> 和details连用，用来包含details的标题。
12>、<canvas></canvas> 用来进行canvas绘图。
13>、<video></video> 定义视频。
14>、<audio></audio> 定义视频。
15>、<embed></embed> 定义嵌入网页的内容。比如插件。
16>、<source></source> 该标签为媒介元素(比如video、audio)定义媒介元素。
17>、<datalist id='dl'></datalist> 定义可选数据的列表，与input配合使用<input list="dl">可制作输入值的下拉列表。
18>、<mark></mark> 在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。
19>、<meter [min/max/low/high/optimum/value]></meter> 度量衡，用红黄绿表示出一个数值所在范围。
20>、<output></output> 定义不同类型的输出，样式与span无异。
21>、<progress></progress> 进度条，运行中的进度。
22>、<time></time> 定义日期或者时间。
23>、<keygen></keygen> 定义加密内容。
24>、<command></command> 定义命令行为。
2. 新的JavaScript的API
1> 、querySelector //类似jq里的$()方法，但是只能取到第一个元素
2>、querySelectorAll //同上，但是只能取到一个集合，即使只有一个元素
3>、getElementsByClassName //通过class的方式取到一个元素集合
注意前两个方法里面要写成.box,#div1类似jq的写法，后一种规定是class，因此只需要写class的值即可
3. 2D绘图（canvas和svg）
SVG : SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。你可以为某个元素附加JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
canvas ：Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
Canvas：依赖分辨率；
不支持事件处理器；
弱的文本渲染能力；
能够以 .png 或 .jpg 格式保存结果图像；
最适合图像密集型的游戏，其中的许多对象会被频繁重。
SVG：不依赖分辨率；
支持事件处理器；
最适合带有大型渲染区域的应用程序（比如谷歌地图）；
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）；
不适合游戏应用。
4. 视频和音频，标签audio 、video
1> 原来的flash手机不兼容，而且需要插件才能运行;
audio 、video（用src链接地址，但是不可控制，需要媒体元素，但是控件的样式浏览器里也不同）;
source（为了做兼容，不将src放在媒体标签上，而是放在这个标签上，这样可以自动匹配支持的格式，不支持自动跳过）;
2> 视频容器：容器文件，类似于压缩了一组文件；音频轨道；视频轨道；元数据：封面，标题，字幕等；格式：.avi、.flv、.mp4、.mkv、.ogv等
3> 使用方法：
4> 编解码器：原始的视频容器非常大，添加需编码（减少加载时间，质量小），播放需解码（重新变成可播放视频音频），这些编码解码器有收费的有免费的，每个浏览器用的也不同，所以浏览器支持的格式也不同:
常见音频编解码器：AAC、MPEG-3、Ogg Vorbis
常见视频编解码器：H.264、VP8、Ogg Theora
5. 新的存储方式[loaclstorage,sessionstorage]
1> html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2> web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
3> localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法：
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
getItem获取value
removeItem删除key
clear清除所有的key/value
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：
localStorage和sessionStorage的key和length属性实现遍历 sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：
6. H5头部声明
常用：<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<meta charset="UTF-8"> 声明文档使用的字符编码
网友评论