一查发现HTML5的知识还是了解不多，之前知道html5有语义标签、本地储存、表单增强、音频视屏、画布、可编辑等。今天在逛博客时看到一篇文章，还是值得记录下来。希望它也能帮到你。html新增属性文档
a和area下的media属性
为了和link元素保存一致性，a元素和area元素也都增加了media属性，只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的，默认值是all，详细语法规范请访问：http://dev.w3.org/csswg/css3-mediaqueries/#media0
代码示例：
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> HTML5 a media attribute. </a>
area下的hreflang, type, rel属性
为了保存和a元素以及link元素的一致性，area元素增加了hreflang, type, rel等属性。
| 属性 | 值 | 描述 |
| hreflang | language_code | 规定目标 URL 的语言 |
| media | media query | 规定目标 URL 是为何种媒介/设备优化的 |
| rel | alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag |
规定当前文档与目标 URL 之间的关系 |
| type | mime_type | 规定目标 URL 的 MIME 类型 |
base下的target属性
base下的target属性和a的target属性是一样的，目的很多老版本浏览器早就一起支持了。
注1：target必须在所有连接元素之前声明。
注2：如果声明多个，以第一个为准。
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>
点击上面的连接，将跳转到http://www.example.com/news/archives.html。
meta下的charset属性
charset是用来定义文档的encoding方式的，如果在XML里定义了该属性，则charset的值必须是不区分大小写的ASCII以便match UTF-8，因为XML文档强制使用UTF-8作为encoding方式的。
注：meta属性上的charset属性在XML文档里是不起作用的，仅仅是为了方便与XHTML直接互相迁移。
不能声明多个带有charset属性的meta元素。
在HTML4里，我们不得不这样定义：
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
在HTML5里，我们这样定义就行了：
<meta charset="ISO-8859-1">
autofocus属性
HTML5为input, select, textarea和button元素增加了一个autofocus属性（hidden的input不能使用），它提供了一种声明式的方式来定义当页面 load以后，焦点自动作用于当前元素上。使用autofocus可以提高用户体验，比如我们在登录页面设置，页面load以后自动将焦点设置到用户名的 textbox上。
<input maxlength="256" name="loginName" value="" autofocus> <input type="submit" value="Login">
注1：一个页面声明一次autofocus属性。
注2：一个页面里不是必须要设置autofocus的。
placeholder属性
input和textarea元素新增加了placeholder属性，该属性是提升用户输入内容。当用户点击的时候，该内容文本自动消失，离开焦 点并且值为空的话，再次显示。以前我们都是使用JavaScript代码来实现，其实蛮复杂的，有了placeholder属性就爽了，直接写成下面下这 样的代码：
<input type="username" placeholder="请输入你的用户名">
form属性
form属性（不是<form>元素），是一个划时代的属性，它允许你将<form>表单里的表单控件声明在表单外门，只 需要在相应的控件上设置form属性为指定的<form>表单的id就行了，不需要非得把元素声明在<form>元素里了，解放 啦。
代码如下：
<label>Email: <input type="email" form="foo" name="email"> </label> <form id="foo"></form>
支持该属性的元素有：input, output, select, textarea, button, label, object和fieldset。
required属性
required属性是一个验证属性，表明该控件是必填项，在submit表单之前必须填写。可用的元素是：input, select和textarea（例外： type类型为hidden, image或类似submit的input元素）。
如果在select上使用required属性，那就得设置一个带有空值的占位符option。代码如下：
<label>Color: <select name=color required> <option value="">Choose one <option>Red <option>Green <option>Blue </select></label>
fieldset下的disabled属性
当fieldset的设置disabled属性时，其所有的子控件都被禁用掉了，但不包括legend里的元素。name属性是用来脚本访问的。
代码1：
<form> <fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> <p><label>Expiry date: <input name=clubexp type=month></label></p> </fieldset> </form>
当点击legend里的checkbox的时候，会自动切换fieldset子元素的disabled状态。
代码2：
<form>
<fieldset name="clubfields">
<legend>
<label>
<input type="checkbox" name="club" onchange="form.clubfields.disabled = !checked">
Use Club Card
</label>
</legend>
<p>
<label>
Name on card:
<input name="clubname" required></label></p>
<fieldset name="numfields">
<legend>
<label>
<input type="radio" checked name="clubtype" onchange="form.numfields.disabled = !checked">
My card has numbers on it
</label>
</legend>
<p>
<label>
Card number:
<input name="clubnum" required pattern="[-0-9]+"></label></p>
</fieldset>
<fieldset name="letfields" disabled>
<legend>
<label>
<input type="radio" name="clubtype" onchange="form.letfields.disabled = !checked">
My card has letters on it
</label>
</legend>
<p>
<label>
Card code:
<input name="clublet" required pattern="[A-Za-z]+"></label></p>
</fieldset>
</fieldset>
</form>
在这个例子，当你外面的 “Use Club Card” checkbox没有选中的时候，里面的子控件都是被禁用的，如果选中了，两个radiobutton都可用了，然后可以选择哪一个子fieldset你想让它可用。
input下的新属性(autocomplete, min, max, multiple, pattern, step)
input下增加了几个用于约束输入内容的属性（autocomplete, min, max, multiple, pattern和step），目前只有部分浏览器支持required和autocomplete属性，其它属性尚未支持。
autocomplete 属性规定输入字段是否应该启用自动完成功能, 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
<form action="demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form>
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
另外也可以声明一个list属性，用来和存放数据的datalist元素关联：
<form> <label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"> </datalist> </form>
当input为空的时候，双击它，就会弹出提示选项（选项内容就是定义的label（Google/Reddit））。选择一个label就会将对应的value地址更新到input里（目前FF支持）。
datalist的声明形式可以有多种：
<datalist id="breeds">
<option value="Abyssinian">
<option value="Alpaca">
<!-- ... -->
</datalist>
或者
<datalist id="breeds">
<label>
or select one from the list:
<select name="breed">
<option value=""> (none selected)
<option>Abyssinian
<option>Alpaca
<!-- ... -->
</select>
</label>
</datalist>
另外，当input的type为image的时候，input还支持width和height属性用来指定图片的大小。
dirname属性
input 和 textarea 元素有了一个新元素 dirname，用于用户所设置的提交的方向性的控制(译注，即书写的方向性，ltr或rtl)。
<form action="addcomment.cgi" method=post> <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p> <p><button name="mode" type=submit value="add">Post Comment</button></p> </form>
用户提交的时候，浏览器会接收到3个参数，分别是：comment, comment.dir和mode，类似下面这样：comment=Hello&comment.dir=ltr&mode=add
如果是阿拉伯文的浏览器，输入的是阿拉伯文مرحبًا的话，那传回的参数就应该是这样的：
comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add
textarea下的maxlength和wrap属性
textarea新增的maxlength和input的maxlength是一样的，都是限制最大长度的。
新增的wrap属性为枚举值（soft/hard），意思分别是：
- hard：自动硬回车换行，换行标记一同被传送到服务器中去，必须与cols同时使用才能判断多少字符换行；
- soft：自动软回车换行，换行标记不会传送到服务器中去
form下的novalidate属性
新增属性novalidate的意思是允许form表单不验证即可提交（不用管form里的元素是否有验证条件，例如required, min, max等）。
例子代码：
<form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form>
还有一种用法是，同一个form里有多个submit按钮，可以针对某个按钮设置formnovalidate属性来忽略验证，例如：
<form action="editor.cgi" method="post"> <p><label>Name: <input required name=fn></label></p> <p><label>Essay: <textarea required name=essay></textarea></label></p> <p><input type=submit name=submit value="Submit essay"></p> <p><input type=submit formnovalidate name=save value="Save essay"></p> <p><input type=submit formnovalidate name=cancel value="Cancel"></p> </form>
该form只有在点击Submit essay按钮的时候才验证表单，另外2个按钮不验证。
input与button下的新属性
input和button元素新增加了几个新属性（formaction, formenctype, formmethod, formnovalidate和formtarget），如果这些设置这些属性的话，那所对应的form属性值将被覆盖，即input或button所属 的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。
例子代码：
<form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" /> </form> <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /><br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> </form> <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> <input type="submit" formtarget="_blank" value="Submit" /> </form>
menu下的type和label属性
menu 元素有了两个新属性：type 和 label。它们允许元素转化成典型用户界面里的菜单，并结合全局 contextmenu 属性提供上下文菜单。
style下的scoped属性
style 元素有了一个新的 scoped 属性，用来启用限定作用范围的样式表。在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树，即兄弟树。
<!-- 这个article正常使用head里声明的style -->
<article>
<h1>Blah Title Blah</h1>
<p>Blah blah article blah blah.</p>
</article>
<article>
<!-- 这里声明的style只能让该article以及子元素使用 -->
<style scoped>
h1 { color: hotpink; }
article { border: solid 1px hotpink; }
</style>
<h1>Blah Title Blah</h1>
<p>Blah blah article blah blah.</p>
</article>
script下的async属性
async属性可以让script加载的脚步异步执行（即必须是src引用文件的形式才可以用），例如：
<script type="text/javascript" src="demo_async.js" async="async"></script>
有多种执行外部脚本的方法：
- 如果 async=”async”：脚本相对于页面的其余部分异步执行（当页面继续进行解析时，脚本将被执行）
- 如果不使用 async 且 defer=”defer”：脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
html下的manifest属性
html 元素有了一个新属性 manifest，指向一个用于结合离线Web应用API的应用程序缓存清单。
首先，需要先创建manifest文件
CACHE MANIFEST #This is a comment CACHE #需要缓存的文件 index.html style.css NETWORK: #不需要缓存的文件 search.php login.php FALLBACK: #资源不可用的情况下，重定向的地址 /api offline.html
然后加该文的地址加到html属性里：
<html manifest="/offline.manifest">
例子：http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/
link下的sizes属性
link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性，可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。
例子代码：
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
ol下的reversed属性
ol 元素有了一个新属性 reversed。当其存在时，代表列表中的顺序为降序。
iframe下的sanddbox, seamless和srcdoc属性
iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc，用以允许沙箱内容，例如，博客评论。
例子代码：
<iframe sandbox src="#"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="#"></iframe>
Seamless:
<nav><iframe seamless src="nav.include.html"></iframe></nav>
video和audio的play属性
HTML5也使得所有来自HTML4的事件处理属性（那些形如 onevent-name 的属性）变成全局属性，并为其定义的新的事件添加了几个新的事件处理属性。比如，媒体元素(video 和 audio)API所使用的 play 事件。
可编辑属性
可编辑属性可以兼容所有的浏览器包括IE6，现在大部分的编辑器都是使用这个功能。我的代码里面也加了，就是contenteditable=”true”,
true,或者是一个空字符串,表明该元素可编辑.false表明该元素不可编辑.inherit表明该元素继承了其父元素的可编辑状态.
废除的属性
HTML4中一些属性在HTML5中不再被使用，而是采用其他属性或其他方式进行替代。
| 在HTML 4中使用的属性 | 使用该属性的元素 | 在HTML 5中的替代方案 |
| rev | link、a | rel |
| charset | link、a | 在被链接的资源的中使用HTTP Content-type头元素 |
| shape、coords | a | 使用area元素代替a元素 |
| longdesc | img、iframe | 使用a元素链接到校长描述 |
| target | link | 多余属性，被省略 |
| nohref | area | 多余属性，被省略 |
| profile | head | 多余属性，被省略 |
| version | html | 多余属性，被省略 |
| name | img | id |
| scheme | meta | 只为某个表单域使用scheme |
| archive、chlassid、codebose、codetype、declare、standby | object | 使用data与typc属性类调用插件。需要使用这些属性来设置参数时，使用param属性 |
| valuetype、type | param | 使用name与value属性，不声明之的MIME类型 |
| axis、abbr | td、th | 使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用title属性，来使单元格的内容变得简短 |
| scope | td | 在被链接的资源的中使用HTTP Content-type头元素 |
| align | caption、input、legend、div、h1、h2、h3、h4、h5、h6、p | 使用CSS样式表替代 |
| alink、link、text、vlink、background、bgcolor | body | 使用CSS样式表替代 |
| align、bgcolor、border、cellpadding、cellspacing、frame、rules、width | table | 使用CSS样式表替代 |
| align、char、charoff、height、nowrap、valign | tbody、thead、tfoot | 使用CSS样式表替代 |
| align、bgcolor、char、charoff、height、nowrap、valign、width | td、th | 使用CSS样式表替代 |
| align、bgcolor、char、charoff、valign | tr | 使用CSS样式表替代 |
| align、char、charoff、valign、width | col、colgroup | 使用CSS样式表替代 |
| align、border、hspace、vspace | object | 使用CSS样式表替代 |
| clear | br | 使用CSS样式表替代 |
| compace、type | ol、ul、li | 使用CSS样式表替代 |
| compace | dl | 使用CSS样式表替代 |
| compace | menu | 使用CSS样式表替代 |
| width | pre | 使用CSS样式表替代 |
| align、hspace、vspace | img | 使用CSS样式表替代 |
| align、noshade、size、width | hr | 使用CSS样式表替代 |
| align、frameborder、scrolling、marginheight、marginwidth | iframe | 使用CSS样式表替代 |
| autosubmit | menu |
