HTML5新增用法

新增语义化标签

并无特殊含义，是语义！语义！语义！

<header>	头部区域
<nav> 		导航区域
<main>		主体区域
<article>	内部标签
<section>	块级标签
<aside>		侧边栏标签
<footer>	尾部标签
<dialog>	对话框/窗口
<time>		时间

新增多媒体标签

<audio>		音频
<video>		视频
<source>	定义<audio>和<video>中资源的来源

新增表单元素

<datalist>

<datalist>		预定义选项,当在input中输入时,会提示预定义选项，需要搭配input的list属性使用
实例
<input list="browsers">
<datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">
</datalist> 

<keygen>

新增input类型

<input type="">date				日期选择
datetime			时间日期
datetime-local		本地时间
month				选择月份
week				选择周
time				时间选择
number				数字输入框,有加减
range				拖动条,调节范围
search				搜索框
tel					电话框
url					地址框,自动验证,不是正确格式的url无法submit
color				选择颜色
email				邮箱地址输入框,自动验证,不是邮箱地址无法submit

新增的input属性

autocomplete		属性规定表单或输入字段是否应该自动填充,自动填充上一次的值
autofocus			布尔类型,自动获取焦点
form				可以在<form>标签之外使用<input>,通过此属性指定<form>的id,此<input>属于指定<form>
formaction			适用于type=submit,当有多个submit,可以通过此属性指定不同的请求url
formenctype			当把表单数据（form-data）提交至服务器时如何对其进行编码,仅针对 method="post" 的表单formenctype 属性覆盖 <form> 元素的 enctype 属性。
formmethod			适用于type=submit,定义请求方式,会覆盖<form>中的method,可以在有多个submit时使用
formnovalidate		规定在提交表单时不对 <input> 元素进行验证
formtarget			相当于<a>的target属性,是否打开新的页面
height 和 width		宽高尺寸,仅适用于type="image"
list				引用<datalist>,一个单独的<datalist>不会显示
min 和 max		   规定value的最大、最小值,适用于number、range、date、datetime、datetime-local、month、time 以及 week
multiple			布尔类型,允许用户在 <input> 元素中输入一个以上的值,适用于type=file和email
pattern (regexp)	规定用于检查 <input> 元素值的正则表达式
placeholder			预期提示文字
required			是否必填/必选
step				规定合法数字间隔,适用于number、range、date、datetime、datetime-local、month、time 以及 week

新增图像

<canvas>		JS绘制
<svg>			SVG绘制

本地存储

浏览器对数据进行本地存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

• window.localStorage - 存储没有截止日期的数据
• window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

localStorage

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除

以键值对的形式存储数据

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
var data = localStorage.getItem("lastname");
// 或
var obj = localStorage.lastname// 删除数据
localStorage.removeItem("lastname")
//

sessionStorage

顾名思义，这个对象存储本次会话的内容，当浏览器关闭，代表本次会话关闭，数据就会消失。

sessionStorage与localStorage的使用是相同的，唯一不同的是sessionStorage的数据会在浏览器关闭时被清除。