link元素用于指明当前文档和外部资源之间的关系，比如：

1. 引入外部样式表；
2. 引入图标。

引入的东西种类那么多，我们便是通过link元素标明这些引入的东西是什么东西，什么时候使用它们。

属性

除了全局属性外，link还支持相当不少的属性。常见的有：

• href：外部资源的URL
• media：外部资源被使用的设备条件（显示屏的分辨率呀，宽度呀，打印预览呀...）
• rel：外部资源与当前文档的关系（样式表呀，图标呀...）
• type：外部资源的文件类型，比如引用css样式表时，用type='text/css'

应用

最最普遍的用法：引入外部CSS样式表(rel="stylesheet")

<link href="styles/style.css" rel="stylesheet" type="text/css" /> 

根据显示屏的宽度用不一样的CSS样式(media属性)

也就是电脑上看和手机上看，网页的样式就不一样了。

<link href="styles/style1.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px)" />
<link href="styles/style2.css" rel="stylesheet" type="text/css" media="screen and (max-width:600px)" />
<style>
    div{
        width:100%;
        height:100px;
        text-align:center;
        font-size:50px;}</style>
<div id="a">Try</div>
<div id="b">Try</div>

style1.css

@media screen and (min-width:600px){
    #a{
        color:yellow;
        background:red;
    }
    #b{
        background:yellow;
        color:red;
    }

style2.css

@media screen and (max-width:600px){
    #a{
        background:yellow;
        color:red;
    }
    #b{
        color:yellow;
        background:red;
    }
}

给标签页添加一个图标（rel="icon")

<link href="favicon.ico" rel="icon" />

google首页。好像很多网站是多了个shortcut，据说是因为兼容ie。

<link href="/images/branding/product/ico/googleg_lodp.ico" rel="shortcut icon">