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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Dec 29, 2021 am 11:41 AM

html5グローバルプロパティ

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSS：同じDOMで複数のIDを使用できますか？May 14, 2025 am 12:20 AM

いいえ、あなたはusemultipleidsinthemedom.1）idsmustbeuniqueperhtmlspecification、およびusingdusing cansistent browserbehavior.2）useclassesses forstylingmultipleElements、acturtorectorectorectorsectorgettributeurutuureのuseclasses forstyling forstyling forstyling forstyling forstyling forstyling rassess for -destendertantertorectorsutortortortruture

HTML5の目的：より強力でアクセス可能なWebを作成するMay 14, 2025 am 12:18 AM

html5aimstoenhancewebcapability、makingmoredynamic、interactive、およびaccessible.1）itupportsmultimediaelementslikeand、排除、2）semanticelementionmentionmentionmentionimementsimementionimementsimementsimbrovecessibilityandcodereadability.3）

HTML5の重要な目標：Web開発とユーザーエクスペリエンスの向上May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelymentanduserexperiencetheTheTheTheTheTheTheTheTheTructure、multimedieingegration、およびperformanceImprovements.1）semanticelementslike like like ,, and and requrovedababilityandaccessibility.2）andTagsallowseamlessmultimediaemdiding withoutplugins.3）

HTML5：安全ですか？May 14, 2025 am 12:15 AM

html5isnotinherecureを使用しますが、featurescanleadtosecurityrisksifmisusedorimpremented.1）usetheSsandboxattribution controlembeddeddeddeddedentandPreventvulnerabilitieslikeclickjacking.2）

HTML5は、古いHTMLバージョンと比較して目標を達成しますMay 14, 2025 am 12:14 AM

html5aimedtoeenhancewebdevelopmentbyintroducingsmanticelements、nativemultimediasupport、改善、およびオフリンの実行可能性、対照、html.1）itintroductuedsemantictagslike、nattructurcturcurean desieand.2）

CSS：IDセレクターを使用するのは悪いですか？May 13, 2025 am 12:14 AM

IDセレクターを使用することは、CSSでは本質的に悪くはありませんが、注意して使用する必要があります。 1）IDセレクターは、一意の要素またはJavaScriptフックに適しています。 2）一般的なスタイルの場合、クラスセレクターはより柔軟で保守可能であるため、使用する必要があります。 IDとクラスの使用のバランスをとることにより、より堅牢で効率的なCSSアーキテクチャを実装できます。

HTML5：2024年の目標May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONREFINIMINGANDOPTIMIZATION、notnewfeatures.1）強化された拡張性と拡張効率化されたレンダリング.2）

HTML5が改善しようとした主な領域は何ですか？May 13, 2025 am 12:12 AM

html5aimed toemprovewebdevelymentinfourkeyareas：1）multimediasupport、2）セマンティクス構造、3）フォームキャピリティ、および4）offlineandstorageoptions.1）html5introduededelements、simplifiedediaembedingemencemanteddim.2）

See all articles