萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> xml編程 >> HTML5學習筆記簡明版(6):新增屬性(1)

HTML5學習筆記簡明版(6):新增屬性(1)

class="area">

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 &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屬性,用來和存放數據的

copyright © 萬盛學電腦網 all rights reserved