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
alternate, author , bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag
規定當前文件與目標URL 之間的關係
type
mime_type %
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>
charset是用來定義文檔的encoding方式的,如果在XML裡定義了該屬性,則charset的值必須是不區分大小寫的ASCII以便match UTF-8,因為XML文檔強制使用UTF-8作為encoding方式的。
註:meta屬性上的charset屬性在XML文件裡是不起作用的,只是為了方便與XHTML直接互相遷移。
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta charset="ISO-8859-1">
<input maxlength="256" name="loginName" value="" autofocus> <input type="submit" value="Login">
註2:一個頁面裡不是必須設定autofocus的。 placeholder属性 input和textarea元素新增加了placeholder属性,该属性是提升用户输入内容。当用户点击的时候,该内容文本自动消失,离开焦点并且值为空的话,再次显示。以前我们都是使用JavaScript代码来实现,其实蛮复杂的,有了placeholder属性就爽了,直接写成下面下这样的代码: form属性 form属性(不是<input type="username" placeholder="请输入你的用户名">
<label>Email: <input type="email" form="foo" name="email"> </label> <form id="foo"></form>
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 属性适用于