Maison  >  Article  >  interface Web  >  Tutoriel sur l'utilisation des balises de lien hypertexte dans la production de pages XHTML_HTML/Xhtml_Web

Tutoriel sur l'utilisation des balises de lien hypertexte dans la production de pages XHTML_HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:46:101551parcourir


Hyperlien, également appelé « lien ». On peut dire que les hyperliens sont présents partout sur les pages Web que nous parcourons. Lorsque nous cliquons sur une adresse de lien sur une page Web, celle-ci renvoie vers une autre page Web. C'est ainsi que fonctionnent les hyperliens.
Utilisez la balise pour définir un lien hypertexte, syntaxe :
Texte ou image affiché
Exemple :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <a href="http://www .baidu.com/">Lien vers Baidua>

Effet d'affichage du navigateur :
Lien vers Baidu
Lorsque nous cliquons sur les mots « Lien vers Baidu » ci-dessus, le navigateur sera redirigé vers la page d'accueil de Baidu.


Attribut de lien hypertexte
Attribut de lien hypertexte :
adresse du lien href. Il peut s'agir d'une adresse Web absolue ou d'une adresse relative.
cible du lien cible. Une valeur de _blank ouvrira l'adresse du lien dans une nouvelle fenêtre. Par défaut, la fenêtre actuelle sera utilisée pour ouvrir l'adresse du lien.
lien d'ancrage du nom, nous en parlerons séparément ci-dessous.

Adresse relative du lien web :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <a href="/css" target="_blank">Tutoriel CSS DIV a> 

Cet exemple utilise une adresse relative, tandis que l'exemple de lien vers Baidu ci-dessus utilise une adresse absolue.

Exemple d'attribut cible ajouté :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <a href="http://www .baidu.com/" cible="_blank">lien À Baidu a>

Lorsque vous cliquez à nouveau sur le lien, le navigateur permettra à une nouvelle page d'ouvrir l'adresse du lien, tandis que la fenêtre de la page d'origine sera conservée.
Conseils
Lorsqu'une adresse de lien n'est pas très étroitement liée au sujet ou au processus en cours, l'attribut target="_blank" est généralement activé. Sinon, essayez de ne pas ouvrir une nouvelle fenêtre afin de donner aux téléspectateurs une vue conviviale. expérience de navigation.
Si la page est composée de plusieurs frames de page, l'attribut cible peut également avoir d'autres valeurs

Lien hypertexte d'e-mail
Exemple de lien d'e-mail :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <a href="mailto:admin@xyz .com">Contactez le webmaster de la station xyza>

Cliquer sur ce lien permettra de rédiger des e-mails dans votre client de messagerie par défaut.

Lien d'ancrage
Le lien d'ancrage fait référence au lien dans la page, mais maintenant de nombreuses personnes appellent également les hyperliens textuels des liens d'ancrage.
Prenons un exemple pour expliquer le rôle des ancres :
Par exemple, nous avons un article bien écrit, et de nombreuses personnes ont commenté à la fin de l'article, et la fenêtre de commentaire est généralement en bas du commentaire. Le site Web définira un lien d'ancrage là où le commentaire est publié et concevra un lien vers le lien d'ancrage où le commentaire est affiché, tel que : "Publier un commentaire". Si quelqu'un ne souhaite pas voir les commentaires laissés par d'autres et souhaite accéder immédiatement à la fenêtre de saisie des commentaires, cliquez sur « Publier un commentaire » pour accéder rapidement à la fenêtre de saisie des commentaires dans l'industrie. Cette conception améliore sans aucun doute l’expérience utilisateur des téléspectateurs.
Exemple d'utilisation d'un lien d'ancrage
Création d'une ancre :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <p><a nom="commentaire">a >p>

Créer une adresse hyperlien reliant à l'ancre :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <p><a href="#comment">Lien vers l'ancre de commentairea>p> 

Comme vous pouvez le voir sur l'exemple, pour accéder à une ancre, ajoutez simplement le signe "#" et le nom de l'ancre après l'adresse du lien. Dans l'exemple ci-dessus, puisqu'il s'agit d'une ancre renvoyant vers cette page, l'adresse du lien précédent est ignorée (remarque : l'adresse relative est en fait ignorée et ne sera pas discutée ici).
Astuce
Si vous souhaitez expérimenter l'utilisation de cette balise d'ancrage, veillez à conserver suffisamment d'espace web entre le lien hypertexte vers l'ancre et la balise d'ancrage pour voir l'effet. Vous pouvez utiliser les balises de saut de ligne que nous avons apprises ci-dessus pour créer suffisamment d'espace blanc au-dessus et en dessous pour tester.
Vous pouvez également créer une balise d'ancrage qui renvoie vers d'autres pages, par exemple :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <p><a href="http://www.abc.com/#test">Lien vers l'ancrea>p>

Bien sûr, la page www.abc.com doit avoir la balise d'ancrage de test, sinon elle ne fera qu'un lien vers la page www.abc.com et ignorera la balise d'ancrage.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn