attribut rel du lien HTML tag_HTML/Xhtml_web production de page

La balise

définit la relation entre le document actuel et les autres documents de la collection Web. L'élément link est un élément vide et contient uniquement des attributs. Cet élément ne peut exister que dans la section head, mais il peut apparaître plusieurs fois. En HTML, la balise n'a pas de balise de fermeture. En XHTML, la balise doit être correctement fermée.

En plus des attributs généraux standards du HTML, l'élément link comprend également de nombreux attributs facultatifs : charset, href, hreflang, media, rel, rev, target, title et type. Parmi ces attributs, target ne peut être utilisé que dans les DTD Transitional et Frameset, et les autres peuvent être utilisés dans les DTD Strict, Transitional et Frameset.

Parmi ces attributs, l'attribut rel est le noyau. Dans cet article, Script House présentera certains attributs rel que nous connaissons, ainsi que le traitement de certains éléments de lien dans WordPress, qui conviennent aux amis novices.

1. Appeler une feuille de style externe

(1). Feuille de style du moniteur

L'utilisation la plus courante de la balise

link consiste à appeler des feuilles de style externes, telles que les suivantes :

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

où href est l'URL du document cible, type spécifie le type MIME de l'URL cible et media spécifie l'appareil sur lequel le document sera affiché.

(2). Feuille de style du périphérique d'impression

L'appel de feuille de style suivant de webdesignerwall spécifie le style CSS lorsque le document est affiché sur le périphérique d'impression :

<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). Feuille de style remplaçable

Vous pouvez également voir du code d'appel de feuille de style tel que le suivant dans certaines pages Web :

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

Ce code définit une feuille de style remplaçable, qui est utilisée en même temps que le premier élément du lien. La première définit le style préféré, et celle-ci permet à l'utilisateur de choisir le style de remplacement. Cependant, cette opération de remplacement nécessite la prise en charge du navigateur, mais de nombreux navigateurs tels que IE ne la prennent pas en charge.

Ainsi, les pages Web qui utilisent des styles de remplacement utilisent généralement un JS de changement de feuille de style pour permettre aux utilisateurs de changer librement de style d'interface. Tout le monde aurait dû voir cela. Certains sites Web définissent plusieurs couleurs pour les pages Web. Si les utilisateurs de WordPress sont intéressés, ils peuvent télécharger le thème WordPress WPDesigner7 depuis Small Potato et l'essayer (ou Voir la DÉMO), qui utilise un simple JS et plusieurs styles remplaçables, permettant aux utilisateurs de modifier la palette de couleurs des pages Web. Pour une version légèrement plus avancée, vous pouvez également utiliser JS pour faire changer le style au fil du temps. Par exemple, il sera affiché en couleur vive le jour et en couleur sombre la nuit.

Remarque : Spécifiez media="all" pour le style préféré, puis ajoutez un style d'impression, qui sera plus cohérent avec les standards du Web (même si pour les sites Web ordinaires, peu de personnes voudront imprimer votre Page web). Il n'y a pas de style d'impression défini pour l'image Paran je prendrai le temps de le faire plus tard

.

Remarque : L'utilisation ou non de styles remplaçables est une question qui mérite d'être réfléchie. Si vous modifiez uniquement la palette de couleurs mais que le ton général reste le même, c'est acceptable. Mais certains amis, tels que les utilisateurs de WordPress, activeront plusieurs styles de thèmes complètement différents, puis utiliseront des plug-ins pour permettre aux utilisateurs de les modifier librement. Cela peut sembler cool, mais mon conseil est de ne pas le faire. Que cela affecte ou non le référencement, cela fera en sorte que les gens n’auront pas une image fixe de votre site Web.

2. Définir l'icône des favoris du site Web

Pour des informations détaillées sur favicon/icône préférée, vous pouvez consulter l'encyclopédie Baidu (1, 2) et utiliser le code suivant pour l'appeler.

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

Je suis encore un peu confus à propos de cet appel. Le résultat de mon expérience est :

• IE ne prend en charge que les favicon au format ico
• L'attribut rel doit contenir un raccourci pour être affiché dans IE
;
• J'ai toujours des problèmes lors de la création d'icos au format transparent. Il y a toujours un fond noir Même s'il n'est pas noir dans IE, il redevient noir dans Chrome.
• Alors, créez une ico transparente et un png transparent, le premier paragraphe peut être appelé par le navigateur IE, et le deuxième paragraphe peut être appelé par d'autres navigateurs

Remarque : Vous pouvez également créer directement un fichier favicon.ico sans utiliser cet élément de lien et le placer dans le répertoire racine du site Web.

Shunding Share : ajoutez l'icône Apple Touch à votre site Web

Les appareils iPhone ou iPod Touch permettent aux utilisateurs d'ajouter des liens vers des sites Web à l'écran d'accueil. Utilisez le code suivant pour attribuer une icône Apple Touch à votre site Web :

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

La taille de l'icône est de 57*57 au format PNG. Sinon, elle sera automatiquement mise à l'échelle. Et si je ne me trompe pas, il n'est pas nécessaire de la transformer en beaux coins arrondis à la manière de l'iPhone. appuyez automatiquement dessus. Le style rend l'icône arrondie et dégradée, comme l'icône tactile pomme de 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属性，也欢迎分享出来。