HTML5 study notes concise version (8): new global attributes

contenteditable attribute

If any element uses the contenteditable attribute, it means that the element is an editable area. Users can change the content of elements as well as action tags. For example:

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

This attribute has three optional values: true, false and null character. The null character represents true.

The frame page can be implemented through JS program code: editor.document.designMode="on".

contextmenu attribute

The contextmenu attribute is used to point to a context directory provided by the author, for example:

<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-*Attributes

Developers can define any attribute they want on any element as long as they prefix it with data- to avoid conflicts with For future HTML version conflicts, jQuery validation under asp.net MVC will use this method, for example: data-val="true".

draggable and dropzone properties

The draggable and dropzone properties can be used with the new drag and drop API. Draggable indicates whether drag and drop is allowed, and dropzone represents the area to which drag and drop can be made.

<p draggable="true" dropzone="div1">test</p>

hidden attribute

Do not display elements with the hidden attribute defined. But unlike the presentation layer, such as tab switching hidden layers, hidden elements are targeted at all displays, such as screen readers. Similar to the hidden field in the form.

role and aria-* attributes

HTML5 treats WAI-ARIA as a legal language addition for auxiliary purposes.

spellcheck attribute

The spellcheck attribute specifies whether to perform spell check on the element content. For example:

<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

以上就是HTML5学习笔记简明版（8）：新增的全局属性的内容，更多相关内容请关注PHP中文网（www.php.cn）！