HTMLリンクタグのrel属性_HTML/Xhtml_Webページ制作-htmlチュートリアル-php.cn

タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの関係を定義します。 link 要素は空の要素であり、属性のみが含まれます。この要素は head セクションにのみ存在できますが、何度でも出現できます。 HTML では、タグには終了タグがありません。 XHTML では、タグを正しく閉じる必要があります。

HTML の標準の一般属性に加えて、link 要素には、charset、href、hreflang、media、rel、rev、target、title、type などの多くのオプション属性も含まれています。これらの属性のうち、target は Transitional および Frameset DTD でのみ使用でき、その他の属性は Strict、Transitional、および Frameset DTD で使用できます。

これらの属性の中で、rel 属性が核となります。この記事では、Script House が私たちが知っているいくつかの rel 属性と、初心者の友達が学ぶのに適した WordPress のリンク要素の処理について紹介します。

1. 外部スタイルシートを呼び出す

(1) モニタースタイルシート

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

ログイン後にコピー

href はターゲットドキュメントの URL、type はターゲット URL の MIME タイプ、media はドキュメントが保存されているデバイスを指定します。と表示されます。

(2). 印刷デバイスのスタイルシート

webdesignerwall の次のスタイルシート呼び出しは、ドキュメントが印刷デバイスに表示されるときの CSS スタイルを指定します:

<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) 置換可能なスタイルシート

。

一部の 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>

ログイン後にコピー

このコードは、最初のリンク要素と同時に使用される置換可能なスタイルシートを定義します。最初のスタイルシートは、ユーザーが置換スタイルを選択できるようにします。ただし、この置換操作にはブラウザのサポートが必要ですが、IE など多くのブラウザはサポートしていません。

そのため、置換スタイルを使用する Web ページは通常、ユーザーがインターフェイススタイルを自由に切り替えられるように、スタイルシート切り替え JS を使用します。誰もがこれを見たことがあるはずです。一部の Web サイトでは Web ページに複数の色が定義されています。 WordPress ユーザーが興味がある場合は、Small Potato の WPDesigner7 をダウンロードして、この WordPress テーマを試してみることができます (またはデモをチェックしてください)。シンプルな JS と複数の置換可能なスタイルにより、ユーザーは Web ページの色を変更できます。もう少し高度なバージョンとして、JS を使用して、日中は明るい色で表示し、夜は暗い色で表示するなど、時間の経過とともにスタイルを変更することもできます。

注: 優先スタイルとして media="all" を指定してから、Web 標準との一貫性を高める印刷スタイルを追加します (ただし、通常の Web サイトの場合、印刷スタイルを希望する人はほとんどいません)。ウェブページ）。 Parlan 画像には定義された印刷スタイルがありません。後で時間をかけて実行します。

注: 置換可能なスタイルを使用するかどうかは、検討する価値のある問題です。配色を変更するだけで全体のトーンが同じであれば、それは許容されます。しかし、WordPress ユーザーなどの友人の中には、複数の全く異なるスタイルのテーマを有効にし、プラグインを使用してユーザーが自由に変更できるようにする人もいます。これはクールに思えるかもしれませんが、私からのアドバイスは、そんなことはしないことです。 SEOに影響するかどうかは別として、Webサイトに対する固定的なイメージを人々に持たせることになります。

2. Web サイトのお気に入りアイコンを定義します

ファビコン/お気に入りアイコン の詳細については、Baidu 百科事典 (1、2) を表示し、次のコードを使用して呼び出すことができます。

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

ログイン後にコピー

この呼び出しについてはまだ少し混乱していますが、実験の結果は次のとおりです。

IE は ico 形式のファビコンのみをサポートします。
rel 属性には、IE に表示されるショートカットが含まれている必要があります。
透明形式でアイコンを作成するときにいつも問題が発生します。IE では黒でなくても、Chrome では再び黒になってしまいます。
それで、透明な ico と透明な png を作成します。最初の段落は IE ブラウザーで呼び出すことができ、2 番目の段落は他のブラウザーで呼び出すことができます。

注: このリンク要素を使用せずに favicon.ico ファイルを直接作成し、Web サイトのルートディレクトリに配置することもできます。

Shunding Share: Apple Touch アイコンを Web サイトに追加します

iPhone または iPod Touch デバイスでは、ユーザーが Web サイトのリンクをホーム画面に追加できます。次のコードを使用して Apple Touch アイコンを 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>

ログイン後にコピー

アイコンのサイズは PNG 形式で 57*57 です。そうでない場合は、iPhone 風の美しい角丸にする必要はありません。このスタイルでは、last.fm の

アップルタッチアイコンのように、アイコンが丸くグラデーションになります。

apple touch icon <link>标签的rel属性全解析

对于国内的用户来说，使用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属性，也欢迎分享出来。