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属性是用来脚本访问的。
发表回复