首頁 > web前端 > H5教程 > HTML5學習筆記簡明版(7):新增屬性(2)

HTML5學習筆記簡明版(7):新增屬性(2)

黄舟
發布: 2017-01-21 16:58:02
原創
2103 人瀏覽過

dirname屬性

input 和 textarea 元素有了一個新元素 dirname,用於用戶所設定的提交的方向性的控制(譯註,即書寫的方向性,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個參數,分別是:comment, comment.dir和mode,類似下面這樣:comment=Hello&comment.dir=ltr&mode=add

如果是阿拉伯文的瀏覽器,輸入的是阿拉伯文مرحبًا的話,那傳回的參數就應該是這樣的:

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和input的maxlength最大長度的。

新增的wrap屬性為枚舉值(soft/hard),意思分別是:

hard:自動硬回車換行,換行標記一同被傳送到伺服器中去,必須與cols同時使用才能判斷多少字符換行;

soft:自動軟回車換行,換行標記不會傳送到伺服器中去

form下的novalidate屬性

新增屬性novalidate的意思是允許form表單不驗證即可提交(不用管form裡的元素是否有驗證條件,例如required, min, max等)。

範例程式碼:

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>
登入後複製

還有一種用法是,同一個form裡有多個submit按鈕,可以針對某個按鈕設定formnovalidate屬性來忽略驗證,例如:

<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只有在點擊Submit essay按鈕的時候才驗證表單,另外2個按鈕不驗證。

input與button下的新屬性

input和button元素新增加了幾個新屬性(formaction, formenctype, formmethod, formnovalidate和formtarget),如果這些設定這些屬性的話,那所對應的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。它們允許元素轉換成典型使用者介面裡的選單,並結合全域 contextmenu 屬性提供上下文選單。

style下的scoped屬性

style 元素有了一個新的 scoped 屬性,用來啟用限定作用範圍的樣式表。在一個這樣的 style 元素裡的樣式規則只會套用到目前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載入的腳步非同步執行(即必須是src引用檔案的形式才可以用),例如:

<script type="text/javascript" src="demo_async.js" async="async"></script>
登入後複製


有多种执行外部脚本的方法:

如果 async="async":脚本相对于页面的其余部分异步执行(当页面继续进行解析时,脚本将被执行)

如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行

如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

html下的manifest属性

html 元素有了一个新属性 manifest,指向一个用于结合离线Web应用API的应用程序缓存清单。

首先,需要先创建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。可以结合 icon 的关系(通过设置 rel 属性,可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

例子代码:

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
登入後複製


ol下的reversed属性

ol 元素有了一个新属性 reversed。当其存在时,代表列表中的顺序为降序。

iframe下的sanddbox, seamless和srcdoc属性

iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc,用以允许沙箱内容,例如,博客评论。

例子代码:

<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 事件。

以上就是HTML5學習筆記簡明版(7):新增屬性(2)的內容,更多相關內容請關注PHP中文網(www.php.cn)!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板