HTML 링크 태그_HTML/Xhtml_웹페이지 제작의 rel 속성

태그 는 현재 문서와 웹 컬렉션의 다른 문서 간의 관계를 정의합니다. 링크 요소는 빈 요소이며 속성만 포함합니다. 이 요소는 head 섹션에만 존재할 수 있지만 여러 번 나타날 수 있습니다. HTML에서는 태그에 닫는 태그가 없습니다. XHTML에서는 태그를 올바르게 닫아야 합니다.

링크 요소에는 HTML의 표준 일반 속성 외에도 charset, href, hreflang, media, rel, rev, target, title 및 type과 같은 다양한 선택 속성도 포함됩니다. 이 속성 중 target은 Transitional 및 Frameset DTD에서만 사용할 수 있으며 나머지는 Strict, Transitional 및 Frameset DTD에서 사용할 수 있습니다.

이러한 속성 중 rel 속성이 핵심입니다. 이번 글에서 Script House는 우리가 알고 있는 몇 가지 rel 속성과 초보 친구들이 배우기에 적합한 WordPress의 일부 링크 요소 처리 방법을 소개합니다.

1. 외부 스타일 시트 호출

(1) 모니터 스타일시트

링크 태그의 가장 일반적인 용도는 다음과 같은 외부 스타일 시트를 호출하는 것입니다.

<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) 교체 가능한 스타일시트

일부 웹페이지에서는 다음과 같은 스타일 시트 호출 코드를 볼 수도 있습니다.

<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 등 많은 브라우저에서는 이를 지원하지 않습니다.

그래서 대체 스타일을 사용하는 웹페이지는 일반적으로 사용자가 인터페이스 스타일을 자유롭게 전환할 수 있도록 일부 스타일 시트 전환 JS를 사용합니다. 누구나 이것을 본 적이 있을 것입니다. 일부 웹사이트에서는 웹페이지에 대해 여러 색상을 정의합니다. WordPress 사용자가 관심이 있다면 Small Potato의 WPDesigner7을 다운로드하여 이 WordPress 테마를 사용해 볼 수 있습니다(또는 데모를 확인). 간단한 JS 및 교체 가능한 여러 스타일을 사용하여 사용자가 웹 페이지의 색상을 변경할 수 있습니다. 약간 더 고급 버전의 경우 JS를 사용하여 시간이 지남에 따라 스타일을 변경할 수도 있습니다. 예를 들어 낮에는 밝은 색상으로 표시되고 밤에는 어두운 색상으로 표시됩니다.

참고: 선호하는 스타일로 media="all"을 지정한 다음 웹 표준에 더 부합하는 인쇄 스타일을 추가하세요(일반 웹사이트의 경우 웹페이지). 팔란 이미지는 정해진 인쇄 스타일이 없습니다. 나중에 시간을 내어 만들어 보겠습니다

참고: 교체 가능한 스타일을 사용할지 여부는 고려해 볼 가치가 있는 질문입니다. 색 구성표만 변경하고 전체적인 톤은 동일하게 유지된다면 괜찮습니다. 그러나 WordPress 사용자와 같은 일부 친구는 완전히 다른 스타일의 여러 가지 테마를 활성화한 다음 플러그인을 사용하여 사용자가 자유롭게 변경할 수 있도록 합니다. 멋있어 보일 수도 있지만, 내 조언은 그렇게 하지 말라는 것입니다. SEO에 영향을 미치는지 여부에 관계없이 사람들에게 웹 사이트의 고정 이미지가 부족하게 됩니다.

2. 웹사이트 즐겨찾기 아이콘 정의

파비콘/즐겨찾기 아이콘에 대한 자세한 내용은 바이두 백과사전(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 브라우저에서 호출할 수 있고 두 번째 문단은 다른 브라우저에서 호출할 수 있습니다.

참고: 이 링크 요소를 사용하지 않고 favicon.ico 파일을 직접 생성하여 웹사이트의 루트 디렉터리에 배치할 수도 있습니다.

Shunding Share: 웹사이트에 Apple Touch 아이콘 추가

iPhone 또는 iPod Touch 기기를 사용하면 홈 화면에 웹사이트 링크를 추가할 수 있습니다. 다음 코드를 사용하여 웹사이트에 Apple Touch 아이콘을 할당할 수 있습니다.

<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의 애플 터치 아이콘처럼 아이콘이 둥글고 그라데이션이 됩니다.

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