萬盛學電腦網 >> 網頁制作 >> xml編程 >> HTML5學習筆記簡明版（6）：新增屬性（1）
HTML5學習筆記簡明版（6）：新增屬性（1）
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屬性是用來腳本訪問的。
代碼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屬性，用來和存放數據的
