仓酷云

标题: 来讲讲：HTML教程:link标志的rel属性 [打印本页]

作者: 小魔女 时间: 2015-1-15 23:19
标题: 来讲讲：HTML教程:link标志的rel属性
WHATWG版和W3C版的HTML5规范虽然根源相同，在一些领域却已经产生分歧。网页制造poluoluo文章简介：除HTML的尺度通用属性以外，link元素还包含良多可选属性:charset,href,hreflang,media,rel,rev,target,title和type。这些属性中，target只同意在Transitional和Frameset两种DTD中利用，别的都可在Strict,Transitional和Frameset三种DTD中利用。
<link>标签界说了以后文档与Web汇合中其他文档的干系。link元素是一个空元素，它仅包括属性。此元素只能存在于head部分，不外它可呈现任何次数。在HTML中，<link>标签没有停止标签。在XHTML中，<link>标签必需被准确的封闭。
除HTML的尺度通用属性以外，link元素还包含良多可选属性:charset,href,hreflang,media,rel,rev,target,title和type。这些属性中，target只同意在Transitional和Frameset两种DTD中利用，别的都可在Strict,Transitional和Frameset三种DTD中利用。
这些属性中，rel属性是中心。本文内里，破洛洛就先容一些本人晓得的rel属性，和在WordPress中对一些link元素的处置，合适老手伴侣进修。
1.挪用内部款式表

(1).显现器款式表

link标签最多的利用就是用来挪用内部款式表，比方上面如许:

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

复制代码

个中href是方针文档的URL，type则划定了方针URL的MIME范例，而media划定了文档将显现在甚么设备上。
(2).打印设备款式表

上面这个webdesignerwall的款式表挪用就划定了文档显现在打印设备上时的CSS款式:

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

复制代码

(3).可交换款式表

你大概还会在一些网页中看到诸以下面的款式表挪用代码:

<linkrel="alertnatestylesheet"href="http://paranimage.com/wp-content/themes/v5/red.css"type="text/css"media="screen"/>

复制代码

这段代码界说了一个可交换的款式表，它和第一个link元素同时利用，第一个界说了首选款式，而这个则让用户可选择交换的款式。但这个交换操纵必要扫瞄器撑持，但良多扫瞄器好比IE都是不撑持的。
以是利用到交换款式的网页，一样平常都用一些款式表切换的JS，让用户能够自在切换界面款式。这个应当人人都见过，一些网站会给网页界说多种配色。WordPress用户有乐趣的话，能够下载SmallPotato的WPDesigner7这款WordPress主题试用研讨一下(或检察DEMO)，它使用一个复杂的JS和多个可交换款式，让用户可对网页改动配色。稍高阶的一些，还能够使用JS弄成随工夫变更款式的，好比日间的时分显现成明色，早晨的时分显现成暗色。
正文:为首选款式指定media=”all”，再增加一个打印款式，会对照切合Web尺度(只管关于一般网站来讲，不会有几团体想要打印你的网页)。帕兰映像就没有界说打印款式，稍后抽工夫弄弄

正文:是不是利用可交换款式是个值得推敲的成绩。假如仅改动配色，全体主调仍是稳定，那能够承受。但有一些伴侣，好比WordPress用户，会启用多个完整分歧作风的主题，再使用插件让用户自在变更。这看上往仿佛挺酷的，但我的倡议是万万别这么做。是不是影响SEO且不谈，但会让人对你的网站缺少一种流动抽象的认知感。
2.界说网站保藏夹图标

关于favicon/保藏夹图标的具体先容能够检察百度百科(1,2)，利用上面的代码挪用便可。

<linkrel="shortcuticon"href="http://paranimage.com/wp-content/themes/v5/images/favicon.ico"type="images/x-icon"/><linkrel="icon"href="http://paranimage.com/wp-content/themes/v5/images/favicon.png"type="images/png"/>

复制代码

关于这个挪用我本人也另有些含混，我实行的了局是:

