Ci-dessus: Langue de balisage - Éléments de phrase
Source d'origine Chapitre 7 Point d'ancrage
La bonne façon de dire que les liens dans HTML doivent être appelés ancres. Ils nous permettent non seulement de pointer des documents, mais aussi de paragraphes spécifiques de la page, et peuvent également être utilisés comme un outil pratique pour des liens précis. Laissez l'objet de liaison se rapprocher de l'objectif. Dans ce chapitre, nous verrons quatre pratiques d'ancrage différentes, expliquant les avantages de chaque méthode, et introduisant également comment l'attribut de titre peut améliorer la facilité d'utilisation des liens. De plus, nous utiliserons également CSS pour concevoir des styles pour les liens. Lorsque vous devez spécifier une partie spécifique de la page, le marquage des ancres est le meilleur moyen de le faire.
C'est une situation courante lors de la conception d'un site Web. Vous souhaitez créer un lien vers une partie spécifique d'une certaine page, mais l'utilisateur peut lire sur une autre page. Choisissez l'une des quatre méthodes discutées à côté pour vous permettre d'atteindre votre objectif.
Dans l'exemple, supposons que nous ayons l'intention de créer un lien vers un titre spécifique dans la même page: Méthode A: le nom du trou
<p> <a href = # oranges> à propos des oranges </a> </p>
... un texte ...
<un nom = oranges> </a>
<H2> Les oranges sont savoureuses </h2>
... plus de texte ...
Utilisez une balise d'ancrage avec du contenu vierge et un attribut de nom pour marquer un point de lien spécifique. C'est peut-être la méthode que vous connaissez. Mettez un contenu vierge <a> devant le titre et connectez-le (en utilisant le symbole #, suivi de la valeur de l'attribut de nom), ce qui nous permet de nous connecter à une partie spécifique de la page. Lorsque la page contient une longue liste d'éléments qui doivent être défilés, nous pouvons facilement nous connecter à un projet spécifique via cette méthode.
La figure 7-1 montre le résultat après avoir cliqué sur le lien à propos des oranges, ce qui signifie sauter à l'endroit où nous identifions <a name = oranges> </a>, qui est exactement sur le titre.
Figure 7-1. Exemple de clic pour se connecter à un lien d'ancrage spécifique
L'effet est bon, mais gaspiller une balise vierge pour identifier l'emplacement du lien est un peu incompatible avec la sémantique. La méthode B peut améliorer cela. Méthode B: Tout dans le nom
<p> <a href = # oranges> à propos des oranges </a> </p>
... un texte ...
<h2> <a name = oranges> Les oranges sont savoureuses </a> </h2>
... plus de texte ...
Comme la méthode A, nous utilisons toujours la balise <a> avec l'attribut de nom, mais cette fois, nous l'enveloppez en dehors du titre vers lequel je veux créer un lien. Cela semble plus sémantique. Dans la méthode A, notre objet de connexion est ... eh bien, il n'y a rien, mais dans la méthode B, nous expliquons non seulement que ce texte fait partie de la balise de titre, mais aussi l'une des ancres de connexion de cette page. Faites attention au style mondial de <a>
Si la méthode B est utilisée, il y a un endroit où vous devez prêter attention. Si vous spécifiez les styles CSS globaux pour tous les <a> éléments (couleur, taille du texte, décoration de texte, etc.), ces styles remplaceront les styles que vous spécifiez pour les éléments <h2>. La raison pour laquelle cela se produit est que dans cet exemple, la balise <a> est un élément enfant situé dans la balise <h2> qui l'entoure.
Par exemple, si vous avez une déclaration comme celle-ci dans votre CSS:
un{
Couleur: vert;
Police-poids: Bold;
Décoration du texte: soulignement;
}
La méthode B et ce CSS rendront le titre à devenir vert, audacieux et souligné comme le <a> dans d'autres pages, peut-être différent du style <h2> que vous attendez.
Nous pouvons utiliser le: lien pseudo-classe de <a> pour éviter ce phénomène (et également gagner d'autres avantages), qui sera discuté en détail plus loin dans ce chapitre. Attributs de nom plus riches
L'un des avantages de l'utilisation de la méthode B (et de la méthode A) est que l'attribut de nom peut gérer des noms d'ancrage plus abondants. Plus précisément, c'est la possibilité d'utiliser des symboles dans le nom
Par exemple, si vous utilisez la méthode B, vous pouvez le faire (ici représente le symbole E):
<p> <a href = # Resum & # 233;> Mon curriculum vitae & # 233; </a> </p>
... un texte ...
<h2> <a name = Resum & # 233;> Dan's Resum & # 233; </a> </h2>
... plus de texte ...
Cette fonction est très importante lorsqu'il s'agit de caractères qui n'appartiennent pas aux lettres anglaises.
Mais il existe plusieurs méthodes à mentionner. La méthode suivante ne nécessite pas l'utilisation de <a> pour définir le point d'ancrage. Jetons un coup d'œil à la méthode C.
Méthode C: Jeter le nom
<p> <a href = # oranges> à propos des oranges </a> </p>
... un texte ...
<h2 id = oranges> Les oranges sont savoureuses </h2>
... plus de texte ...
Ah, la fonction de l'attribut ID est comme l'attribut de nom, qui peut également spécifier des points d'ancrage pour la page. De plus, la méthode C élimine également la méthode A et B utilise l'attribut de nom en tant que balise <a> supplémentaire. Nous avons réduit le code source, ce qui a toujours été une bonne chose.
Étant donné que l'attribut ID peut être ajouté à n'importe quelle balise, nous pouvons facilement ajouter des ancres à n'importe quel élément de la page. Dans cet exemple, nous choisissons d'ajouter des ancres au titre, mais nous pouvons également facilement ajouter des ancres à <v>, <form>, <p>, <ul> ... et toutes les autres balises. Un tuer, deux oiseaux avec un oiseau
En fait, dans la plupart des cas, nous pouvons ajouter des styles ou des scripts à l'attribut ID préexistant, qui est un autre avantage de la méthode C. Pour cette raison, nous n'avons pas besoin d'ajouter du code supplémentaire pour simplement définir l'ancre.
Par exemple, supposons que vous avez un formulaire pour laisser des commentaires en bas d'une longue page et que vous souhaitez ajouter un lien en haut de la page. Ce formulaire a défini id = commentaires pour spécifier un style unique. C'est ainsi que nous pouvons connecter directement les IDS en tant qu'ancres sans ajouter une balise <a> avec l'attribut de nom.
Le code ressemble à ceci:
<p> <a href = # commentaires> Ajouter un commentaire! </a> </p>
... beaucoup de texte ...
<form id = commentaires action = / path / to / script>
... des éléments de formulaire ...
</ form>
De plus, si votre page est longue, vous ajoutez un lien à l'ancre supérieure en bas afin que l'utilisateur puisse revenir en haut.
Il convient de mentionner que bien qu'il semble très approprié, il est préférable d'éviter d'utiliser le haut lors de la spécification des noms d'ancrage. Certains navigateurs conservent ce nom à des fins spéciales. L'utilisation de ce nom peut provoquer des résultats incohérents. Il est préférable de choisir un nom similaire mais ne cause pas de problèmes. Peut-être utiliser #GeMesis? Ou #Ut le plus? Vous avez votre propre idée.
Browser antique avec attributs d'identification
Lorsque vous utilisez uniquement l'attribut ID comme ancre, il y a un inconvénient important à mentionner, c'est-à-dire que certains navigateurs anciens ne soutiennent pas cette méthode. Oh, c'est en effet un incontournable considéré lors de l'identification de votre propre ancre, et c'est aussi un exemple malheureux de compatibilité directe. Regardons le dernier exemple, Méthode D. Méthode D: Ensemble
<p> <a href = # oranges> à propos des oranges </a> </p>
... un texte ...
<h2> <a id = oranges name = oranges> Les oranges sont savoureuses </a> </h2>
... plus de texte ...
Si vous souhaitez obtenir une compatibilité vers l'avant et une compatibilité arrière lors du marquage des ancres, vous aimerez probablement cette méthode. Les navigateurs anciens et futurs peuvent identifier correctement les balises d'ancrage nommées, mais parce que W3C ne recommande pas l'attribut de nom (http://www.w3.org/tr/xhtml1/#c_8) dans la recommandation xhtml1.0, vous utilisez également l'attribut d'ID pour prendre en charge les futurs navigateurs.
Identique à la méthode B, nous devons prêter attention au style global qui affecte la balise <a>.
Nom partagé
Si vous choisissez d'utiliser la méthode D, il est acceptable de choisir le même nom pour les attributs d'ID et de nom (peut être très pratique), mais cela n'est possible que s'ils sont sur la même balise. De plus, il n'y a que quelques balises spécifiques qui permettent ceci, qui, pour être précise, inclut <a>, <applet>, <srame>, <img>, <aphy map>. Par conséquent, nous déplacons id = oranges de <h2> à la balise d'ancrage.
Maintenant que nous avons vu quatre méthodes d'établissement de points d'ancrage, résumons les avantages et les inconvénients de chaque méthode.
Page précédente 1 2 3 Page suivante Lire le texte intégral