HTML5學習筆記簡明版(8):新增的全局屬性
2011-12-14 09:51 湯姆大叔 閱讀(7443) 評論(3) 收藏 舉報contenteditable屬性
任何元素使用contenteditable屬性的話,代表該元素是一個可編輯的區(qū)域。用戶可以改變元素的內容以及操作標記。例如:
<p contenteditable="true">這是一段可編輯的段落。請試著編輯該文本。</p>
該屬于有3種值可選:true, false和空字符,空字符代表true。
而對<iframe id="editor"></iframe>框架頁面可以通過JS程序代碼來實現:editor.document.designMode="on" 。
contextmenu屬性
contextmenu屬性用來指向一個作者提供的上下文目錄,例如:
<form name="npc" action="">
<label>Character name: <input type=text contextmenu=namemenu required></label>
<menu type=context id=namemenu>
<command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
<command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
</menu>
</form>
data-*屬性
開發(fā)人員可以在任何元素上定義他們想要的任何屬性,只要他們在其之前加上 data- 的前綴,以此避免與未來的HTML版本的沖突,asp.net MVC下的jQuery驗證就是采用這種方式,例如:data-val=”true”。
draggable和dropzone屬性
draggable 和 dropzone 屬性可以與新的拖放API一起使用,draggable為是否允許拖放,dropzone代表可以拖放到哪個區(qū)域。
<p draggable="true" dropzone="div1">test</p>
hidden屬性
不顯示定義了hidden屬性的元素。但與表現層的比如tab切換隱藏圖層不同,hidden后的元素針對所有的顯示,比如屏幕閱讀器。與form里的hidden域相似。
role和aria-*屬性
HTML5把WAI-ARIA當作是合法的語言增加,用來做輔助作用。
spellcheck屬性
spellcheck 屬性規(guī)定是否對元素內容進行拼寫檢查。例如:
<p contenteditable="true" spellcheck="true">這是可編輯的段落。請試著編輯文本。</p>
本章節(jié)介紹的是HTML5在現有元素上增加的全局屬性:contenteditable,contextmenu,data-*,draggable和dropzone,hidden,role和aria-*,spellcheck,主要是用來提供用戶體驗的。 比如,任何元素使用contenteditable屬性的話,代表該元素是一個可編輯的區(qū)域。用戶可以改變元素的內容以及操作標記。
浙公網安備 33010602011771號