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等属性。

属性描述
hreflanglanguage_code规定目标 URL 的语言
mediamedia query规定目标 URL 是为何种媒介/设备优化的
relalternate, author, bookmark, external, help, license,
next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag
规定当前文档与目标 URL 之间的关系
typemime_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中的替代方案
revlink、arel
charsetlink、a在被链接的资源的中使用HTTP Content-type头元素
shape、coordsa使用area元素代替a元素
longdescimg、iframe使用a元素链接到校长描述
targetlink多余属性,被省略
nohrefarea多余属性,被省略
profilehead多余属性,被省略
versionhtml多余属性,被省略
nameimgid
schememeta只为某个表单域使用scheme
archive、chlassid、codebose、codetype、declare、standbyobject使用data与typc属性类调用插件。需要使用这些属性来设置参数时,使用param属性
valuetype、typeparam使用name与value属性,不声明之的MIME类型
axis、abbrtd、th使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用title属性,来使单元格的内容变得简短
scopetd在被链接的资源的中使用HTTP Content-type头元素
aligncaption、input、legend、div、h1、h2、h3、h4、h5、h6、p使用CSS样式表替代
alink、link、text、vlink、background、bgcolorbody使用CSS样式表替代
align、bgcolor、border、cellpadding、cellspacing、frame、rules、widthtable使用CSS样式表替代
align、char、charoff、height、nowrap、valigntbody、thead、tfoot使用CSS样式表替代
align、bgcolor、char、charoff、height、nowrap、valign、widthtd、th使用CSS样式表替代
align、bgcolor、char、charoff、valigntr使用CSS样式表替代
align、char、charoff、valign、widthcol、colgroup使用CSS样式表替代
align、border、hspace、vspaceobject使用CSS样式表替代
clearbr使用CSS样式表替代
compace、typeol、ul、li使用CSS样式表替代
compacedl使用CSS样式表替代
compacemenu使用CSS样式表替代
widthpre使用CSS样式表替代
align、hspace、vspaceimg使用CSS样式表替代
align、noshade、size、widthhr使用CSS样式表替代
align、frameborder、scrolling、marginheight、marginwidthiframe使用CSS样式表替代
autosubmitmenu
原文链接:HTML5新增属性 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/html5-new-properties.html)

发表评论

请登录后发表评论: