HTML5 学習ノートの簡潔版 (8): 新しいグローバル属性

contenteditable 属性

いずれかの要素で contenteditable 属性が使用されている場合、その要素は編集可能な領域であることを意味します。ユーザーは要素の内容とアクション タグを変更できます。例:

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

この属性には、true、false、空文字の 3 つのオプション値があります。空文字は true を表します。

65db2722f76ee209fa1b3db0888ed3be065276f04003e4622c4fe6b64f465b88 フレーム ページは、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-* 属性

開発者は、任意の要素に必要なものを定義できます。将来の HTML バージョンとの競合を避けるために、プレフィックス data- が付いている限り、asp.net MVC での jQuery 検証ではこのメソッドが使用されます (例: data-val="true")。

draggable 属性とdropzone 属性

draggable 属性とdropzone 属性は、新しいドラッグ アンド ドロップ API で使用できます。draggable はドラッグ アンド ドロップが許可されるかどうかを示し、dropzone はドラッグ アンド ドロップが許可される領域を表します。

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

hidden属性

hidden属性が定義されている要素を表示しません。ただし、タブ切り替えの非表示レイヤーなどのプレゼンテーション層とは異なり、非表示要素はスクリーン リーダーなどのすべてのディスプレイを対象としています。フォームの非表示フィールドに似ています。

role 属性と aria-* 属性

HTML5 では、補助機能の正当な言語として WAI-ARIA が追加されています。

spellcheck属性

Spellcheck属性は、要素のコンテンツに対してスペルチェックを実行するかどうかを指定します。例:

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

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