• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > HTML link标记的rel属性

HTML link标记的rel属性

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含link,rel等相关知识,佚名 希望在学习及工作中可以帮助到您

<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标签最多的使用就是用来调用外部样式表,例如下面这样:

<link rel="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样式 :

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

(3). 可替换样式表

你可能还会在一些网页中看到诸如下面的样式表调用代码:

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

这段代码定义了一个可替换的样式表,它和第一个link元素同时使用,第一个定义了首选样式,而这个则让用户可选择替换的样式。但这个替换操作需要浏览器支持,但很多浏览器比如IE都是不支持的。

所以使用到替换样式的网页,一般都用一些样式表切换的JS,让用户可以自由切换界面样式。这个应该大家都见过,一些网站会给网页定义多种配色。WordPress用户有兴趣的话,可以下载Small Potato的WPDesigner7这款WordPress主题试用研究一下(或查看DEMO),它利用一个简单的JS和多个可替换样式,让用户可对网页改变配色。稍高阶的一些,还可以利用JS弄成随时间变化样式的,比如白天的时候显示成明色,晚上的时候显示成暗色。

注释: 为首选样式指定media=”all”,再添加一个打印样式,会比较符合Web标准(尽管对于普通网站来说,不会有几个人想要打印你的网页)。帕兰映像就没有定义打印样式,稍后抽时间搞搞 :)

注释: 是否使用可替换样式是个值得斟酌的问题。如果仅改变配色,整体主调还是不变,那可以接受。但有一些朋友,比如WordPress用户,会启用多个完全不同风格的主题,再利用插件让用户自由变换。这看上去似乎挺酷的,但我的建议是千万别这么做。是否影响SEO且不谈,但会让人对你的网站缺乏一种固定形象的认知感。

2. 定义网站收藏夹图标

关于favicon/收藏夹图标的详细介绍可以查看百度百科(1, 2),使用下面的代码调用即可。

<link rel="shortcut icon" href="http://paranimage.com/wp-content/themes/v5/images/favicon.ico" type="images/x-icon"/>
<link rel="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文件,并放到网站根目录。

顺定分享: 为你的网站添加Apple Touch图标

iPhone或iPod Touch设备允许用户添加网站的链接到主屏上,使用下面的代码可以为你的网站指定一个Apple Touch图标:

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

该图标的尺寸是57*57的PNG格式,如果不是,会自动缩放,且如果我没搞错的话,不一定要弄成iPhone风格那种漂亮的圆角,iPhone会自动按它的风格把图标弄成圆角渐变的,比如last.fm的apple touch icon。

apple touch icon <link>标签的rel属性全解析

您可能想查找下面的文章:

  • HTML link标记的rel属性
  • 英文:A链接标记ie下会自动补全href

相关文章

  • 2017-08-05abbr标记和acronym标记
  • 2017-08-05html超链接a标签的href跳转跟onclick之间执行顺序示例介绍
  • 2017-08-05在网页上调用桌面exe程序的简单方法
  • 2017-08-05web响应式布局中iframe自适应的方法
  • 2017-08-05W3C教程(12):W3C Soap 活动
  • 2017-08-05html+css3太阳系行星运转动画效果的实现代码
  • 2017-08-05dom操作表格示例(dom创建表格)
  • 2017-08-05Html长文本超出标记宽度后自动截取实现代码
  • 2017-08-05HTML中div与span的区别(共同点与不同点)
  • 2017-08-05html页面互相传值的问题解决方案

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html插入图片示例(html添加图片)
    • html meta用法示例介绍
    • 在页面中调用搜索引擎以调用百度为例
    • html显示长度较大的数据时的处理方法
    • html悬浮框架的设置使用示例(iframe加载html)
    • 标签栏的几种实现方法(推荐)
    • 什么是 WML?
    • HTML实现简单计算器附详细思路
    • 网页设计 TabIndex元素
    • input文本框和img验证码对齐问题(img总比input高出一个头)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有