ホームページ > 記事 > ウェブフロントエンド > html5 のグローバル属性とは何ですか?
html5 のグローバル属性とは何ですか?
- 青灯夜游オリジナル
- 2021-12-29 11:41:282644ブラウズ
html5 属性は次のとおりです: 1. accesskey; 2. class; 3. contenteditable; 4. dir; 5. ドラッグ可能; 6. ドロップゾーン; 7. 非表示; 8. lang; 9. スペルチェック; 10. tabindex、など待ってください。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
ローカル属性: 一部の要素は、ローカル属性と呼ばれる独自の属性を指定できます。
たとえば、link 要素には、href、rel、hreflang、media、type、size の 6 つのローカル属性があります。
グローバル属性: すべての要素に共通の動作を構成するために使用できます。この属性はグローバル属性と呼ばれ、任意の要素で使用できます。
HTML5 グローバル属性
1. Accesskey 属性
accesskey 属性を使用して、1 つまたは複数の選択用のショートカット キーを設定しますページ上の要素の場合。
2. クラス属性
クラス属性は要素を分類するために使用されます。
3. contenteditable 属性
contenteditable は、HTML5 に新しく追加された属性で、その目的は、ユーザーがページ上のコンテンツを変更できるようにすることです。
<body> <!-- contenteditable属性应用 --> <p contenteditable="true">设置为 true 是可编辑的</p></body>
上記の例のように、p 要素の contenteditable 属性値が true に設定されている場合、ユーザーはテキストをクリックしてコンテンツを編集できます。 false に設定すると編集が無効になります。
4. dir 属性
dir 属性は、要素内のテキストの方向を指定するために使用されます。有効な値は 2 つあります: ltr (左から右)、rtl (右から左)。
<!-- dir属性应用 --> <p dir="ltr">从左到右</p> <p dir="rtl">从右到左</p>
5. ドラッガブル属性
ドラッガブル属性は、HTML5 がドラッグ アンド ドロップ操作をサポートする方法の 1 つであり、要素をドラッグできるかどうかを示すために使用されます。そして落ちた。
6. Dropzone 属性
dropzone 属性は、HTML5 がドラッグ アンド ドロップ操作をサポートする方法の 1 つであり、draggable 属性と組み合わせて使用されます。
7. id 属性
id 属性は、要素に一意の識別子を割り当てるために使用されます。これは言うまでもありません。注意すべき点の 1 つは、id 属性を使用してドキュメント内の特定の場所に移動することもできるということです。
8. hidden 属性
hidden はブール型の属性で、現時点では関連する要素に注目する必要がないことを示します。ブラウザは関連する要素を非表示にすることでこれを処理します。 （漠然と思っているのですが、要素の表示・非表示を制御する場合は、hiddenクラスをカスタマイズして、その中にhiddenスタイルを記述することになります） 詳しくは、HTML5のhidden属性を紹介したこちらの記事もご覧ください
<!-- hidden属性应用 --><div hidden>这个元素将会被隐藏</div>
9、lang 属性
lang 属性は、要素のコンテンツで使用される言語を記述するために使用されます。 lang 属性は有効な ISO 音声コードを使用する必要があります。この属性を使用する目的は、テキスト リーダー使用時の正しい発音など、要素の内容を表現する方法をブラウザーが調整できるようにすることです。
<!-- lang属性应用 --><p>Hello - how are you?</p>
10. スペルチェック属性
スペルチェック属性は、ブラウザが要素のコンテンツに対してスペル チェックを実行するかどうかを示すために使用されます。この属性は、次の場合にのみ使用されます。ユーザーが編集できる要素であり、それが現れて初めて意味を持ちます。
スペルチェック属性は、true と false の 2 つの値を受け入れます。スペルチェックの実装方法はブラウザごとに異なります。
<textarea name="" id="" cols="30" rows="10" spellcheck="true">This is some lalalala text</textarea>
11. style 属性
style 属性は、要素に CSS スタイルを直接定義するために使用されます。
12. Tabindex 属性
HTML ページのキーボード フォーカスは、Tab キーを押すことで要素間で切り替えることができます。デフォルトの転送順序は、tabindex 属性を使用して変更できます。
<form action=""> <label>Name: <input type="text" name="" id="" tabindex="2"></label> <label>City: <input type="text" name="" id="" tabindex="-1"></label> <label>Country: <input type="text" name="" id="" tabindex="1"></label> <input type="submit" value="" tabindex="3"></form>
上記のコードの効果は次のとおりです。Tab キーを押すプロセス中に、tabindex 1 を持つ Country 入力ボックスが最初に選択され、次にフォーカスが Name 入力ボックスにジャンプし、最後に送信されます。 tabindex が -1 に設定されている要素は、ユーザーが Tab キーを押した後は選択されません。
13. title 属性
title 属性は、要素に関する追加情報を提供します。ブラウザは通常、ツールバーのヒントを表示するためにこれらを使用します。これは、一部の不完全な表示テキストで使用されます。タイトルもよく使われます。
関連する推奨事項:「html ビデオ チュートリアル」
以上がhtml5 のグローバル属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。