HTML <link> 标签 详解
HTML基础 2022-06-02 09:41:24小码哥的IT人生shichen
HTML <link> 标签
实例
链接一个外部样式表：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
完整实例【亲自试一试】：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <link> | Yes | Yes | Yes | Yes | Yes |
在用于样式表时，<link> 标签得到了几乎所有浏览器的支持。但是几乎没有浏览器支持其他方面的用途。
定义和用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
HTML 与 XHTML 之间的差异
在 HTML 中，<link> 标签没有结束标签。
在 XHTML 中，<link> 标签必须被正确地关闭。
提示和注释：
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 中不支持。 |
| href | URL | 规定被链接文档的位置。 |
| hreflang | language_code | 规定被链接文档中文本的语言。 |
| media | media_query | 规定被链接文档将被显示在什么设备上。 |
| referrerpolicy |
|
规定在获取资源时要使用的引荐来源信息。 |
| rel |
|
规定当前文档与被链接文档之间的关系。 |
| rev | reversed relationship | HTML5 中不支持。 |
| sizes |
|
规定被链接资源的尺寸。仅适用于 rel="icon"。 |
| target |
|
HTML5 中不支持。 |
| type | MIME_type | 规定被链接文档的 MIME 类型。 |
全局属性
<link> 标签支持 HTML 中的全局属性。
事件属性
<link> 标签支持 HTML 中的事件属性。
TIY 实例
完整实例【链接到一个外部样式表】：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何 <link> 标签链接到一个外部样式表。
相关页面
HTML DOM 参考手册：Link 对象
