rel-Attribut der HTML-Link-Tag_HTML/Xhtml_Webseitenproduktion

Das

-Tag definiert die Beziehung zwischen dem aktuellen Dokument und anderen Dokumenten in der Websammlung. Das Linkelement ist ein leeres Element und enthält nur Attribute. Dieses Element kann nur im Kopfbereich vorkommen, aber beliebig oft vorkommen. In HTML hat das -Tag kein schließendes Tag. In XHTML muss das -Tag ordnungsgemäß geschlossen werden.

Zusätzlich zu den standardmäßigen allgemeinen Attributen von HTML enthält das Link-Element auch viele optionale Attribute: charset, href, hreflang, media, rel, rev, target, title und type. Von diesen Attributen darf target nur in Übergangs- und Frameset-DTDs verwendet werden, während die anderen in Strict-, Übergangs- und Frameset-DTDs verwendet werden können.

Unter diesen Attributen ist das rel-Attribut der Kern. In diesem Artikel stellt Script House einige uns bekannte rel-Attribute sowie die Verarbeitung einiger Link-Elemente in WordPress vor, die für Anfänger zum Lernen geeignet sind.

1. Externes Stylesheet aufrufen

(1). Monitor-Stylesheet

Die häufigste Verwendung des

Link-Tags besteht darin, externe Stylesheets aufzurufen, wie zum Beispiel das Folgende:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"stylesheet"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/style.css" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"text/css" </span><span class="attribute-name">media</span></font>=<font face="Arial"><span class="attribute-value">"screen" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

wobei href die URL des Zieldokuments ist, type den MIME-Typ der Ziel-URL angibt und media das Gerät angibt, auf dem sich das Dokument befindet wird angezeigt.

(2). Druckgeräte-Stylesheet

Der folgende Stylesheet-Aufruf von webdesignerwall legt den CSS-Stil fest, wenn das Dokument auf dem Druckgerät angezeigt wird:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"stylesheet"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"text/css" </span><span style="COLOR: #ff9900"><span class="attribute-name">media</span>=</span><span class="attribute-value"><span style="COLOR: #ff9900">"print"</span> </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

(3). Austauschbares Stylesheet

Auf einigen Webseiten wird möglicherweise auch Stylesheet-Aufrufcode wie der folgende angezeigt:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"alertnate stylesheet"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/red.css" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"text/css" </span><span class="attribute-name">media</span></font>=<font face="Arial"><span class="attribute-value">"screen" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

Dieser Code definiert ein ersetzbares Stylesheet, das gleichzeitig mit dem ersten Linkelement verwendet wird. Das erste definiert den bevorzugten Stil und dieser ermöglicht dem Benutzer die Auswahl des Ersatzstils. Dieser Ersetzungsvorgang erfordert jedoch Browserunterstützung, viele Browser wie der IE unterstützen ihn jedoch nicht.

Daher verwenden Webseiten, die Ersetzungsstile verwenden, im Allgemeinen einige Stylesheet-Wechsel-JS, damit Benutzer den Schnittstellenstil frei wechseln können. Das sollte jeder gesehen haben. Einige Websites definieren mehrere Farben für Webseiten. Wenn WordPress-Benutzer interessiert sind, können sie das WPDesigner7 WordPress-Theme von Small Potato herunterladen und es ausprobieren (oder DEMO ansehen), das ein einfaches verwendet JS und mehrere austauschbare Stile, die es Benutzern ermöglichen, das Farbschema von Webseiten zu ändern. Für eine etwas fortgeschrittenere Version können Sie auch JS verwenden, um den Stil im Laufe der Zeit zu ändern. Beispielsweise wird er tagsüber in heller Farbe und nachts in dunkler Farbe angezeigt.

Hinweis: Geben Sie media="all" für den bevorzugten Stil an und fügen Sie dann einen Druckstil hinzu, der den Webstandards besser entspricht (obwohl bei normalen Websites nur wenige Leute Ihren Stil drucken möchten). Webseite). Für das Paran-Bild ist kein Druckstil definiert. Ich werde mir später die Zeit nehmen, dies zu tun

Hinweis: Es lohnt sich, darüber nachzudenken, ob ersetzbare Stile verwendet werden sollen. Wenn Sie nur das Farbschema ändern, der Gesamtton jedoch gleich bleibt, ist das akzeptabel. Aber einige Freunde, wie zum Beispiel WordPress-Benutzer, werden mehrere völlig unterschiedliche Theme-Stile aktivieren und dann Plug-Ins verwenden, um den Benutzern die freie Änderung zu ermöglichen. Das mag cool erscheinen, aber mein Rat ist, es nicht zu tun. Unabhängig davon, ob es sich auf die Suchmaschinenoptimierung auswirkt, führt es dazu, dass den Menschen ein festes Bild Ihrer Website fehlt.

2. Symbol für Website-Favoriten definieren

