Maison > interface Web > tutoriel HTML > Explication détaillée d'exemples d'hyperliens en XHTML

Explication détaillée d'exemples d'hyperliens en XHTML

巴扎黑
Libérer: 2017-05-22 10:39:15
original
1811 Les gens l'ont consulté

Cet article présente principalement le didacticiel sur l'utilisation des balises de lien hypertexte en XHTML, y compris une introduction à l'utilisation des liens d'ancrage et des adresses relatives des liens. Les amis dans le besoin peuvent se référer aux


Hyperliens, également appelés ". 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

<a href="http://www.baidu.com/">链接至百度</a>
Copier après la connexion
  1. Effet d'affichage du navigateur :

  2. Lien vers Baidu

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

<a href="/css" target="_blank">p+CSS教程</a>
Copier après la connexion
  1. 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

<a href="http://www.baidu.com/" target="_blank">链接至百度</a>
Copier après la connexion
  1. 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.

  2. Astuce

  3. Lorsqu'une adresse de lien n'est pas très étroitement liée au sujet ou au processus actuel, l'attribut target="_blank" est généralement activé. Sinon, essayez de ne pas ouvrir de nouvelles fenêtres afin d’offrir aux téléspectateurs une expérience de navigation conviviale.

  4. Si la page est composée de plusieurs cadres de page, l'attribut cible peut également avoir d'autres valeurs

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

Code XML/HTMLCopier le contenu dans le presse-papiers

<a href="mailto:admin@xyz.com">联系xyz站的站长</a>
Copier après la connexion
  1. En cliquant sur ce lien, vous pourrez 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 des 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éer une ancre :

Code XML/HTMLCopier le contenu dans le presse-papiers

<p><a name="comment"></a></p>
Copier après la connexion
  1. Créer une adresse de lien hypertexte vers l'ancre :

Code XML/HTMLCopier le contenu dans le presse-papier

<p><a href="#comment">链接至comment锚</a></p>
Copier après la connexion
  1. Comme vous pouvez le voir sur l'exemple, accéder à une ancre consiste à ajouter 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).

  2. Astuce

  3. Si vous souhaitez expérimenter l'utilisation de cette balise d'ancrage, veillez à combiner le lien hypertexte vers l'ancre avec l'ancre Ce n'est qu'en conservant suffisamment d'espace sur la page Web que vous pourrez 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.

  4. Vous pouvez également créer une balise d'ancrage qui renvoie vers d'autres pages, par exemple :

Code XML/HTML Copiez le contenu dans le presse-papiers

<p><a href="http://www.abc.com/#test">链接至锚</a></p>
Copier après la connexion

Bien sûr, vous devez avoir cette balise d'ancrage de test sur la page www.abc.com, sinon elle ne fera qu'un lien vers www.abc .com et ignorez-la Cette balise d'ancrage

【Recommandations associées】

1 Tutoriel vidéo gratuit HTML

2. Explication image et texte des points de connaissance des en-têtes HTTP

3 Introduction à la façon d'afficher les données JSON en HTML

4. . Explication détaillée de l'exemple HTML implémentant l'indice de quantité sur le bouton de message

5 Exemple de code Html Jquery pour terminer le téléchargement asynchrone de fichiers 

.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal