|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
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的重责大任。 |
|