HTML 地址标签
- 王林原创
- 2024-09-04 16:27:04474浏览
;标签用于获取有关网站所有者或文章作者的详细联系信息。它可能包括地址、电话、电子邮件、网站连接等等。 标签对于不同的上下文很有帮助，包括页面标题中的业务联系信息，或与作者相关的联系信息等。传统上，浏览器将
中包含的斜体文本视为斜体文本。标签。该标签通常也称为。地址>。通常，元素将包含在 元素以及其他细节。难道就不能用其他方式来识别地址吗？在本主题中，我们将学习 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
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中文网其他相关文章！
css html define for while include Error class private Attribute Property Event dom this history background input windows
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：HTML abbr Tag下一篇：Small Tag in HTML