HTML 属性

PHPzオリジナル: 2024-09-04 16:17:23642ブラウズ

HTML 属性は、HTML 要素の動作を変更する特別な単語です。これらは要素の開始タグ内で使用され、要素のデフォルトの機能を変更したり、必要な機能を提供したりできます。構文的には、属性は HTML 開始タグに追加されます。これらは必須、オプション、標準、またはイベント属性として分類でき、要素の開始タグ内で等号「=」で区切られた名前と値のペアとして記述されます。

さまざまな HTML 属性

以下に、さまざまな HTML 属性とその詳細な動作を示します。

1.コア属性

主に使用される 4 つのコア属性があります:

ID: この属性は、HTML ページ内の要素を一意に識別します。要素に ID 属性がある場合、それは要素とそのコンテンツを簡単に識別できる一意の識別子として機能します。これは、Web ページ内に同じ名前の要素が複数ある場合に特に便利です。
タイトル属性: この属性は、要素に推奨されるタイトルを提供します。その動作は、それが使用されるコンテキストによって異なり、カーソルが要素の上に置かれたとき、または要素が読み込まれているときにツールチップとして表示される場合があります。また、ユーザーが要素の上にマウスポインタを置いたときに、要素に関する追加情報を提供することもできます。
クラス属性: この属性は、要素のクラスを指定することにより、要素をスタイルシートに関連付けます。カスケードスタイルシートを学習するときに、この属性についてさらに詳しく学習できます。 class 属性の値には、スペースで区切られたクラス名のリストを指定できます。例: class=”className1 className2 className3″
スタイル属性: この属性を使用すると、ユーザーは個々の要素の CSS ルールを指定できます。 style 属性を使用すると、フォントサイズ、フォントファミリー、色の変更など、さまざまな CSS 効果を HTML 要素に適用できます。

2.国際化属性

Dir: dir 属性は、テキストが従うべき方向をブラウザーに示すのに役立ちます。この属性は、LTR と RTL という 2 つの値を取ることができます。 LTR はデフォルト値である左から右を意味し、RTL は右から左を意味します。内で使用される場合タグによって、ドキュメント全体でテキストをどのように表現するかを決定します。タグのコンテンツ内のテキストの方向を制御することもできます。
Lang 属性: この属性は、ドキュメントで使用されている主な言語を示すのに役立ちます。これを HTML で使用すると、以前のバージョンの HTML との下位互換性を維持できます。また、新しい XHTML ドキュメントでは、これを XML: lang 属性に置き換えます。 lang 属性の値は ISO-639 標準に基づいており、2 文字の言語コードで構成されます。言語の宣言は、アクセシビリティと検索エンジンがコンテンツのインデックスを適切に作成するために重要です。
XML-Lang 属性: この属性は、lang 属性を置き換える傾向があります。 XML-lang 属性の値には、ISO-639 で指定されている言語コードと国コードが含まれている必要があります。

3.汎用属性

Align 属性: この属性は、Web ページ上に特定の要素を配置する場合に便利です。ページの左、右、または中央への配置を変更できます。すべての要素のデフォルトの配置は左に設定されていますが、align 属性を使用して変更できます。
Src 属性: Web ページに画像を挿入したい場合は、を使用する必要があります。 src 属性を持つタグ。画像のアドレスを二重引用符内の属性値として指定できます。次のように src 属性を使用して、Web ページに画像を含めることができます。

コード:

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>

Alt 属性: この属性は、主属性であるの場合に何かを表示するために使用できる代替タグとして使用されます。タグに割り当てられた元の画像を表示できません。コーディング側で画像を使用している開発者に画像を説明できます。メイン画像が失敗した場合は、代替画像が表示されます。
幅と高さの属性: これらの属性は、画像の高さと幅を調整できます。

例:

コード:

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html>

Href Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the tag. When the link is placed in the href attribute, it is associated with the text displayed within the tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.

4. Data Attribute

HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.

In order to customize, one divides the data into two parts:

Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
Attribute Value: Any string value can be associated with the attribute.

The syntax for a data attribute is as follows:

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

5. DOM Attribute Property

To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.

The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

6. Global Attributes

HTML also provides global attributes that can work with any HTML element:

Accesskey: Specifies a shortcut key to activate or focus on any element.
Translate: Specifies whether the content of the element is to be translated or not.
Class: One or more class names for an element are specified.
Title: Specifies extra information about an element.
Contenteditable: This attribute can be used to specify whether the content is editable or not.
Tabindex: Specifies the tabbing order of an element.
Dir: Specifies the text direction for any content of an element.
Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
Draggable: Specifies if an element should be draggable or not.
Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.

7. Event Attributes

HTML has the ability to trigger actions when some events take place.

Onload: Fires after the page has finished loading.
Onmessage: A script that runs when the message is triggered.
Onstorage: A script that runs when a web storage area is updated.
Onerror: The script runs when an error occurs.
Onpagehide: The script can be used when the user navigates away from a page.

8. Form Event Attributes

Actions inside an HTML form trigger these events.

Onblur: 要素がフォーカスを失うとすぐにトリガーされます。
Onchange: 要素の値が変更されるとすぐにトリガーされます。
Oncontextmenu: これは、コンテキストメニューがトリガーされたときに実行されます。
Onfocus: 要素がフォーカスを取得するとすぐにトリガーされます。
Oninput: 要素が入力を受け取ったときにスクリプトを実行する必要があります。
検索時: これは、ユーザーが検索フィールドに何かを書き込むとトリガーされます。
Oninvalid: これは、入力された要素が無効な場合にトリガーされます。

9.主要なイベント属性

Onkeydown: キーが押されたときにトリガーされます。
Onkeypress: キーが押されるとトリガーされます。
Onkeyup: これは、ユーザーがキーを放したときにトリガーされます。

10.マウスイベント属性

Onclick: これは、マウスが要素をクリックするとトリガーされます。
Onmousemove: マウスポインターが要素の上にあるときに移動すると発生します。
Onmouseip: マウスボタンが要素の上から放されるとトリガーされます。
オンホイール: マウスホイールが要素上で上下に回転するとトリガーされます

11.イベント属性をドラッグ

Ondrag: これは、要素がドラッグされるとトリガーされます。
Ondragleave: 要素が有効なドロップターゲットから離れると、スクリプトが実行されます。
Ondrop: ドラッグされた要素がドロップされるときにトリガーされます
オンスクロール: 要素のスクロールバーがスクロールされているときにスクリプトが実行されます。

結論

HTML は時間の経過とともに進化し、コア、国際化、データ、グローバル、イベントなどの幅広い属性を提供し、Web アプリケーションとページをよりインタラクティブにしています。 HTML を CSS と組み合わせると、Web 要素を簡単にカスタマイズして、視覚的に魅力的な Web アプリケーションを作成できます。

以上がHTML 属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：チートシートのHTML次の記事：チートシートのHTML

続きを見る