html5 のグローバル属性とは何ですか?-フロントエンドQ&A-php.cn

html5 のグローバル属性とは何ですか?

青灯夜游

リリース： 2021-12-29 11:41:28

オリジナル

2675 人が閲覧しました

html5 属性は次のとおりです: 1. accesskey; 2. class; 3. contenteditable; 4. dir; 5. ドラッグ可能; 6. ドロップゾーン; 7. 非表示; 8. lang; 9. スペルチェック; 10. tabindex、など待ってください。

html5 のグローバル属性とは何ですか?

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。