Body link 属性

在网页开发中，链接是非常重要的一部分。除了常见的 <a> 标签外，我们还可以使用 body 元素上的 link 属性来创建链接。这种链接通常用于引入外部资源，比如样式表、图标文件等。

link 属性的基本语法

link 属性是 body 元素的一个标准属性，它的基本语法如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

</body>
</html>

在上面的例子中，我们通过 link 属性引入了一个名为 styles.css 的样式表文件。

link 属性的常用属性

rel

rel 属性用于定义当前文档与被链接文档之间的关系。常见的取值包括：

• stylesheet：引入样式表
• icon：引入图标文件
• preload：预加载资源
• ...

type

type 属性用于指定被链接资源的 MIME 类型。通常用于指定样式表的类型，取值为 text/css。

href

href 属性用于指定被链接资源的 URL。可以是相对路径或绝对路径。比如：

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

media

media 属性用于指定被链接资源适用的媒体类型。比如：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

link 属性的示例

引入样式表

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

引入图标文件

<link rel="icon" type="image/png" href="favicon.png">

预加载资源

<link rel="preload" href="image.jpg" as="image">

总结

通过 body 元素上的 link 属性，我们可以方便地引入外部资源，为网页增加样式、图标等功能。熟练掌握 link 属性的使用，将有助于提高网页开发效率和质量。