Maison > interface Web > tutoriel HTML > Introduction aux balises d'ancrage de lien HTML et à leur rôle dans la production de pages SEO_HTML/Xhtml_Web

Introduction aux balises d'ancrage de lien HTML et à leur rôle dans la production de pages SEO_HTML/Xhtml_Web

WBOY
Libérer: 2016-05-16 16:38:58
original
1514 Les gens l'ont consulté

La balise

est principalement utilisée pour définir des liens et des signets. Elle est également appelée lien hypertexte ou lien d'ancrage. Les utilisations les plus courantes sont les suivantes :

.

Créez un attribut href de lien hypertexte et accédez au lien au milieu de href="".

<a href="http://www.jb51.net/">www.jb51.net</a>
Copier après la connexion

Créez un signet, utilisez l'attribut name ou id et ajoutez "#" à la fin du lien hypertexte et le nom de ce signet pour accéder à un certain emplacement sur la page Web

<a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">返回顶部</a>
<a href="#1">打开第一章</a>
<a href="#2">打开第二章</a>
Copier après la connexion

Lorsque vous ouvrez le didacticiel en ligne E-Dimension Technology W3CSchool, la navigation sous le titre apparaîtra. Ceux-ci sont créés via le nom du signet.

Attributs d'événement Javascript, exécutez différentes commandes après avoir cliqué sur

<a href="javascript:void(0)" onclick="this.href='http://www.jb51.net/'">www.jb51.net</a>
Copier après la connexion

Style CSS du lien d'ancrage

Lorsqu'il n'y a pas de lien d'ancrage personnalisétexte du lien d'ancrageStyle CSS, le style de lien d'ancrage par défaut est le suivant :

Style de lien par défaut, veuillez utiliser la souris pour déclencher et voir l'effet

<a href="http://www.jb51.net/">www.jb51.net</a>

a{color:#00F} Les liens d'ancrage non visités sont bleus et soulignés

a:visited{color:#800080} Le lien après avoir cliqué sera violet et souligné

a:hover{color:#F00} Lorsque la souris est enfoncée, elle sera rouge et soulignée

Cependant, parce que ces trois couleurs sont trop fortes, elles ne peuvent souvent pas correspondre à tous les styles de conception Web. Si vous avez besoin de styles de liens d'ancrage dans d'autres couleurs, il vous suffit de modifier la couleur et l'arrière-plan en CSS en fonction des trois styles ci-dessus.

Pourquoi les liens d’ancrage doivent-ils être soulignés ?

En fait, lorsque le HTML a été lancé pour la première fois, les navigateurs n’étaient pas aussi avancés qu’aujourd’hui. En même temps, les écrans d’ordinateur de l’époque n’avaient pas les couleurs des écrans LCD d’aujourd’hui, et beaucoup étaient même en noir et blanc. À cette époque, la manière de distinguer s'il s'agissait d'un lien consistait à souligner. Sur de nombreux écrans en noir et blanc, ou sur des pages Web destinées aux utilisateurs daltoniens, il était préférable de continuer à souligner, sinon les utilisateurs ne pourraient pas distinguer les couleurs. .

Bien sûr, par souci d'esthétique, la conception Web moderne ne met généralement pas de soulignement directement sur les liens. Cependant, afin de prendre en charge les utilisateurs daltoniens et les utilisateurs d'écrans de téléphone mobile en noir et blanc, il est recommandé de définir le style CSS pour qu'il soit souligné lorsque la souris de l'utilisateur le déclenche.

Paramètres de la fenêtre de saut cible du lien d'ancrage

Lorsque vous ouvrez des liens sur cette page, vous constaterez que l'ouverture de certains liens apparaîtra dans d'autres fenêtres, tandis que l'ouverture de certains liens remplacera directement cette page. Cette méthode de saut peut utiliser l'attribut cible du lien d'ancrage pour définir la fenêtre de saut.

_self La fenêtre actuelle est ouverte et les liens d'ancrage passeront par défaut à la fenêtre actuelle du navigateur, c'est-à-dire la cible par défaut="_self"

<a href="http://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>
Copier après la connexion

_blank Une nouvelle fenêtre s'ouvre

<a href="http://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>
Copier après la connexion

La cible sans nom s'ouvre dans une nouvelle fenêtre

<a href="http://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id,就网页中所有target="_weigeti" 链接都在同一个新窗口打开,而_blank每个链接都打开不同新窗口 </a>
Copier après la connexion

nom ou identifiant du cadre

<a href="http://www.jb51.net/" target="weigeti">点击这里,将在下面name="weigeti" 的框架里面显示E维科技首页,不会跳转新窗口或者替换当前窗口</a>
<iframe name="weigeti"></iframe>
Copier après la connexion

_parent La fenêtre parent s'ouvre et charge le fichier lié dans le jeu de cadres parent ou la fenêtre parent contenant le cadre lié. Si le cadre contenant le lien n'est pas imbriqué, le fichier lié est chargé dans la fenêtre plein écran du navigateur, tout comme le paramètre _self.

<iframe>
   <a href="http://www.jb51.net/" target="_parent">这里是框架内部</a>
</iframe>
Copier après la connexion

_top Le niveau supérieur du cadre , par exemple, la page Web B est intégrée dans l'iframe du réseau A et la page Web C est intégrée dans l'iframe de la page Web B

<iframe>
   <iframe><a href="http://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe>
</iframe>
Copier après la connexion

Si le paramètre de lien target=_parent dans la page Web C, sautez pour supprimer la page Web B et intégrez directement la page de lien dans la page Web C dans A

Et si target=_top dans la page Web C, il sortira de toutes les iframes et ira directement à la page de liens en C.

_top ouvre le document lié dans toute la fenêtre actuelle du navigateur, supprimant ainsi tous les cadres

Le rôle des liens d'ancrage dans le SEO

Les liens externes ont toujours été considérés comme l'un des éléments essentiels de l'optimisation des moteurs de recherche. Pour cette raison, diverses formes de liens externes sont apparues, mais tous les liens externes ne sont pas efficaces pour le référencement.

Les liens externes écrits en JS ne sont pas valides pour le référencement

Les moteurs de recherche sont relativement réticents à reconnaître Javascript, c'est donc facile à comprendre.

<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效,甚至在Chrome等浏览器下都无法打开</a>
Copier après la connexion

Le lien rel=nofollow est également invalide pour le référencement

Si vous échangez des liens avec un autre site Web et découvrez grâce au code source que l'autre site Web a ajouté l'attribut rel=nofollow à votre lien, cela signifie que le lien ne sera pas exploré par les moteurs de recherche.

<a href="http://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a>

<meta name="robots" content="nofollow" />
<a href="http://www.jb51.net/">如果网页开头有上面一句话,那么这个网页内部所有链接都不会会搜索引擎抓取,所以对SEO无效</a>
Copier après la connexion

Les liens et les couleurs d'arrière-plan ne sont pas efficaces pour le référencement

La recherche Google a lancé un nouvel algorithme pour sévir contre les liens externes de la même couleur que Pékin, et ces liens externes sont généralement considérés comme des liens noirs.

<style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
  <a href="http://www.jb51.net/" id="vgtlinka">这样的链接对SEO无效</a>
</div>

 <a href="http://www.jb51.net/" style="background:#FFF">这样的链接对SEO也无效</a>
Copier après la connexion
É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