ホームページ > 記事 > ウェブフロントエンド > HTMLアドレスタグ
HTMLアドレスタグ
- 王林オリジナル
- 2024-09-04 16:27:04679ブラウズ
タグは、サイト所有者または記事著者に関する連絡先の詳細を取得するために使用されます。これには、住所、電話番号、電子メール、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
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:
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:
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:
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:
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:
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:
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 サイトの他の関連記事を参照してください。