HTML 주소 태그

태그는 사이트 소유자나 기사 작성자에 관한 연락처 정보를 얻는 데 사용됩니다. 여기에는 주소, 전화번호, 이메일, 웹사이트 연결 등이 포함될 수 있습니다. 태그는 페이지 헤더의 비즈니스 연락처 정보나 작성자와 관련된 연락처 정보 등 다양한 상황에 유용합니다. 전통적으로 브라우저는

꼬리표. 이 태그는 일반적으로 . 일반적으로 요소는 다른 세부 사항과 함께 요소. 다른 방법으로는 주소를 식별하는 데 사용되어서는 안 되나요? 이번 주제에서는 HTML 주소 태그에 대해 알아보겠습니다.

구문

태그는 아래와 같이 작성됩니다.

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

속성

아래에 언급된 속성은 다음과 같습니다

1. 전역 속성

전역 속성은 HTML 요소에 사용되는 속성과 관련된 데 사용됩니다. 이러한 속성은 모든 HTML 요소에 널리 퍼져 있습니다.

• accesskey: 요소를 활성화하기 위한 단축키를 정의합니다.
• class: 요소의 클래스 이름을 제공합니다.
• contenteditable: 요소를 편집할 수 있는지 여부를 나타내는 데 사용됩니다.
• dir: 요소의 텍스트 방향을 정의하는 데 사용됩니다.
• draggable: 페이지에서 요소를 드래그하는 방법을 정의합니다.
• dropzone: 연결 시 데이터를 복사, 이동, 링크할 수 있는지 여부를 나타내는 데 사용됩니다.
• id: 요소의 특정 ID를 정의합니다.
• lang: 요소 콘텐츠의 언어를 정의합니다.
• style: 요소에 CSS 스타일을 제공합니다.
• tabindex: 요소의 탭 순서를 정의하는 데 사용됩니다.
• title: 요소에 대한 추가 정보를 제공하는 데 사용됩니다.
• translate: 요소의 내용을 번역할 수 있는지 여부를 나타냅니다.
• 맞춤법 검사: 요소 콘텐츠의 맞춤법 검사를 정의합니다.
• data: HTML과 DOM 묘사 간에 비공개 데이터를 교환하는 데 사용됩니다.
• hidden: 이 속성은 요소를 숨길 필요가 있을 때 사용됩니다

2. 이벤트 속성

특정 사용자의 개입에 브라우저가 반응할 때마다 이벤트가 발생합니다. 사용자가 마우스를 클릭하거나, 문서나 사진을 업로드하거나, 비디오를 재생하거나, 웹페이지에서 기타 활동을 수행하는 경우입니다.

3. Windows 이벤트 속성

창 이벤트 속성은 창 개체가 시작될 때 사용됩니다.

• onafterprint: 문서를 인쇄해야 할 때 사용됩니다.
• onbeforeprint: 문서를 인쇄해야 하는 시점 이전에 실행됩니다.
• onbeforeload: 문서를 언로드할 때 사용됩니다.
• onblur: 이 속성은 창에 포커스가 없을 때 정의됩니다.
• onerror: 문서 다운로드 중 오류가 발생한 경우 정의됩니다.
• onload: 웹페이지 콘텐츠가 로드될 때 지정됩니다.
• onmessage: 메시지에 원인이 있을 때 사용됩니다.
• onoffline: 이 속성은 브라우저가 오프라인 모드에서 작동할 때 사용됩니다.
• ononline: 이 속성은 브라우저가 온라인 모드에서 작동할 때 사용됩니다.
• onpagehide: 사용자가 웹페이지에서 벗어날 때 지정됩니다.
• onpageshow: 사용자가 웹페이지로 이동할 때 지정됩니다.
• onpopstate: 이 속성은 창 기록이 변경될 때 사용됩니다.
• onredo: 페이지에 redo 옵션이 있을 때 사용됩니다.
• 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

<meta charset="UTF-8">
<title>
HTML Address Tag
</title>


<article>
<h2 id="This-is-Heading-Title">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>

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:

<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
color: #1c87c9;
}
</style>


<article>
<h2 id="This-is-Heading-Title">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>

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:

<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
background-color: #1c87c9;
}
</style>


<article>
<h2 id="This-is-Heading-Title">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>

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:

<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
text-decoration: underline;
}
.style2 {
text-decoration: italic;
}
</style>


<article>
<h2 id="This-is-Heading-Title">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

</address>
</footer>

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:

<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>


<article>
<h2 id="This-is-Heading-Title">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

</address>
</footer>

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:

<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
text-shadow: 2px 2px #1c87c9;
}
</style>


<article>
<h2 id="This-is-Heading-Title">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

</address>
</footer>

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:

<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
line-height: 2.0;
}
</style>


<article>
<h2 id="This-is-Heading-Title">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>

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 section.

위 내용은 HTML 주소 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!