HTML グローバル属性の定義と役割を調べる

HTML グローバル属性の定義と役割を確認する

HTML (ハイパーテキスト マークアップ言語) は、Web ページの構造とコンテンツを記述するために使用されるマークアップ言語です。 HTML におけるグローバル属性は、すべての HTML 要素に適用され、グローバルな効果を持つ属性です。この記事では、HTML グローバル属性の定義と役割を検討し、具体的なコード例を示します。

1. class

class 属性は、HTML 要素の 1 つ以上のクラス名を定義するために使用されます。クラス名は要素の識別または結合に使用され、要素は CSS スタイル シートと JavaScript を通じて操作および制御できます。要素にクラス属性を追加すると、スタイルを再利用して維持できます。

コード例:

<div class="container">
  <p class="text">Hello, World!</p>
</div>

2. id

id ​​属性は、HTML 要素の一意の識別子を定義するために使用されます。 id 属性を使用すると、特定の HTML 要素を JavaScript で簡単に操作および制御できます。 HTML ドキュメントでは、id 属性の値は一意である必要があります。

コード例:

<div id="header">This is the header</div>

3. style

style 属性は、HTML 要素のインライン スタイルを指定するために使用されます。インライン スタイルは、HTML タグに直接記述された CSS スタイルで、外部スタイル シートまたは内部スタイルの設定をオーバーライドできます。 style 属性を使用すると、特定の要素に対してスタイルを個別に定義できます。

コード例:

<p style="color: blue; font-size: 16px;">This is a blue paragraph with font size of 16px</p>

4. title

title 属性は、HTML 要素に追加のプロンプト情報を提供するために使用されます。 title 属性を持つ要素の上にマウスを置くと、title 属性の値が表示されます。 title 属性はほとんどの HTML 要素に適用でき、ユーザー エクスペリエンスとページのアクセシビリティを向上させることができます。

コード例:

<button title="Click me!">Submit</button>

5. tabindex

tabindex 属性は、HTML 要素のフォーカス順序を制御するために使用されます。ユーザーが Tab キーを使用してページ内を移動すると、HTML 要素のフォーカスが tabindex 属性の値の順序で切り替わります。 tabindex 属性の値には、正の整数、0 または -1 を指定できます。

コード例:

<input type="text" tabindex="1">
<input type="checkbox" tabindex="2">
<input type="submit" tabindex="3">

6. data-*

data-* 属性は、HTML 要素のカスタム データ属性を定義するために使用されます。これらのカスタム データ属性を JavaScript で使用して、要素関連のデータを保存し、その後の操作や処理を容易にすることができます。

コード例:

<div data-user-id="123" data-user-name="John Doe">User Information</div>

7. lang

lang 属性は、HTML 要素の言語を指定するために使用されます。 lang 属性を通じて、HTML 要素ごとに異なる言語を設定して、多言語 Web サイトのサポートと国際化を実現できます。

コード例:

<p lang="en">Hello, World!</p>
<p lang="zh">你好，世界！</p>

上記は、よく使用される HTML グローバル属性の定義と機能です。これらのグローバル属性を合理的に使用することで、Web ページの品質、保守性、アクセシビリティを向上させることができます。 。この記事が皆さんに HTML グローバル属性についてより深く理解してもらえることを願っています。

以上がHTML グローバル属性の定義と役割を調べるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。