HTML 位址標籤-html教學-PHP中文網

屬性

1.全域屬性

2.事件屬性

3. Windows 事件屬性

4.表單事件屬性

Examples of implementing HTML address Tag

Example #1

Example #2 – Color property

Example #3 – Background Color Property

Example #4 – Text Decoration

Example #5 – CSS Fonts

Example #6 – Text Shadow

Example #7 – Line Height

Conclusion

首頁

web前端

html教學

HTML 位址標籤

王林

Sep 04, 2024 pm 04:27 PM

html html5 HTML Tutorial HTML Properties HTML tags

;標籤用於獲取有關網站所有者或文章作者的詳細聯絡資訊。它可能包括地址、電話、電子郵件、網站連接等等。標籤對於不同的上下文很有幫助，包括頁面標題中的業務聯絡訊息，或與作者相關的聯絡資訊等。傳統上，瀏覽器將

中包含的斜體文字視為斜體文字。標籤。此標籤通常也稱為。地址>。通常，元素將包含在元素以及其他細節。難道就不能用其他方式來辨識地址嗎？在本主題中，我們將學習 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: 用來定義元素的 Tab 鍵順序。
標題：用於提供元素的附加資訊。
translate:表示元素的內容是否可以翻譯。
拼字檢查：它定義元素內容的拼字檢查。
data: 用於在 HTML 和 DOM 描述之間交換私有資料。
hidden：當需要隱藏元素時使用該屬性

2.事件屬性

每當瀏覽器回應特定使用者的介入時，就會發生事件。當使用者點擊滑鼠、上傳文件或圖片、播放影片或在網頁上執行任何其他活動。

3. Windows 事件屬性

視窗事件屬性在視窗物件啟動時使用。

onafterprint：需要列印文件時使用。
onbeforeprint:在需要列印文件之前執行。
onbeforeload:當文件將被卸載時使用。
onblur:當視窗沒有焦點時將定義此屬性。
onerror:下載文件時出現錯誤時定義。
onload:載入網頁內容時指定。
onmessage:當訊息中有原因時使用。
onoffline:當瀏覽器在離線模式下工作時，將使用該屬性。
ononline:當瀏覽器處於線上模式時將使用此屬性。
onpagehide：當使用者離開網頁時指定。
onpageshow: 當使用者導覽至網頁時指定。
onpopstate:當視窗歷史記錄發生變更時將使用此屬性。
onredo：當頁面上有重做選項時使用。
onresize:當使用者調整視窗大小時指定。
onstorage： 當網路儲存有更新時定義。
onundo:當有一個撤銷選項被取消時使用。
onunload:卸載網頁內容時指定。

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn