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

文章目录

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

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


<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

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

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

charset

href

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

hreflang

media

来看个例子吧。

<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>

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

rel

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

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

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

rev

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

sizes

target

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

type

这个很简单，不赘述了。

【详细】HTML的Link标签的参数以及用法相关推荐

三星内存编码_三星内存铭牌的详细说明|三星记忆棒标签存储参数的详细说明...
三星内存铭牌的详细说明|三星记忆棒标签的记忆参数的详细说明大多数朋友都知道记忆铭牌记录着重要的记忆数据. 但是大多数朋友对此不确定!出于这个原因三星内存条编码含义,我也想学习,现在分享相关的学习笔记, ...
link标签的几个用法，帮助提高页面性能
写在前面本文首发于公众号:符合预期的CoyPan HTML 中****元素规定了外部资源与当前文档的关系.最常见的用法,是用来链接一个外部的样式表,比如: <link href="m ...
html+link作用,html link标签有什么作用？html link标签的定义及属性介绍
html link标签有什么作用?html link标签中定义及属性介绍,下面开始本章的内容,主要给大家说的是html link标签的定义和作用,还有HTML link标签的属性介绍及属性作用 htm ...
网页代码中link标签的用法
link标签是我们在html中的一个基础标签,多用来在网页中引入外部的css文件,在这里我们一起来看一下这个标签在我们写代码是用到的写法. 1.引入外部css文件 <link href=&quo ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
在xml文件的Preference标签中，用extra给intent标签加参数
2019独角兽企业重金招聘Python工程师标准>>> 在xml文件的Preference标签中,用<extra>给<Intent>标签加参数,以及<i ...
[html] link标签的属性media有哪些值？都有什么作用？
[html] link标签的属性media有哪些值?都有什么作用? 根据w3c的介绍,media属性表示link的链接文档会应用于何种媒介(设备)上.用于为不同的媒介类型规定不同的样式.常用的值为sc ...
link标签引入.css文件（目的）：适配不同屏幕
link标签引入.css文件(目的):适配不同屏幕本文 · 参考博客:https://blog.csdn.net/nianzhi1202/article/details/52464078 附 · 参 ...
超链接a标签的伪类选择器问题，Link标签与visited标签的失效问题(问题介绍与解决方法)。以下全部内容跟可通过鼠标左键选取后，复制到编辑器中直接运行。
超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法).以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行. 参考文章: (1)超链接a标签的伪类选择器 ...

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

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

文章目录

charset

href

hreflang

media

rel

rev

sizes

target

type

【详细】HTML的Link标签的参数以及用法相关推荐

最新文章

热门文章