Detaillierte Informationen zum Favicon/Lieblingssymbol finden Sie in der Baidu-Enzyklopädie (1, 2) und zum Aufrufen mit dem folgenden Code.

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"shortcut icon"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/images/favicon.ico" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"images/x-icon"</span><span class="error"><span class="attribute-name">/</span></span></font>>
<span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"icon"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/images/favicon.png" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"images/png"</span><span class="error"><span class="attribute-name">/</span></span></font>></code>

Ich bin immer noch etwas verwirrt über diesen Anruf. Das Ergebnis meines Experiments ist:

• IE unterstützt nur Favicon im ICO-Format
Das rel-Attribut muss eine Verknüpfung enthalten, damit es im IE angezeigt wird;
• Ich habe immer Probleme, wenn ich ICOs im transparenten Format erstelle. Es gibt immer einen schwarzen Hintergrund. Auch wenn er im IE nicht schwarz ist, wird er in Chrome wieder schwarz.
• Erstellen Sie also ein transparentes ICO und ein transparentes PNG. Der erste Absatz kann vom IE-Browser aufgerufen werden und der zweite Absatz kann von anderen Browsern aufgerufen werden
• Hinweis

: Sie können auch direkt eine favicon.ico-Datei erstellen, ohne dieses Linkelement zu verwenden, und sie im Stammverzeichnis der Website platzieren.

Shunding Share: Fügen Sie Ihrer Website das Apple Touch-Symbol hinzu

Mit iPhone- oder iPod Touch-Geräten können Benutzer Website-Links zum Startbildschirm hinzufügen. Verwenden Sie den folgenden Code, um Ihrer Website ein Apple Touch-Symbol zuzuweisen:

Die Größe des Symbols beträgt 57*57 im PNG-Format. Wenn ich mich nicht irre, muss es nicht in schöne abgerundete Ecken umgewandelt werden Drücken Sie automatisch darauf. Durch den Stil wird das Symbol abgerundet und mit einem Farbverlauf versehen, z. B. das

Apple Touch-Symbol

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"apple-touch-icon"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

von last.fm.

对于国内的用户来说，使用iPhone的人还不多，即使很多，会把你网站放到主屏？那恐怕不是我们这些一般的小网站能够做到的。不过好玩嘛，我还是为我的网站制作了一个并添加了这个link元素。

3. WordPress中的link元素

(1). RSS地址和Pingback地址

下面是WordPress默认主题对RSS2地址，Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂，就不研究了。反正你的博客需要它，Atom好像不要也可以？

<code><link style="COLOR: #ff9900">
<font face="Arial">rel="alternate" type="application/rss+xml"</font> title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link style="COLOR: #ff9900">
<font face="Arial">rel="alternate" type="application/atom+xml"</font> title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link>
<font face="Arial">rel="pingback"</font> href="<?php bloginfo('pingback_url'); ?>" /></code>

(2). 用于远程发布的link元素

如果你的主题中有这个函数，下面这两个link元素就会出现:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"EditURI"</span> </span><span class="attribute-name">type</span>=<font face="Arial"><span class="attribute-value">"application/rsd+xml" </span><span class="attribute-name">title</span></font>=<font face="Arial"><span class="attribute-value">"RSD" </span><span class="attribute-name">href</span></font>=<font face="Arial"><span class="attribute-value">"http://localhost/wordpress/xmlrpc.php?rsd" </span><span class="error"><span class="attribute-name">/</span></span></font>>
<span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"wlwmanifest"</span> </span><span class="attribute-name">type</span>=<font face="Arial"><span class="attribute-value">"application/wlwmanifest+xml" </span><span class="attribute-name">href</span></font>=<font face="Arial"><span class="attribute-value">"http://localhost/wordpress/wp-includes/wlwmanifest.xml" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

这两个元素主要供远程发布使用，比如你使用Windows Live Write等桌面博客编辑器来发布文章。如果你并不需要这个功能，那完全可以把这两个元素删除，删除的方法是，打开你WordPress主题的functions.php, 在最底部的 或者 ?> 标签之前，插入下面的代码:

<code>remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');</code>

注释: 你可能在想，既然是函数生成了这两个东西，把它删除不就可以了。是的，如果你预计你其它任何插件都不会需要到这个函数，那就删吧。

4. 防止重复内容的canonical属性

谷歌、雅虎和live search在今年2月左右宣布支持Link的一个新属性Canonical，主要作用是为网页指定权威链，以解决重复内容问题。

关于这个属性的详细介绍请看谷歌中文网站管理员中的指定您的URL范式。

这里主要为WordPress用户推荐两个插件来实现添加此属性到你的head部份: SEO No Duplicate或Canonical URL’s。用哪个随便吧。

说了是全解析，其实仅仅是说一些常用的，对大多数人来说都已经足够了，如果你还知道其它比较重要和常用的rel属性，也欢迎分享出来。