【详细】HTML的Link标签的参数以及用法

我就是我 2022-11-12 01:42 116阅读 0赞

# 关于HTML的Link标签的参数以及用法 #

### 文章目录 ###

*  关于HTML的Link标签的参数以及用法
 *   *  charset
     *  href
     *  hreflang
     *  media
     *  rel
     *  rev
     *  sizes
     *  target
     *  type

--------------------

![在这里插入图片描述][20210321201553637.gif]

--------------------

> 可能你会想，这是什么意思，那么今天我们就来看看Link的参数，都代表什么意思。

> 首先是参数都有哪些？如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]

> 再来看看每个参数什么意思。

## charset ##

![在这里插入图片描述][2021032120190855.png]

--------------------

## href ##

> 相信这个大家用的比较多了吧！

![在这里插入图片描述][20210321201957698.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]

## hreflang ##

![在这里插入图片描述][20210321202121829.png]

## media ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 2]

> 来看个例子吧。

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="/example/html/demo_screen.css"/>
    <link rel="stylesheet" type="text/css" href="/example/html/demo_print.css" media="print" />
    </head>
    
    <body>
    <h1>W3School 实例</h1>
    <p><a href="/example/html/html_link_media.html" target="_blank">点击这里</a>，在新窗口打开本页面（没有 TIY 功能）。</p>
    <p>如果您打印本页面，或者在打印预览模式中打开它，此页面会通过 media="print" 样式表进行格式化。"print" 样式表会把本页面格式化为白底黑字。</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 3]

> 可以看到页面，我们打印一下，会发现只有白底黑字。这就是media="print"的作用。

## rel ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 4]

> 这个属性，相信大家用的非常多。rel 属性规定当前文档与被链接文档之间的关系。

> 比如这个，rel="stylesheet告诉你这个是一个外部的样式表。大家明白了吗？相信肯定可以理解的。

## rev ##

![在这里插入图片描述][20210321202936492.png]

![在这里插入图片描述][2021032120311544.png]

> 这个用法，一般浏览器都不支持，大家慎用！

## sizes ##

![在这里插入图片描述][2021032120341670.png]

## target ##

> 这个属性也是非常常用的，比如你想在一个新的页面里面打开你的新的页面，那么这个关键参数是必不可少的！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 5]

## type ##

![在这里插入图片描述][20210321203641748.png]

> 这个很简单，不赘述了。

[20210321201553637.gif]: /images/20221022/ee54f69e119042edb25dbb034de868b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]: /images/20221022/8e3cf6ed2cd54fb39612e141b8d712e2.png
[2021032120190855.png]: /images/20221022/39c56b44fb0e41feb2878882355add2b.png
[20210321201957698.png]: https://img-blog.csdnimg.cn/20210321201957698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210321202029750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70
[20210321202121829.png]: https://img-blog.csdnimg.cn/20210321202121829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210321202406388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210321202443152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210321202609223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70
[20210321202936492.png]: https://img-blog.csdnimg.cn/20210321202936492.png
[2021032120311544.png]: https://img-blog.csdnimg.cn/2021032120311544.png
[2021032120341670.png]: https://img-blog.csdnimg.cn/2021032120341670.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210321203601692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70
[20210321203641748.png]: https://img-blog.csdnimg.cn/20210321203641748.png