IE只撑持ico格局的favicon;
rel属性必需包括shortcut,才会在IE下显现;
我在制造通明格局的ico时总出成绩，总会呈现黑底，就算弄了IE下非黑底了，在Chrome下又酿成黑底。
因而，制造一个通明的ico和一个通明的png,第一段供IE扫瞄器挪用，第二段供别的扫瞄器挪用;

正文:你也能够不利用这个link元素，而间接制造一个favicon.ico文件，并放到网站根目次。
顺定分享:为你的网站增加AppleTouch图标

iPhone或iPodTouch设备同意用户增加网站的链接到主屏上，利用上面的代码能够为你的网站指定一个AppleTouch图标:

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

复制代码

该图标的尺寸是57*57的PNG格局，假如不是，会主动缩放，且假如我没弄错的话，纷歧定要弄成iPhone作风那种大度的圆角，iPhone会主动按它的作风把图标弄成圆角突变的，好比last.fm的appletouchicon。

关于国际的用户来讲，利用iPhone的人还未几，即便良多，会把你网站放到主屏？那生怕不是我们这些一样平常的小网站可以做到的。不外好玩嘛，我仍是为我的网站制造了一个并增加了这个link元素。
3.WordPress中的link元素

(1).RSS地点和Pingback地点

上面是WordPress默许主题对RSS2地点，Atom地点和Pingback地点的界说。详细道理俺以为很深邃很庞大，就不研讨了。归正你的博客必要它，Atom仿佛不要也能够？

<linkrel="alternate"type="application/rss+xml"title="<?phpbloginfo(name);?>RSSFeed"href="<?phpbloginfo(rss2_url);?>"/><linkrel="alternate"type="application/atom+xml"title="<?phpbloginfo(name);?>AtomFeed"href="<?phpbloginfo(atom_url);?>"/><linkrel="pingback"href="<?phpbloginfo(pingback_url);?>"/>

复制代码

(2).用于远程公布的link元素

假如你的主题中有<?phpwp_head();?>这个函数，上面这两个link元素就会呈现:

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

复制代码

这两个元素次要供远程公布利用，好比你利用WindowsLiveWrite等桌面博客编纂器来公布文章。假如你其实不必要这个功效，那完整能够把这两个元素删除，删除的办法是，翻开你WordPress主题的functions.php,在最底部的<?php}?>大概?>标签之前，拔出上面的代码:

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

复制代码

正文:你大概在想，既然是<?phpwp_head();?>函数天生了这两个器材，把它删除不就能够了。是的，假如你估计你别的任何插件都不会必要到这个函数，那就删吧。
4.避免反复内容的canonical属性

谷歌、雅虎和livesearch在往年2月摆布公布撑持Link的一个新属性Canonical，次要感化是为网页指定威望链，以办理反复内容成绩。
关于这个属性的具体先容请看谷歌中文网站办理员中的指定您的URL范式。
这里次要为WordPress用户保举两个插件来完成增加此属性到你的head部分:SEONoDuplicate或CanonicalURL’s。用哪一个任意吧。
说了是全剖析，实在仅仅是说一些经常使用的，对年夜多半人来讲都已充足了，假如你还晓得别的对照主要和经常使用的rel属性，也接待分享出来。
</p>
使得W3C与非正式的WHATWG(网络超文本应用程序技术工作小组)关系开始紧张起来。这些年来，一直是WHATWG肩负起HTML的重责大任。

作者: 小女巫 时间: 2015-1-17 21:51
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

作者: 精灵巫婆 时间: 2015-1-25 21:40
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 海妖 时间: 2015-2-4 08:01
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 飘灵儿 时间: 2015-2-9 19:35
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 兰色精灵 时间: 2015-2-27 19:41
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 变相怪杰 时间: 2015-3-9 13:12
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 第二个灵魂 时间: 2015-3-17 00:10
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 谁可相欹 时间: 2015-3-23 10:40
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

欢迎光临仓酷云 (http://ckuyun.com/)