HTMLアドレスタグ-htmlチュートリアル-php.cn

HTMLアドレスタグ

王林

リリース： 2024-09-04 16:27:04

オリジナル

499 人が閲覧しました

タグは、サイト所有者または記事著者に関する連絡先の詳細を取得するために使用されます。これには、住所、電話番号、電子メール、Web サイト接続などが含まれる場合があります。タグは、ページヘッダーのビジネス連絡先情報や作成者に関連する連絡先情報など、さまざまなコンテキストに役立ちます。伝統的に、ブラウザーは

タグに含まれる斜体のテキストを作成します。タグ。このタグは通常、< の要素とも呼ばれます。住所＞。通常、<住所＞要素は < に含まれます。フッター>要素とその他の詳細。それ以外の方法でアドレスを特定するために使用すべきではありませんか?このトピックでは、HTML アドレスタグについて学習します。

構文

の構文タグは以下のように記述されます:

<html>
<body>
<address>
Contact Information:<br>
www.mycompany.com<br>
#12345, Main Street<br>
Name of City, Name of State
</address>
</body>
</html>

ログイン後にコピー

属性

以下に挙げる属性は次のとおりです

1.グローバル属性

グローバル属性は、HTML 要素で使用される属性に関連するために使用されます。このような属性は、すべての HTML 要素にわたって普及しています。

accesskey: 要素をアクティブにするためのショートカットキーを定義します。
class: 要素のクラス名を与えます。
contenteditable: 要素が編集可能かどうかを示すために使用されます。
dir: 要素のテキスト方向を定義するために使用されます。
draggable: ページ上で要素をドラッグする方法を定義します。
dropzone: 接続時にデータのコピー、移動、リンクが可能かどうかを示すために使用されます。
id: 要素の特定の ID を定義します。
lang: 要素のコンテンツの言語を定義します。
style: 要素の CSS スタイルを提供します。
tabindex: 要素のタブ順序を定義するために使用されます。
title: 要素の追加情報を提供するために使用されます。
translate: 要素の内容が翻訳可能かどうかを示します。
spellcheck: 要素のコンテンツのスペルチェックを定義します。
data: HTML と DOM 記述の間でプライベートデータを交換するために使用されます。
hidden: この属性は、要素を非表示にする必要がある場合に使用されます

2.イベント属性

ブラウザが特定のユーザーの介入に応答するたびにイベントが発生します。ユーザーがマウスをクリックしたとき、ドキュメントや画像をアップロードしたとき、ビデオを再生したとき、または Web ページ上でその他のアクティビティを実行したとき。

3. Windows イベント属性

ウィンドウイベント属性は、ウィンドウオブジェクトが開始されるときに使用されます。

onafterprint: ドキュメントを印刷する必要がある場合に使用されます。
onbeforeprint: ドキュメントを印刷する必要がある前に実行されます。
onbeforeload: ドキュメントがアンロードされるときに使用されます。
onblur: この属性は、ウィンドウにフォーカスがないときに定義されます。
onerror: ドキュメントのダウンロード中にエラーが発生した場合に定義されます。
onload: Web ページのコンテンツが読み込まれるときに指定されます。
onmessage: メッセージに原因がある場合に使用されます。
onoffline: この属性は、ブラウザがオフラインモードで動作するときに使用されます。
ononline: この属性は、ブラウザがオンラインモードで動作するときに使用されます。
onpagehide: ユーザーが Web ページから離れるときに指定されます。
onpageshow: ユーザーが Web ページに移動するときに指定されます。
onpopstate: この属性は、ウィンドウ履歴に変更があった場合に使用されます。
onredo: ページにやり直しオプションがある場合に使用されます。
onresize: ユーザーがウィンドウのサイズを変更するときに指定されます。
onstorage: Web ストレージに更新があるときに定義されます。
onundo: 取り消された元に戻すオプションがある場合に使用されます。
onunload: Web ページのコンテンツがアンロードされるときに指定されます。

4.フォームイベント属性

フォーム内で発生する可能性のあるイベントは、プロセス内のイベントとみなされます。フォームイベントは、ユーザーがフォームを開いたり閉じたり、フォーム間を切り替えたり、データを含むフォームを操作したりしたときに発生します。

onblur: This attribute will be defined when there is no focus on the form element.
onchange: It is defined when there is a change in the value of an element.
oncontextmenu: It is used when the user wants to see the context menu.
onfocus: It is used when an element gets a focus.
oninput: It is used when an element gets input from the user.
oninvalid: It is specified when there is an invalid element on a page.
onreset: This attribute will be used when a user wants to reset the form.
onsearch: It is defined when the user searches for some information in the search field.
onselect: It is used when the user selects the text in an element.
onsubmit: It is used when the user submits the form.

Examples of implementing HTML address Tag

Here are the following examples mention below

Example #1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
Contact Address:<br>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Save the above code in a file with a .html extension
Run the html file in a browser, and you would get the output as shown in the below image

HTMLアドレスタグ

Example #2 – Color property

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
color: #1c87c9;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="color_prop">Contact Address:</p>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTMLアドレスタグ

Example #3 – Background Color Property

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
background-color: #1c87c9;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<div class="color_prop">Contact Address:<br>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTMLアドレスタグ

Example #4 – Text Decoration

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
text-decoration: underline;
}
.style2 {
text-decoration: italic;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="style1">Contact Address:</p>
<p class="style2">mycompany.com</p>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTMLアドレスタグ

Example #5 – CSS Fonts

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.style2 {
font-weight: bolder;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="style1">Contact Address:</p>
<p class="style2">mycompany.com</p>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTMLアドレスタグ

Example #6 – Text Shadow

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="style1">Contact Address:</p>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTMLアドレスタグ

Example #7 – Line Height

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
line-height: 2.0;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<div class="color_prop">Contact Address:<br>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

ログイン後にコピー

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTMLアドレスタグ

Conclusion

So far, we have studied how to address tag will be used when an owner wants to specify the address information. In order to quickly contact the author via email, this feature is often combined with the HTML mailto property. The address tag will usually be included in the section < footer> section.

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