atribut rel bagi teg pautan HTML_HTML/Xhtml_pengeluaran halaman web

Teg

mentakrifkan hubungan antara dokumen semasa dan dokumen lain dalam koleksi web. Elemen pautan ialah elemen kosong dan mengandungi atribut sahaja. Elemen ini hanya boleh wujud di bahagian kepala, tetapi ia boleh muncul beberapa kali. Dalam HTML, teg tidak mempunyai teg penutup. Dalam XHTML, teg

Selain atribut umum standard HTML, elemen pautan juga termasuk banyak atribut pilihan: charset, href, hreflang, media, rel, rev, target, title dan type. Di antara atribut ini, sasaran hanya dibenarkan untuk digunakan dalam DTD Peralihan dan Frameset, dan yang lain boleh digunakan dalam DTD Ketat, Peralihan dan Frameset.

Antara atribut ini, atribut rel ialah teras. Dalam artikel ini, Script House akan memperkenalkan beberapa atribut rel yang kami ketahui, serta pemprosesan beberapa elemen pautan dalam WordPress, yang sesuai untuk dipelajari oleh rakan-rakan baru.

1. Panggil helaian gaya luaran

(1). Penggunaan

teg pautan yang paling biasa adalah untuk memanggil helaian gaya luaran, seperti yang berikut:

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

di mana

href ialah URL dokumen sasaran, jenis menentukan jenis MIME URL sasaran dan media menentukan peranti di mana dokumen itu akan dipaparkan.

(2) Helaian gaya peranti pencetak

Panggilan helaian gaya berikut

dinding pereka web menentukan gaya CSS apabila dokumen dipaparkan pada peranti percetakan:

<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). Helaian gaya boleh diganti

Anda juga boleh melihat kod panggilan helaian gaya seperti berikut dalam beberapa halaman 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>

Kod ini mentakrifkan helaian gaya yang boleh diganti, yang digunakan pada masa yang sama dengan elemen pautan pertama yang mentakrifkan gaya pilihan, dan yang ini membolehkan pengguna memilih gaya gantian. Walau bagaimanapun, operasi penggantian ini memerlukan sokongan pelayar, tetapi banyak pelayar seperti IE tidak menyokongnya.

Jadi halaman web yang menggunakan gaya gantian biasanya menggunakan beberapa helaian gaya menukar JS untuk membolehkan pengguna menukar gaya antara muka secara bebas. Semua orang sepatutnya melihat ini. Sesetengah tapak web akan menentukan berbilang warna untuk halaman web. Jika pengguna WordPress berminat, mereka boleh memuat turun

WPDesignertema 7 WordPress daripada Small Potato dan mencubanya (atau Lihat DEMO), yang menggunakan kaedah mudah JS dan berbilang gaya boleh diganti, membolehkan pengguna menukar skema warna halaman web. Untuk versi yang lebih maju sedikit, anda juga boleh menggunakan JS untuk membuat perubahan gaya mengikut masa Contohnya, ia akan dipaparkan dalam warna terang pada waktu siang dan warna gelap pada waktu malam.

Nota: Tentukan media="semua" untuk gaya pilihan, dan kemudian tambahkan gaya cetakan, yang akan lebih konsisten dengan piawaian Web (walaupun untuk tapak web biasa, beberapa orang akan mahu mencetak anda laman web). Tiada gaya cetakan ditakrifkan untuk imej Paran Saya akan meluangkan masa untuk melakukannya kemudian

Nota: Sama ada hendak menggunakan gaya boleh ganti ialah soalan yang patut dipertimbangkan. Jika anda hanya menukar skema warna tetapi ton keseluruhan tetap sama, itu boleh diterima. Tetapi sesetengah rakan, seperti pengguna WordPress, akan mendayakan pelbagai gaya tema yang sama sekali berbeza, dan kemudian menggunakan pemalam untuk membolehkan pengguna menukar secara bebas. Ini mungkin kelihatan hebat, tetapi nasihat saya ialah jangan lakukannya. Tidak kira sama ada ia menjejaskan SEO, ia akan menjadikan orang ramai kekurangan imej tetap tapak web anda.

2. Tentukan ikon kegemaran tapak web

Untuk mendapatkan maklumat terperinci tentang

ikon kegemaran/kegemaran, anda boleh melihat Ensiklopedia Baidu (1, 2), dan gunakan kod berikut untuk memanggilnya.

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

Saya masih keliru sedikit tentang panggilan ini. Hasil percubaan saya ialah:

IE hanya menyokong favicon dalam format ico;
• Atribut rel mesti mengandungi pintasan untuk dipaparkan dalam IE;
Saya sentiasa menghadapi masalah semasa membuat icos dalam format lutsinar Selalu ada latar belakang hitam Walaupun ia tidak hitam dalam IE, ia menjadi hitam semula dalam Chrome.
Jadi, buat ico lutsinar dan png lutsinar, perenggan pertama boleh dipanggil oleh pelayar IE, dan perenggan kedua boleh dipanggil oleh pelayar lain
• Nota

: Anda juga boleh terus mencipta fail favicon.ico tanpa menggunakan elemen pautan ini dan meletakkannya dalam direktori akar tapak web.

Shunding Share: Tambahkan ikon Apple Touch pada tapak web anda

Peranti iPhone atau iPod Touch membenarkan pengguna menambah pautan tapak web ke skrin utama Gunakan kod berikut untuk menetapkan ikon Apple Touch ke tapak web anda:

Saiz ikon ialah 57*57 dalam format PNG Jika tidak, ia akan diskalakan secara automatik Dan jika tidak silap, ia tidak perlu dijadikan sudut bulat yang cantik menekannya secara automatik. Gaya menjadikan ikon bulat dan kecerunan, seperti

ikon sentuhan epal

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

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属性，也欢迎分享出来。