Full parsing of rel attributes of tags

<Link> tagDefines the relationship between the current document and other documents in the Web set. The link element is an empty element that contains only attributes. This element can only exist in the head part, but it can appear any number of times. In HTML, the <link> tag has no ending tag. In XHTML, the <link> label must be properly disabled.

In addition to the standard and common attributes of HTML, link elements also include many optional attributes:Charset, href, hreflang, media, rel, rev, target, title, and type. In these attributes, target can only be used in the transitional and frameset DTD, and others can be used in the strict, transitional, and frameset DTD.

Among these attributes, the rel attribute is the core. In this article, Palan describes some of the rel attributes that he knows and the handling of some link elements in WordPress. It is suitable for beginners to learn.

1. Call the external style sheet (1). display style sheet

The most commonly used link labels are used to call external style sheets, such as the following:

<link rel="stylesheet" href="http://parandroid.com/wp-content/themes/v5/style.css" type="text/css" media="screen" />

WhereHrefIs the URL of the target document,TypeSpecifies the MIME type of the target URLMediaSpecifies the device on which the document will be displayed.

(2) print the device style sheet

The following webdesignerwall style sheet defines the CSS style when the document is displayed on the printing device:

<link rel="stylesheet" href="http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" type="text/css" media="print" />

(3). Replaceable Style Sheets

You may also see the following style sheet calling code on some webpages:

<link rel="alertnate stylesheet" href="http://parandroid.com/wp-content/themes/v5/red.css" type="text/css" media="screen" />

This Code defines a replaceable style table, which is used together with the first link element. The first defines the preferred style, which allows you to choose a replacement style. However, this replacement operation requires browser support, but many browsers such as ie do not.

Therefore, when using a Web page that replaces a style, some JS pages for style sheet switching are generally used, so that users can freely switch the interface style. We should have seen this. Some websites will define multiple colors for webpages. If you are interested in WordPress, you can downloadSmall PotatoWpdesigner7 WordPress topic Trial Study (or view the demo), it uses a simple JS and multiple replaceable styles, allowing users to change the color of the web page. In a slightly higher order, you can also use js to make the style change over time. For example, the style is highlighted during the day and the style is dark at night.

Note: Specify media = "all" for the preferred style, and add another print style to conform to the web standards (although for ordinary websites, there will not be a few people who want to print your webpage ).

Note: Whether to use replaceable styles is a matter of consideration. If you only change the color scheme, the overall tone remains unchanged. However, some friends, such as Wordpress users, will enable multiple themes of different styles and use plug-ins to allow users to change freely. This seems cool, but I suggest never do it. Whether or not Seo is affected, but it will make people lack a fixed image of your website.

2. Define the favorites icon of a website

AboutFavicon/favorites iconFor more information, see Baidu Encyclopedia (1, 2) and use the following code to call it.

<link rel="shortcut icon" href="http://parandroid.com/wp-content/themes/v5/images/favicon.ico" type="images/x-icon"/>
<link rel="icon" href="http://parandroid.com/wp-content/themes/v5/images/favicon.png" type="images/png"/>

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

• IE only supports favicon in ICO format;
• The rel attribute must contain a shortcut to be displayed under IE;
• When I make an ICO in a transparent format, there will always be black background. Even if I make ie non-black background, it will become black background in chrome.
• Therefore, create a transparent ICO and a transparent PNG. The first section is called by IE and the second section is called by other browsers;

Note: You can also directly create A favicon. ICO file without using this link element and put it in the website root directory.

Share as needed: add the Apple Touch icon to your website

The iPhone or iPod Touch device allows users to add links to a website to the home screen. Use the following code to specify an Apple Touch icon for your website:

<link rel="apple-touch-icon" href="http://parandroid.com/wp-content/themes/v5/images/apple-touch-icon.png" />

The size of the icon is in PNG format 57*57. If not, it will be scaled automatically. If I am not mistaken, it doesn't have to be converted into the beautiful rounded corner of the iPhone style, the iPhone automatically converts the icon into a rounded corner gradient according to its style, such as last. FM Apple Touch icon.

 

For domestic users, there are not many iPhone users. Even if there are many users, will your website be placed on the main screen? I'm afraid it's not what we can do for small websites. I made a link for my website and added the link element.

3. Link element (1) In Wordpress. RSS address and pingback address

The following is the definition of the RSS2 address, Atom address, and Pingback address in the default WordPress topic. I think it is very esoteric and complicated, so I will not study it. Your blog needs it anyway. Does Atom seem to be okay?

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

(2). Link elements used for remote Publishing

If your subject contains <? Php wp_head ();?> The following two link elements will appear in this function:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />

These two elements are mainly used for remote Publishing. For example, you can use Windows Live Write and other desktop blog editors to publish articles. If you do not need this function, you can delete the two elements by opening the functions. php of your WordPress topic at the bottom. <? Php }?> Or?> Insert the following code before the tag:

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

Note: You may be thinking, since it is <? Php wp_head ();?> The function generates these two items, so you can delete them. Yes. If you don't expect any other plug-ins to need this function, delete it.

4. prevent duplicate content canonical attributes

Google, Yahoo, and live search announced support for a new Link attribute around February this year.CanonicalThe main function is to specify the authority chain for the webpage to solve the problem of duplicate content.

For details about this attribute, refer to the URL paradigm specified by the Google Chinese website administrator.