当前位置：首页 > article >正文

link标签的用途

article 2024/11/20 15:13:48

link标签的用途

- 1. 加载样式表（Stylesheets）
- 2. 预加载资源（Preloading）
- 3. 预加载模块（Module Preloading）
- 4. 定义图标（Favicon）
- 5. 替代链接（Alternate）
- 6. 网站图标（Apple Touch Icon）
- 7. 关联搜索（Web Search）
- 8. 网站短标题（Shortcuts）
- 9. Canonical 链接
- 10. RSS/Atom Feed
- 11. Prefetch
- 12. DNS Prefetch
- 13. Preconnect
- 14. Manifest
- 15. Mask-Icon
- 示例

1. 加载样式表（Stylesheets）

最常用的用途之一是加载外部样式表，以便应用 CSS 样式。

<link rel="stylesheet" href="styles.css">

2. 预加载资源（Preloading）

预加载资源是为了提高性能，让浏览器提前加载关键资源。预加载可以应用于各种类型的资源，如脚本、图片、字体等。

<!-- 预加载脚本 -->
<link rel="preload" as="script" href="script.js">
<!-- 预加载图片 -->
<link rel="preload" as="image" href="image.jpg">
<!-- 预加载字体 -->
<link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin>

3. 预加载模块（Module Preloading）

专门用于预加载 JavaScript 模块。

<link rel="modulepreload" href="app.js">

4. 定义图标（Favicon）

用于定义网站的图标，如浏览器标签页中的小图标。

<link rel="icon" href="favicon.ico">

5. 替代链接（Alternate）

用于定义替代版本的页面，如不同语言版本的页面。

<!-- 英文版页面 -->
<link rel="alternate" hreflang="en" href="http://example.com/en/">
<!-- 中文版页面 -->
<link rel="alternate" hreflang="zh-CN" href="http://example.com/zh/">

6. 网站图标（Apple Touch Icon）

用于移动设备上的网站图标。

<link rel="apple-touch-icon" href="touch-icon.png">

7. 关联搜索（Web Search）

用于定义网站的搜索框，以便在浏览器中显示搜索提示。

<link rel="search" type="application/opensearchdescription+xml" href="opensearch.xml" title="Search Example">

8. 网站短标题（Shortcuts）

用于定义网站的短标题，以便在移动设备上使用。

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="splash.png">

9. Canonical 链接

用于定义页面的规范 URL，帮助搜索引擎识别页面的主版本。

<link rel="canonical" href="http://example.com/canonical-url">

10. RSS/Atom Feed

用于定义网站的 RSS 或 Atom 订阅源。

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss.xml">
<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="atom.xml">

11. Prefetch

预取链接用于提前加载将来可能需要的资源。

<link rel="prefetch" href="future-resource.html">

12. DNS Prefetch

预解析域名，提前解析域名以加快后续请求的速度。

<link rel="dns-prefetch" href="//fonts.googleapis.com">

13. Preconnect

预连接到服务器，以便更快地加载资源。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

14. Manifest

定义应用程序的清单文件，用于定义 Web 应用的元数据。

<link rel="manifest" href="manifest.json">

15. Mask-Icon

定义网站在书签中的图标。

<link rel="mask-icon" href="mask-icon.svg" color="#ff0000">

示例

<head> 
    <!-- 加载样式表 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 预加载脚本 -->
    <link rel="preload" as="script" href="script.js">
    <!-- 预加载脚本-浏览器不兼容的时候使用preload -->
    <link rel="modulepreload" href="/path/to/app.js">
    <!-- 预加载图片- -->
    <link rel="preload" as="image" href="image.jpg">
    <!-- 预加载字体 -->
    <link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin>
    <!-- 定义图标 -->
    <link rel="icon" href="favicon.ico">
    <!-- 替代链接 -->
    <link rel="alternate" hreflang="en" href="http://example.com/en/">
    <!-- 网站图标 -->
    <link rel="apple-touch-icon" href="touch-icon.png">
    <!-- Canonical 链接 -->
    <link rel="canonical" href="http://example.com/canonical-url">
    <!-- RSS/Atom Feed -->
    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss.xml">
    <link rel="alternate" type="application/atom+xml" title="Atom Feed" href="atom.xml">
    <!-- DNS Prefetch -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <!-- Preconnect -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Manifest -->
    <link rel="manifest" href="manifest.json">
    <!-- Mask-Icon -->
    <link rel="mask-icon" href="mask-icon.svg" color="#ff0000">
</head>