Balise d'adresse HTML-tutoriel HTML-php.cn

L' La balise est utilisée pour obtenir les coordonnées du propriétaire du site ou de l’auteur de l’article. Il peut s'agir d'une adresse, d'un téléphone, d'un e-mail, d'une connexion à un site Web et bien d'autres encore. L' La balise est utile dans différents contextes, notamment les informations de contact professionnel dans l'en-tête de la page ou les informations de contact pertinentes pour l'auteur, etc. Traditionnellement, les navigateurs affichent en italique le texte contenu dans le champ étiqueter. Cette balise est également généralement appelée élément de < adresse>. Habituellement, le < adresse > l'élément sera inclus dans un < pied de page > élément avec d’autres détails. En aucun cas ne devrait-il être utilisé pour identifier des adresses ? Dans cette rubrique, nous allons en apprendre davantage sur la balise d'adresse HTML.

Syntaxe

La syntaxe de l'attribut la balise sera écrite comme indiqué ci-dessous :

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

Copier après la connexion

Attributs

Voici les attributs suivants mentionnés ci-dessous

1. Attributs globaux

Les attributs globaux seront utilisés pour concerner les attributs utilisés sur n'importe quel élément HTML. De tels attributs sont répandus dans tous les éléments HTML.

accesskey : Il définit la touche de raccourci pour activer l'élément.
class : Il donne les noms de classe pour un élément.
contenteditable : Il est utilisé pour indiquer si un élément peut être modifié ou non.
dir : Il est utilisé pour définir la direction du texte d'un élément.
draggable : Il définit comment l'élément peut être glissé sur la page.
dropzone : Il est utilisé pour indiquer si les données peuvent être copiées, déplacées ou liées lorsqu'elles sont connectées.
id : Il définit l'identifiant spécifique de l'élément.
lang : Il définit la langue du contenu de l'élément.
style : Il fournit le style CSS de l'élément.
tabindex : Il est utilisé pour définir l'ordre de tabulation de l'élément.
titre : Il est utilisé pour fournir des informations supplémentaires sur l'élément.
traduire : Il indique si le contenu de l'élément peut être traduit ou non.
vérification orthographique : Il définit la vérification orthographique du contenu d'un élément.
données : Il est utilisé pour échanger des données privées entre la représentation HTML et DOM.
caché : Cet attribut est utilisé lorsqu'il est nécessaire de masquer les éléments

2. Attributs de l'événement

Un événement se produit chaque fois qu'un navigateur répond à l'intervention d'un utilisateur spécifique. Lorsqu'un utilisateur clique sur une souris, télécharge un document ou une image, lit une vidéo ou effectue toute autre activité sur une page Web.

3. Attributs d'événement Windows

Les attributs d'événement de fenêtre sont utilisés lorsque les objets de fenêtre sont lancés.

onafterprint : Il est utilisé lorsque le document doit être imprimé.
onbeforeprint : Il est exécuté avant le moment où le document doit être imprimé.
onbeforeload : Il est utilisé lorsque le document sera déchargé.
onblur : Cet attribut sera défini lorsqu'il n'y a pas de focus depuis la fenêtre.
onerror : Il est défini lorsqu'il y a une erreur lors du téléchargement du document.
onload : Il est spécifié lorsque le contenu de la page Web est chargé.
onmessage : Il est utilisé lorsqu'il y a une cause dans un message.
onoffline : Cet attribut sera utilisé lorsque le navigateur fonctionne en mode hors ligne.
ononline : Cet attribut sera utilisé lorsque le navigateur fonctionne en mode en ligne.
onpagehide : Il est spécifié lorsque l'utilisateur s'éloigne de la page Web.
onpageshow : Il est spécifié lorsque l'utilisateur accède à la page Web.
onpopstate : Cet attribut sera utilisé en cas de changement dans l'historique des fenêtres.
onredo : Il est utilisé lorsqu'il y a une option de rétablissement sur une page.
onresize : Il est spécifié lorsque l'utilisateur redimensionne la fenêtre.
onstorage : Il est défini lorsqu'il y a une mise à jour dans le stockage Web.
onundo : Il est utilisé lorsqu'une option d'annulation est annulée.
onunload : Il est spécifié lorsque le contenu de la page Web est déchargé.

4. Attributs d'événement de formulaire

Un événement pouvant avoir lieu au sein d'un formulaire est considéré comme un événement dans le processus. Les événements de formulaire se produisent lorsqu'un utilisateur ouvre ou ferme un formulaire, passe d'un formulaire à l'autre ou opère sur un formulaire avec des données.

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>

Copier après la connexion

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

Balise d'adresse 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>

Copier après la connexion

Output:

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

Balise d'adresse 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>

Copier après la connexion

Output:

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

Balise d'adresse 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>

Copier après la connexion

Output:

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

Balise d'adresse 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>

Copier après la connexion

Output:

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

Balise d'adresse 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>

Copier après la connexion

Output:

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

Balise d'adresse 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>

Copier après la connexion

Output:

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

Balise d'adresse 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!