HTML中的link标记用于在HTML文档中引入外部资源，如CSS文件和图标文件等。而link标记中的rel属性则指定了当前文档与所引入资源之间的关系。
下面是rel属性的常见取值：
- stylesheet：引入CSS文件，通常与type="text/css"一起使用。
- icon：引入网页图标，通常与type="image/x-icon"一起使用。
- shortcut icon：引入网页快捷图标，通常与type="image/x-icon"一起使用。
- prefetch：预加载资源，通常配合as属性一起使用，已经作为实验特性在部分浏览器中可用。
- dns-prefetch：预解析DNS，也就是在链接被点击之前就解析出对应的IP并缓存起来，以便后续更快地访问，已经作为实验特性在部分浏览器中可用。
下面是两个rel属性的示例：
示例1：引入CSS文件
<!DOCTYPE html>
<html>
<head>
<title>示例1：引入CSS文件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
在这个例子中，link标记的rel属性被设置为stylesheet，表示当前HTML文档与引入的CSS文件之间的关系是“样式表”。
示例2：引入网页图标
<!DOCTYPE html>
<html>
<head>
<title>示例2：引入网页图标</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
在这个例子中，link标记的rel属性被设置为icon，表示当前HTML文档与引入的图标文件之间的关系是“图标”。注意到这里的type属性被设置为image/x-icon，表示图标文件是一种支持透明背景的ICO文件。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML link标记的rel属性 - Python技术站
微信扫一扫 
支付宝扫一扫 