您现在的位置是：网站首页 > 外部资源链接(link)文章详情
外部资源链接(link)
陈川
【
HTML
】
61692人已围观
6367字
外部资源链接的基本概念
HTML中的外部资源链接允许网页引用其他文件或资源，最常见的用途包括引入CSS样式表、JavaScript脚本、字体、图像等。通过<link>标签和<script>标签等元素，开发者可以将外部资源整合到当前文档中。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
链接CSS样式表
<link>标签最常用于链接外部CSS文件。rel属性指定关系类型为样式表，href属性指向CSS文件路径。
<link rel="stylesheet" href="https://example.com/styles/main.css">
<link rel="stylesheet" href="/local/path/to/styles.css">
现代开发中常使用媒体查询实现响应式设计：
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 801px)" href="desktop.css">
预加载关键资源
使用preload可以提前加载重要资源，提升页面性能：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="critical.js" as="script">
浏览器会优先加载这些资源，但不会立即执行脚本或应用样式。
网站图标(favicon)链接
现代浏览器支持多种图标格式和尺寸：
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
替代样式表
提供用户可选的替代样式：
<link rel="stylesheet" href="default.css" title="默认">
<link rel="alternate stylesheet" href="high-contrast.css" title="高对比度">
<link rel="alternate stylesheet" href="dark-mode.css" title="深色模式">
用户可以通过浏览器菜单切换这些样式。
链接JavaScript模块
ES模块可以通过type="module"属性链接：
<script type="module" src="main.mjs"></script>
<script type="module">
import { functionName } from './module.mjs';
</script>
外部资源的安全考虑
使用integrity属性启用子资源完整性(SRI)检查：
<link rel="stylesheet"
href="https://cdn.example.com/style.css"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous">
链接文档关系
定义文档之间的关系：
<link rel="canonical" href="https://example.com/main-page">
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="es" href="https://example.com/es">
<link rel="prev" href="https://example.com/page1">
<link rel="next" href="https://example.com/page3">
预连接和DNS预取
优化第三方资源的连接时间：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">
链接Web组件
加载自定义元素：
<link rel="import" href="components/my-component.html">
动态加载资源
通过JavaScript动态创建链接：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dynamic-styles.css';
document.head.appendChild(link);
条件注释(传统用法)
虽然现代开发中不推荐，但了解传统IE条件注释：
<!--[if IE]>
<link rel="stylesheet" href="ie-only.css">
<![endif]-->
链接媒体资源
关联视频或音频的文本轨道：
<video controls>
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
<link rel="related" href="transcript.html">
</video>
链接搜索功能
支持OpenSearch描述文档：
<link rel="search"
type="application/opensearchdescription+xml"
href="/opensearch.xml"
title="网站搜索">
链接支付方式
声明支持的支付方式：
<link rel="payment-method" href="https://payment.example.com/paypal">
<link rel="payment-method" href="https://payment.example.com/bitcoin">
链接地理空间数据
关联GeoJSON数据：
<link rel="geojson" href="locations.geojson">
链接日历事件
添加日历事件：
<link rel="calendar" href="event.ics" title="重要会议">
链接许可证信息
声明内容许可证：
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
链接编辑URI
指定内容编辑位置：
<link rel="edit" href="https://example.com/api/posts/123">
链接P3P策略
隐私偏好平台策略：
<link rel="P3Pv1" href="/w3c/p3p.xml">
链接OpenID提供者
OpenID认证：
<link rel="openid.server" href="https://openid.example.com/server">
<link rel="openid.delegate" href="https://yourusername.example.com">
链接微格式
关联hCard等微格式：
<link rel="profile" href="http://microformats.org/profile/hcard">
链接资源提示
提供资源加载提示：
<link rel="prerender" href="https://example.com/next-page">
<link rel="prefetch" href="https://example.com/assets/image.jpg">
链接Web应用清单
渐进式Web应用(PWA)清单：
<link rel="manifest" href="/app.webmanifest">
链接服务工作者
注册Service Worker：
<link rel="serviceworker" href="/sw.js" scope="/">
链接支付请求API
支付请求信息：
<link rel="paymentrequest" href="https://example.com/pay/payment-manifest.json">
链接发布订阅
WebSub或PubSubHubbub：
<link rel="hub" href="https://pubsubhubbub.example.com">
<link rel="self" href="https://example.com/feed.xml">
链接跟踪像素
虽然不推荐，但了解传统跟踪方式：
<link rel="tracking-pixel" href="https://analytics.example.com/track?id=123" hidden>
链接实时通信
WebSocket或其他实时协议：
<link rel="websocket" href="wss://example.com/live">
链接数据文件
关联结构化数据：
<link rel="alternate" type="application/rdf+xml" href="data.rdf">
链接OAuth端点
OAuth2.0端点发现：
<link rel="oauth2-authorization" href="https://example.com/oauth/auth">
<link rel="oauth2-token" href="https://example.com/oauth/token">
链接内容安全策略
CSP策略配置：
<link rel="content-security-policy" href="/csp.json">
链接HTTP/2服务器推送
启用服务器推送：
<link rel="preload" href="style.css" as="style" push>
链接Web Bundle
Web打包资源：
<link rel="webbundle" href="https://example.com/resources.wbn" resources="style.css,script.js">
链接性能指标
关联性能时间数据：
<link rel="timing" href="/performance.json">
链接内容协商
提供内容变体：
<link rel="alternate" type="application/json" href="data.json">
<link rel="alternate" type="application/xml" href="data.xml">
链接实时字幕
直播字幕支持：
<link rel="captions" href="live_captions.vtt" type="text/vtt" media="live">
链接3D模型
关联3D资源：
<link rel="model" href="scene.glb" type="model/gltf-binary">
链接机器学习模型
预加载ML模型：
<link rel="preload" href="model.json" as="fetch" type="application/json">
链接区块链数据
关联区块链资源：
<link rel="blockchain" href="https://etherscan.io/address/0x...">
链接虚拟现实
VR内容关联：
<link rel="vr" href="scene.vr.json">
链接增强现实
AR内容关联：
<link rel="ar" href="model.reality">
链接量子计算
未来可能的应用：
<link rel="quantum-circuit" href="algorithm.qasm">
上一篇： 基准URL的设置(base)
下一篇： 样式表的引入
