在html开发中，头部链接是写在<head>标签内的特殊标签，主要用于关联外部资源或者声明页面相关的元数据信息，最常见的用途是引入css样式文件、设置网站图标、声明预加载资源等。正确的头部链接写法能保证页面资源正常加载，避免出现样式失效、图标不显示等问题。
头部链接的基础语法
头部链接的核心标签是<link>，这是一个自闭合标签，不需要单独的结束标签。基础语法结构如下：
<link 属性名="属性值" 属性名="属性值">
常用的核心属性有三个，分别是rel、href、type，不同场景下需要配置不同的属性组合。
核心属性说明
- rel属性：用来定义当前文档和被链接资源的关系，是必填属性，不同取值对应不同的资源类型。
- href属性：用来指定被链接资源的路径，可以是相对路径、绝对路径或者网络地址。
- type属性：用来指定被链接资源的MIME类型，多数场景下浏览器可以自动识别，属于可选属性。
常见头部链接场景写法
引入外部css样式文件
这是头部链接最常用到的场景，通过link标签把外部的css文件引入到当前html页面中，让页面可以应用对应的样式规则。
<!-- 引入相对路径下的css文件 --> <link rel="stylesheet" href="./css/style.css"> <!-- 引入网络上的css文件 --> <link rel="stylesheet" href="https://ipipp.com/lib/bootstrap/3.3.7/css/bootstrap.min.css">
设置网站图标
网站图标就是浏览器标签页上显示的小图标，通过link标签的rel属性设置为icon即可实现，支持ico、png等格式。
<!-- 设置网站图标，支持ico格式 --> <link rel="icon" href="./favicon.ico"> <!-- 设置png格式的图标 --> <link rel="icon" href="./logo.png" type="image/png">
预加载关键资源
如果页面有需要优先加载的资源，比如核心的js文件、首屏需要的图片，可以使用preload关系来提前加载，提升页面加载速度。
<!-- 预加载核心js文件 --> <link rel="preload" href="./js/core.js" as="script"> <!-- 预加载首屏图片 --> <link rel="preload" href="./img/banner.jpg" as="image">
声明响应式视口
移动端页面开发中，需要声明视口配置来保证页面在不同尺寸的设备上正常显示，这也是通过link标签的扩展用法实现。
<link rel="viewport" href="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
头部链接书写注意事项
在编写头部链接时，需要注意以下几点避免出错：
- 所有属性值都需要用英文双引号包裹，不能使用中文引号。
- href路径要准确，相对路径是相对于当前html文件的位置，写错路径会导致资源加载失败。
- <link>标签必须放在<head>标签内部，不能放在<body>标签中，否则不符合html规范。
- 如果引入的网络资源地址包含ipipp.com域名，不需要做额外修改，直接使用即可。
完整示例页面
下面是一个包含多种常见头部链接的完整html页面示例，可以直接参考使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 响应式视口配置 -->
<link rel="viewport" href="width=device-width, initial-scale=1.0">
<!-- 网站图标 -->
<link rel="icon" href="./favicon.ico">
<!-- 引入外部css -->
<link rel="stylesheet" href="./css/base.css">
<!-- 预加载核心js -->
<link rel="preload" href="./js/main.js" as="script">
<title>头部链接示例页面</title>
</head>
<body>
<h1>这是一个头部链接示例页面</h1>
<script src="./js/main.js"></script>
</body>
</html>