HTML5學(xué)習(xí)筆記簡明版（7）：新增屬性（2）
2011-12-13 08:52 湯姆大叔 閱讀(5174) 評論(3) 收藏 舉報
本章節(jié)介紹的是HTML5對現(xiàn)有元素新增的屬性。例如，input 和 textarea 元素有了一個新元素 dirname，用于用戶所設(shè)置的提交的方向性的控制(譯注，即書寫的方向性，ltr或rtl)。或者textarea新增的maxlength和input的maxlength是一樣的，都是限制最大長度的。
dirname屬性
input 和 textarea 元素有了一個新元素 dirname，用于用戶所設(shè)置的提交的方向性的控制(譯注，即書寫的方向性，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個參數(shù)，分別是：comment, comment.dir和mode，類似下面這樣：comment=Hello&comment.dir=ltr&mode=add
如果是阿拉伯文的瀏覽器，輸入的是阿拉伯文??????的話，那傳回的參數(shù)就應(yīng)該是這樣的：
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：自動硬回車換行，換行標(biāo)記一同被傳送到服務(wù)器中去，必須與cols同時使用才能判斷多少字符換行；
- soft：自動軟回車換行，換行標(biāo)記不會傳送到服務(wù)器中去
form下的novalidate屬性
新增屬性novalidate的意思是允許form表單不驗(yàn)證即可提交（不用管form里的元素是否有驗(yàn)證條件，例如required, min, max等）。
例子代碼：
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
還有一種用法是，同一個form里有多個submit按鈕，可以針對某個按鈕設(shè)置formnovalidate屬性來忽略驗(yàn)證，例如：
<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只有在點(diǎn)擊Submit essay按鈕的時候才驗(yàn)證表單，另外2個按鈕不驗(yàn)證。
input與button下的新屬性
input和button元素新增加了幾個新屬性（formaction, formenctype, formmethod, formnovalidate和formtarget），如果這些設(shè)置這些屬性的話，那所對應(yīng)的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。它們允許元素轉(zhuǎn)化成典型用戶界面里的菜單，并結(jié)合全局 contextmenu 屬性提供上下文菜單。
style下的scoped屬性
style 元素有了一個新的 scoped 屬性，用來啟用限定作用范圍的樣式表。在一個這樣的 style 元素里的樣式規(guī)則只應(yīng)用到當(dāng)前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加載的腳步異步執(zhí)行（即必須是src引用文件的形式才可以用），例如：
<script type="text/javascript" src="demo_async.js" async="async"></script>
有多種執(zhí)行外部腳本的方法：
- 如果 async="async"：腳本相對于頁面的其余部分異步執(zhí)行（當(dāng)頁面繼續(xù)進(jìn)行解析時，腳本將被執(zhí)行）
- 如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執(zhí)行
- 如果既不使用 async 也不使用 defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本
html下的manifest屬性
html 元素有了一個新屬性 manifest，指向一個用于結(jié)合離線Web應(yīng)用API的應(yīng)用程序緩存清單。
首先，需要先創(chuàng)建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">
例子：http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/
link下的sizes屬性
link 元素有了一個新的屬性 sizes。可以結(jié)合 icon 的關(guān)系(通過設(shè)置 rel 屬性，可被用于如網(wǎng)站圖示)一起使用來表明被引用圖標(biāo)的大小。因此允許了不同的尺寸的圖標(biāo)。
例子代碼：
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
ol下的reversed屬性
ol 元素有了一個新屬性 reversed。當(dāng)其存在時，代表列表中的順序?yàn)榻敌颉?/p>
iframe下的sanddbox, seamless和srcdoc屬性
iframe 元素有了三個新屬性分別是 sandbox, seamless, 和 srcdoc，用以允許沙箱內(nèi)容，例如，博客評論。
例子代碼：
<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://maps.example.com/embedded.html"></iframe>
Seamless:
<nav><iframe seamless src="nav.include.html"></iframe></nav>
video和audio的play屬性
HTML5也使得所有來自HTML4的事件處理屬性（那些形如 onevent-name 的屬性）變成全局屬性，并為其定義的新的事件添加了幾個新的事件處理屬性。比如，媒體元素(video 和 audio)API所使用的 play 事件。
浙公網(wǎng)安備 33010602011771號