Heim >Web-Frontend >HTML-Tutorial >Einführung in HTML-Link-Anker-Tags und ihre Rolle bei der Erstellung von SEO_HTML/Xhtml_Webseiten
Das
3499910bf9dac5ae3c52d5ede7383485-Tag wird hauptsächlich zum Definieren von Links und Lesezeichen verwendet. Es wird auch als Hyperlink oder Ankerlink bezeichnet. Die häufigsten Verwendungszwecke sind:
Erstellen Sie ein Hyperlink-href-Attribut und springen Sie zum Link in der Mitte von href="".
<a href="http://www.jb51.net/">www.jb51.net</a>
Erstellen Sie ein Lesezeichen, verwenden Sie das Namens- oder ID-Attribut und fügen Sie „#“ am Ende des Hyperlinks und den Namen dieses Lesezeichens hinzu, um zu einer bestimmten Stelle auf der Webseite zu springen
<a name="top"></a> <a name="1"></a> <a name="2"></a> <a href="#top">返回顶部</a> <a href="#1">打开第一章</a> <a href="#2">打开第二章</a>
Wenn Sie das Online-Tutorial von E-Dimension Technology W3CSchool öffnen, wird die Navigation unter dem Titel angezeigt. Diese werden über den Lesezeichennamen erstellt.
Javascript-Ereignisattribute, verschiedene Befehle ausführen, nachdem Sie auf
geklickt haben<a href="javascript:void(0)" onclick="this.href='http://www.jb51.net/'">www.jb51.net</a>
Wenn kein benutzerdefinierter Ankerlink7441550ff19d67aece0736607957bb92Ankerlinktext5db79b134e9f6b82c0b36e0489ee08edCSS-Stil vorhanden ist, lautet der Standardankerlinkstil wie folgt:
Standard-Linkstil, bitte verwenden Sie die Maus zum Auslösen, um den Effekt zu sehen
080b747a20f9163200dd0a7d304ba388
a{color:#00F}
a:visited{color:#800080}
a:hover{color:#F00}
531ac245ce3e4fe3d50054a55f265927
7441550ff19d67aece0736607957bb92www.jb51.net5db79b134e9f6b82c0b36e0489ee08ed
a{color:#00F} Nicht besuchte Ankerlinks sind blau und unterstrichen
a:visited{color:#800080} Der Link wird nach dem Klicken lila und unterstrichen sein
a:hover{color:#F00} Wenn die Maus gedrückt wird, wird es rot und unterstrichen
Da diese drei Farben jedoch zu stark sind, passen sie oft nicht zu allen Webdesign-Stilen. Wenn Sie Ankerlink-Stile in anderen Farben benötigen, müssen Sie nur die Farbe und den Hintergrund in CSS entsprechend den oben genannten drei Stilen ändern.
Tatsächlich waren die Browser noch nicht so fortschrittlich wie heute, als HTML zum ersten Mal eingeführt wurde. Gleichzeitig verfügten Computerbildschirme damals nicht über die Farben heutiger LCDs und viele waren sogar schwarzweiß. Zu dieser Zeit konnte durch Unterstreichen unterschieden werden, ob es sich um einen Link handelte. Auf vielen Schwarz-Weiß-Anzeigen oder auf Webseiten für farbenblinde Benutzer war es am besten, die Unterstreichung beizubehalten, da Benutzer sonst nicht in der Lage wären, Farben zu unterscheiden .
Natürlich setzt modernes Webdesign aus ästhetischen Gründen im Allgemeinen keine Unterstreichungen direkt auf Links. Um jedoch auf farbenblinde Benutzer und Benutzer mit Schwarzweiß-Displays auf Mobiltelefonen Rücksicht zu nehmen, wird empfohlen, den CSS-Stil so einzustellen, dass er unterstrichen wird, wenn die Benutzermaus ihn auslöst.
Wenn Sie Links auf dieser Seite öffnen, werden Sie feststellen, dass das Öffnen einiger Links zu anderen Fenstern führt, während das Öffnen einiger Links diese Seite direkt ersetzt. Diese Sprungmethode kann das Zielattribut des Ankerlinks verwenden, um das Sprungfenster festzulegen.
_self Das aktuelle Fenster ist geöffnet und Ankerlinks springen standardmäßig zum aktuellen Browserfenster, d. h. zum Standardziel="_self"
<a href="http://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>
_blank Neues Fenster öffnet sich
<a href="http://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>
Unbenanntes Ziel wird in einem neuen Fenster geöffnet
<a href="http://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id,就网页中所有target="_weigeti" 链接都在同一个新窗口打开,而_blank每个链接都打开不同新窗口 </a>
Rahmenname oder -ID
<a href="http://www.jb51.net/" target="weigeti">点击这里,将在下面name="weigeti" 的框架里面显示E维科技首页,不会跳转新窗口或者替换当前窗口</a> <iframe name="weigeti"></iframe>
_parent Das übergeordnete Fenster öffnet und lädt die verknüpfte Datei in das übergeordnete Frameset oder übergeordnete Fenster, das den verknüpften Frame enthält. Wenn der Frame mit dem Link nicht verschachtelt ist, wird die verknüpfte Datei genau wie der Parameter _self im Vollbildfenster des Browsers geladen.
<iframe> <a href="http://www.jb51.net/" target="_parent">这里是框架内部</a> </iframe>
_top Die oberste Ebene des Frames , zum Beispiel ist Webseite B in Iframe in Netzwerk A eingebettet und Webseite C ist in Iframe in Webseite B eingebettet
<iframe> <iframe><a href="http://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe> </iframe>
Wenn die Link-Einstellung target=_parent in Webseite C ist, dann springen Sie, um Webseite B zu entfernen und die Link-Seite direkt in Webseite C in A einzubetten;
Und wenn target=_top in Webseite C, springt es aus allen Iframes heraus und geht direkt zur Linkseite in C._top öffnet das verlinkte Dokument im gesamten aktuellen Browserfenster und entfernt somit alle Frames
Die Rolle von Ankerlinks bei SEO
In JS geschriebene externe Links sind für SEO ungültig
<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a> <a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效,甚至在Chrome等浏览器下都无法打开</a>Link rel=nofollow ist auch für SEO ungültig
<a href="http://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a> <meta name="robots" content="nofollow" /> <a href="http://www.jb51.net/">如果网页开头有上面一句话,那么这个网页内部所有链接都不会会搜索引擎抓取,所以对SEO无效</a>Links und Hintergrundfarben sind für SEO nicht effektiv