a和area下的media属性
为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all
代码示例:
<a href="https://www.lanmper.cn" 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="https://www.lanmper.cn"> </head> <body> <p>visit the <a href="archives.html">archives</a>.</p> </body> </html>
点击上面的连接,将跳转到https://www.lanmper.cn。
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="https://www.lanmper.cn" label="google"> <option value="https://www.lanmper.cn" 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">
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
表明该元素继承了其父元素的可编辑状态.
HTML5废除的属性
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 |