• html5新特性：

      1. 取消了过时的显示效果标记  <font></font> 和 <center></center> ...
      2. 新表单元素引入
      3. 新语义标签的引入  
      4. canvas标签（图形设计）
      5. 本地数据库（本地存储）
      6. 一些新的API

• html5中的语义元素

标签	描述
<article>	定义文章。
<aside>	定义页面内容以外的内容。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

注意：重点关注如何在IE8以下浏览器如何做兼容性处理 （主要是用了document.createElement('header')方法）

<!--[if lt IE 9]>

 　 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<![endif]—>

• 多媒体元素及属性

<video>与<audio>

最好的 HTML 解决方法：HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
      width="320" height="240" type="application/x-shockwave-flash">
    </embed>
  </object>
</video>

属性	描述
controls	显示控制栏
autoplay	设置自动播放
loop	设置循环播放

• html5表单元素

 <form>元素 属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

<input>在html5中增加了多个新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

属性	描述
autofocus	自动获取焦点。
disabled	规定输入字段应该被禁用。
form	规定 <input> 元素所属的一个或多个表单。
list	引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
multiple	规定允许用户在 <input> 元素中输入一个以上的值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

 

• HTMl5中的新API

1. 获取页面元素：document.querySelector("选择器")、document.querySelectorAll("选择器")
2. Dom的类操作：

方法	描述
Dom.classList.add("类名")	给当前dom元素添加类样式。
Dom.classList.remove("类名")	给当前dom元素移除类样式。
Dom.classList.contains("类名")	检测是否包含类样式
Dom.classList.toggle("类名")	切换类样式（有就删除，没有就添加）

3.自定义属性:

data-自定义属性

     1. 获取自定义属性 :Dom.dataset   返回的是一个对象
        Dom.dataset.属性名  或者  Dom.dataset[属性名]
          注意： 属性名是不包含data-

     2. 设置自定义属性
        Dom.dataset.自定义属性名=值  或者  Dom.dataset[自定义属性名]=值

4.文件操作：

FileReader有3个用来读取文件方法返回结果在result中:

方法	描述
readAsBinaryString	将文件读取为二进制编码
readAsText	将文件读取为文本
readAsDataURL	将文件读取为DataURL

FileReader的事件

方法	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

5.获取网络状态：

获取当前网络状态：window.navigator.onLine 返回一个布尔值

网络状态事件：1. window.ononline，2. window.onoffline

6.获取地理位置：

获取一次当前位置
      window.navigator.geolocation.getCurrentPosition(success,error);

       1. coords.latitude   维度
       2. coords.longitude   经度

实时获取当前位置
        window.navigator.geolocation.watchPosition(success,error);

7.本地存储：

localStorage与sessionStorage

方法	描述
setItem(key,value)	设置存储内容
getItem(key)	获取内容
removeItem(key)	删除内容
clear()	清空内容

8.Canvas: （另述）