rel attribute of HTML link tag_HTML/Xhtml_web page production

The

tag defines the relationship between the current document and other documents in the web collection. The link element is an empty element and contains only attributes. This element can only exist in the head section, but it can appear any number of times. In HTML, the tag does not have a closing tag. In XHTML, the tag must be closed properly.

In addition to the standard general attributes of HTML, the link element also includes many optional attributes: charset, href, hreflang, media, rel, rev, target, title and type. Among these attributes, target is only allowed to be used in Transitional and Frameset DTDs, and the others can be used in Strict, Transitional and Frameset DTDs.

Among these attributes, the rel attribute is the core. In this article, Script House will introduce some rel attributes that we know, as well as the processing of some link elements in WordPress, which is suitable for novice friends to learn.

1. Call external style sheet

(1). Monitor style sheet

The most common use of the

link tag is to call external style sheets, such as the following:

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

where href is the URL of the target document, type specifies the MIME type of the target URL, and media specifies the device on which the document will be displayed. .

(2). Printing device style sheet

The following style sheet call of webdesignerwall specifies the CSS style when the document is displayed on the printing device:

<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). Replaceable style sheet

You may also see style sheet calling code such as the following in some web pages:

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

This code defines an replaceable style sheet, which is used at the same time as the first link element. The first one defines the preferred style, and this one allows the user to choose the replacement style. However, this replacement operation requires browser support, but many browsers such as IE do not support it.

So web pages that use replacement styles generally use some style sheet switching JS to allow users to freely switch interface styles. Everyone should have seen this. Some websites will define multiple colors for web pages. If WordPress users are interested, they can download Small Potato’s WPDesigner7 to try out this WordPress theme (or check out the DEMO), which uses a simple JS And multiple replaceable styles, allowing users to change the color of the web page. For a slightly more advanced version, you can also use JS to make the style change over time. For example, it will be displayed in bright color during the day and dark color at night.

Note: Specify media="all" for the preferred style, and then add a print style, which will be more consistent with Web standards (although for ordinary websites, few people will want to print your Web page). The Parlan image does not have a defined print style. I will take the time to do it later

Note: Whether to use replaceable styles is a question worth considering. If you only change the color scheme but the overall tone remains the same, that's acceptable. But some friends, such as WordPress users, will enable multiple completely different styles of themes, and then use plug-ins to allow users to freely change. This may seem cool, but my advice is don't do it. Regardless of whether it affects SEO, it will make people lack a fixed image of your website.

2. Define website favorites icon

For detailed information about favicon/favorite icon, you can view Baidu Encyclopedia (1, 2), and use the following code to call it.

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

I am still a little confused about this call. The result of my experiment is:

• IE only supports favicon in ico format;
• The rel attribute must contain shortcut to be displayed in IE;
• I always have problems when making icos in transparent format. There is always a black background. Even if it is not black in IE, it becomes black again in Chrome.
• So, make a transparent ico and a transparent png, the first paragraph can be called by IE browser, and the second paragraph can be called by other browsers;

Note: You can also directly create a favicon.ico file without using this link element and place it in the root directory of the website.

Shunding Share: Add Apple Touch icon to your website

iPhone or iPod Touch devices allow users to add website links to the home screen. Use the following code to assign an Apple Touch icon to your website:

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

The size of the icon is 57*57 in PNG format. If not, it will be automatically scaled. And if I am not mistaken, it does not have to be made into iPhone-style beautiful rounded corners. The iPhone will automatically press it. The style makes the icon rounded and gradient, such as last.fm’s apple touch icon.

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