HTML グローバル属性の中核ポイントをマスターする: 覚えておくべき 5 つの重要な知識ポイント

HTML のグローバル属性をマスターするための核心ポイント: 覚えておくべき 5 つの重要な知識ポイント

HTML は Web ページを構築するための基本言語であり、グローバル属性は次のとおりです。任意の要素の HTML プロパティに適用されます。これらのグローバル プロパティを理解し、習得することは、効率的で柔軟な Web ページを作成するために重要です。この記事では、5 つの重要な知識ポイントを紹介し、具体的なコード例を示します。

1. class 属性: class 属性は HTML 要素の 1 つ以上のクラス名を定義するために使用され、CSS または JavaScript を通じて特定のクラス名のスタイルや動作を制御できるようになります。以下は例です:

<div class="box red">这是一个红色的方框</div>
<div class="box green">这是一个绿色的方框</div>

上記のコードでは、2 つの <div> 要素にそれぞれ class 属性を追加しました <code>box redと box green では、CSS を使用して、これら 2 つのクラス名のスタイルを別々に制御できます。

2. id ​​属性: id 属性は、HTML 要素の一意の識別子を定義するために使用されます。 class 属性とは異なり、id 属性は同じ HTML ドキュメント内でのみ一意に存在できます。以下に例を示します。

<div id="header">这是网页的头部内容</div>

上記のコードでは、値 header を持つ id 属性を <div> 要素に追加しました。 id 属性を使用すると、CSS または JavaScript で特定の要素を簡単に選択して操作できます。 <ol start="3"><li>style 属性: style 属性は、HTML 要素のインライン スタイルを直接指定するために使用されます。インライン スタイルは、外部または内部のスタイル シート内の同じ名前のルールをオーバーライドします。以下は例です: </li></ol><pre class='brush:html;toolbar:false;'>&lt;div style=&quot;color: red; font-size: 14px;&quot;&gt;这段文字是红色的，字体大小为14像素&lt;/div&gt;</pre><p>上記のコードでは、style 属性を使用してフォントの色とサイズを直接指定します。インライン スタイルは便利ですが、特定の状況でのみ使用するのが最適であり、スタイル管理には外部スタイル シートを使用するようにしてください。 </p> <ol start="4"><li>title 属性: title 属性は、HTML 要素に追加のプロンプト情報を追加するために使用されます。通常、要素の上にマウスを置くと表示されます。例は次のとおりです: </li></ol><pre class='brush:html;toolbar:false;'>&lt;a href=&quot;https://example.com&quot; title=&quot;点击访问示例网站&quot;&gt;示例网站&lt;/a&gt;</pre><p>上記のコードでは、title 属性を <code><a></a> 要素に追加しました。リンク上にマウスを置くと、ブラウザーが「クリックしてサンプル Web サイトにアクセスしてください」というプロンプト ボックスが表示されます。

5. data-属性: data- 属性はカスタム データを格納するために使用され、「data-」で始まる任意の名前を付けることができます。このカスタム データは JavaScript で簡単にアクセスして操作できます。以下は例です:

<button data-color="red">红色</button>
<button data-color="green">绿色</button>

上記のコードでは、data-* 属性を 2 つのボタン要素 (「data-color」) に追加しました。 JavaScript では、getElementByTagName などのメソッドを通じてこれらのカスタム データを取得し、それに応じて処理できます。

これらの 5 つの主要なグローバル属性の知識ポイントを学習および実践することで、HTML の柔軟性と機能をよりよく理解できるようになります。これらの属性は Web 開発で広く使用されており、それらを深く理解することで、より良い Web ページを作成できるようになります。

上記は HTML のグローバル属性を習得するための核心的なポイントです。あなたの学習に役立つことを願っています。一緒に頑張りましょう！