HTML5新增属性

一查发现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 &lt;base&gt; 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>
有多种执行外部脚本的方法:
  1. 如果 async=”async”:脚本相对于页面的其余部分异步执行(当页面继续进行解析时,脚本将被执行)
  2. 如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行
  3. 如果既不使用 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