＜link＞标签在网页中的常见用途及与＜script＞标签引入资源方式的区别

embedded/2025/3/18 16:07:05/

大白话标签在网页中的常见用途及与

<link> 标签的常见用途

<link> 标签主要用于在 HTML 页面中引入外部资源，最常见的就是引入样式表（CSS 文件），让网页能够按照我们定义的样式来展示内容。

以下是一个简单的例子，展示如何使用 <link> 标签引入外部 CSS 文件：

html"><!DOCTYPE html>
<html lang="zh-CN">
<head><!-- 设置网页使用的语言，这里是中文 --><meta charset="UTF-8"><!-- 给网页设置一个标题，会显示在浏览器的标签页上 --><title>我的网页</title><!-- 使用 <link> 标签引入外部的 CSS 文件，rel 属性指定资源和当前文档的关系为样式表（stylesheet），href 属性指定 CSS 文件的路径 --><link rel="stylesheet" href="styles.css"> 
</head>
<body><h1>这是一个标题</h1><p>这是一段文字内容。</p>
</body>
</html>

除了引入 CSS 文件，<link> 标签还可以用于：

  1. 设置网站图标（favicon）：让浏览器标签页上显示特定的图标。
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的网页</title><!-- 使用 <link> 标签设置网站图标，rel 属性为 icon，href 属性指定图标文件的路径，sizes 属性指定图标大小，type 属性指定图标类型 --><link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/x-icon"> 
</head>
<body><h1>这是一个标题</h1><p>这是一段文字内容。</p>
</body>
</html>
  1. 预加载资源：提前加载一些后续可能会用到的资源，提高页面加载速度。
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的网页</title><!-- 使用 <link> 标签预加载资源，rel 属性为 preload，href 属性指定要预加载的资源路径，as 属性指定资源类型，这里是字体资源 --><link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 
</head>
<body><h1>这是一个标题</h1><p>这是一段文字内容。</p>
</body>
</html>

<link> 标签与 <script> 标签引入资源方式的区别

  1. 引入资源类型不同：
    • <link> 标签主要用于引入样式表（CSS）、图标、预加载资源等。
    • <script> 标签主要用于引入 JavaScript 脚本文件，让网页能够实现交互功能、动态效果等。
  2. 加载方式不同：
    • <link> 标签引入的资源一般是并行加载的，不会阻塞页面的渲染。也就是说，浏览器在加载 HTML 页面的同时，可以同时去加载 <link> 引入的资源，比如 CSS 文件，不会影响页面内容的显示。
    • <script> 标签引入的 JavaScript 脚本默认是阻塞式加载的。当浏览器遇到 <script> 标签时，会暂停页面的渲染，先去下载并执行 JavaScript 脚本，等脚本执行完毕后才会继续渲染页面。这可能会导致页面加载速度变慢，如果 JavaScript 脚本很大或者网络不好的话。
    • 不过，我们可以通过添加 async 或 defer 属性来改变 <script> 标签的加载行为：
      • async 属性：异步加载脚本，脚本下载完成后立即执行，不会等待其他资源，也不会阻塞页面渲染，但脚本的执行顺序可能和它们在 HTML 中出现的顺序不一致。
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的网页</title><!-- 使用 <script> 标签引入 JavaScript 脚本文件，async 属性表示异步加载，下载完成后立即执行 --><script async src="script1.js"></script> 
</head>
<body><h1>这是一个标题</h1><p>这是一段文字内容。</p><!-- 这里的内容可能在 script1.js 执行之前或之后显示 -->
</body>
</html>

 - `defer` 属性：延迟加载脚本，脚本会在页面解析完成后，DOMContentLoaded 事件触发之前按顺序执行，不会阻塞页面渲染，保证脚本的执行顺序和它们在 HTML 中出现的顺序一致。

html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的网页</title><!-- 使用 <script> 标签引入 JavaScript 脚本文件，defer 属性表示延迟加载，在页面解析完成后按顺序执行 --><script defer src="script1.js"></script> 
</head>
<body><h1>这是一个标题</h1><p>这是一段文字内容。</p><!-- 这里的内容会在页面解析时显示，script1.js 会在页面解析完成后执行 -->
</body>
</html>

希望以上内容能让你清楚地了解 <link> 标签的用途以及它和 <script> 标签的区别。

标签的语法和属性

<link> 标签是 HTML 中的一个自闭合标签（即不需要结束标签），主要用于在 HTML 页面中引入外部资源，下面为你详细介绍它的语法和常见属性：

语法

html"><link rel="relationship" href="resource_url" [其他属性] />

其中，rel（relationship 的缩写）属性用于指定所引入资源与当前文档之间的关系，href（hypertext reference 的缩写）属性用于指定外部资源的 URL 地址。

常见属性

  1. rel 属性：
    • stylesheet：最常用的值，用于指定引入的资源是一个样式表（CSS 文件），例如：
html"><link rel="stylesheet" href="styles.css" />
  • icon：用于指定网站图标（favicon），可以让浏览器标签页上显示特定的图标，例如：
html"><link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/x-icon" />
  • preload：告诉浏览器提前加载指定的资源，以便后续使用，提高页面加载性能。比如预加载字体：
html"><link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin />
  • canonical：用于指定当前页面的规范（标准）URL，有助于解决内容重复的问题，例如：
html"><link rel="canonical" href="https://www.example.com/original-page" />

  1. href 属性：
    用于指定外部资源的具体路径或 URL，如 href="styles.css" 表示引入当前目录下名为 styles.css 的样式表文件；href="https://example.com/css/main.css" 则表示引入外部网站上的样式表文件。

  2. type 属性：
    用于指定所引入资源的 MIME 类型，不过在引入 CSS 文件时，现代浏览器通常会忽略该属性。例如：

html"><link rel="stylesheet" href="styles.css" type="text/css" />
  1. media 属性：
    用于指定样式表适用的媒体类型或媒体查询条件。例如，只在屏幕设备上应用该样式表：
html"><link rel="stylesheet" href="styles.css" media="screen" />

或者根据屏幕宽度设置不同的样式：

html"><link rel="stylesheet" href="responsive-styles.css" media="(max-width: 768px)" />
  1. sizes 属性：
    主要与 rel="icon" 一起使用，用于指定图标的尺寸，例如：
html"><link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/x-icon" />
  1. as 属性：
    当 rel="preload" 时使用，用于明确指定预加载资源的类型，帮助浏览器优化资源加载优先级。比如：
html"><link rel="preload" href="myvideo.mp4" as="video" />
  1. crossorigin 属性：
    用于配置 CORS（跨源资源共享）策略，允许或限制跨域请求。取值可以是 anonymous（表示匿名请求，不发送凭据）或 use-credentials（表示发送凭据）。例如：
html"><link rel="stylesheet" href="https://example.com/remote-styles.css" crossorigin="anonymous" />

以上就是 <link> 标签的基本语法和常见属性，合理使用这些属性可以更好地管理和优化网页中外部资源的引入。

除了常见属性，标签还有其他属性吗？

除了前面提到的常见属性，<link> 标签还有一些不太常用但在特定场景下会发挥作用的属性，下面为你介绍：

hreflang 属性

该属性用于指定 href 属性所指向资源的语言。这在提供多语言版本的网站时比较有用，能让浏览器知道链接资源使用的是哪种语言。

示例：

html"><link rel="alternate" href="https://example.com/fr/page" hreflang="fr" />

在这个例子中，hreflang="fr" 表明链接的资源使用的是法语。

referrerpolicy 属性

它用于控制在获取链接资源时发送的引用信息（referrer）。引用信息可以告诉服务器请求是从哪个页面发起的。

示例：

html"><link rel="stylesheet" href="styles.css" referrerpolicy="no-referrer" />

上述代码中，referrerpolicy="no-referrer" 表示在请求 styles.css 时不发送引用信息，这有助于保护用户隐私。

imagesizes 属性

此属性与 rel="preload" 结合使用，并且当预加载的资源是图片时生效。它用于指定在不同媒体条件下图片的尺寸。

示例：

html"><link rel="preload" href="image.jpg" as="image" imagesizes="(max-width: 600px) 100vw, 50vw" />

这里的 imagesizes 属性根据不同的视口宽度指定了图片的尺寸。当视口宽度最大为 600px 时，图片宽度为视口宽度的 100%；否则，为视口宽度的 50%。

imageorientations 属性

该属性同样与 rel="preload" 配合使用，针对预加载的图片资源。它用于指定图片在不同设备方向下的方向。不过目前这个属性的支持度还不是很广泛。

importance 属性

该属性用于指定资源加载的优先级。它有三个可能的值：high（高优先级）、low（低优先级）和 auto（由浏览器自动决定）。

示例：

html"><link rel="stylesheet" href="critical-styles.css" importance="high" />

在这个例子中，importance="high" 表明 critical-styles.css 是高优先级的资源，浏览器会优先加载它。

如何调试标签引入资源时出现的问题？

当使用 <link> 标签引入资源出现问题时，可按以下方法进行调试：

1. 检查文件路径与 URL

  • 相对路径与绝对路径：确认 href 属性里的文件路径是否正确。相对路径是相对于当前 HTML 文件的位置，绝对路径则是完整的 URL 或文件系统路径。
    • 若使用相对路径，要保证资源文件和 HTML 文件的相对位置无误。例如，若 HTML 文件和 CSS 文件处于同一目录，路径应像这样：
html"><link rel="stylesheet" href="styles.css" />
  • 若 CSS 文件在 css 子目录下，路径就得写成：
html"><link rel="stylesheet" href="css/styles.css" />
  • URL 格式：若使用绝对 URL，要保证 URL 格式正确且资源可正常访问。可以在浏览器地址栏直接输入该 URL 来验证。例如：
html"><link rel="stylesheet" href="https://example.com/styles.css" />

2. 查看浏览器开发者工具

  • 网络面板：在浏览器（如 Chrome、Firefox）中按 F12 或 Ctrl + Shift + I（Windows/Linux）、Cmd + Opt + I（Mac）打开开发者工具，切换到“网络（Network）”面板。重新加载页面，查看 <link> 引入资源的请求情况。
    • 若请求状态码是 404，表示资源未找到，需检查文件路径或 URL。
    • 若状态码是 5xx，表示服务器端出现问题，要联系服务器管理员排查。
    • 若请求被阻止（如跨域问题），开发者工具会给出相应提示。
  • 元素面板：切换到“元素（Elements）”面板，找到 <link> 标签。可以查看标签的属性值是否正确，还能查看资源是否正确加载。若资源未加载，可能会看到样式未应用的情况。

3. 检查文件权限与服务器配置

  • 文件权限：如果在本地开发，要确保资源文件有正确的读取权限。若在服务器上，要保证服务器有访问该文件的权限。
  • 服务器配置：若使用服务器，要检查服务器配置是否正确。例如，服务器可能未正确配置静态文件的访问权限，或者文件类型的 MIME 类型设置有误。

4. 排查跨域问题

  • 同源策略：浏览器的同源策略会限制从一个源（协议、域名、端口相同）加载的页面去访问另一个源的资源。若 <link> 引入的资源来自不同源，可能会遇到跨域问题。
  • 解决方法：可以在服务器端配置 CORS（跨源资源共享）。例如，在服务器响应头中添加 Access-Control-Allow-Origin 字段。若使用的是 Node.js 的 Express 框架，可以这样配置：
const express = require('express');
const app = express();app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', '*');next();
});// 其他路由和中间件配置

5. 检查资源文件内容

  • 文件损坏：确保资源文件（如 CSS、图标文件）本身没有损坏。可以尝试在文本编辑器中打开文件，查看内容是否正常。
  • 语法错误：对于 CSS 文件，检查是否存在语法错误。可以使用在线 CSS 验证工具（如 W3C CSS Validator）来检查。

6. 禁用缓存

浏览器缓存可能会导致旧的资源文件被使用，从而掩盖新的问题。可以在开发者工具的“网络（Network）”面板中勾选“禁用缓存（Disable cache）”选项，然后重新加载页面进行测试。


http://www.ppmy.cn/embedded/173632.html

相关文章

每天五分钟深度学习PyTorch：循环神经网络RNN的计算以及维度信息

每天五分钟深度学习PyTorch：循环神经网络RNN的计算以及维度信息

本文重点 前面我们学习了RNN从何而来，以及它的一些优点，我们也知道了它的模型的大概情况，本文我们将学习它的计算，我们来看一下RNN模型的每一个时间步在计算什么？ RNN的计算 ht-1是上一时刻的输出，xt是本时刻的输入，然后二者共同计算得到了ht，然后yt通过ht计算得到，…
阅读更多...
Android ARouter的详细使用指南

Android ARouter的详细使用指南

Android ARouter的详细使用指南。我需要先确定用户的基础&#xff0c;可能他们已经有Android开发经验&#xff0c;但对ARouter不太熟悉。首先&#xff0c;我应该介绍ARouter是什么&#xff0c;解决什么问题&#xff0c;比如模块化中的页面跳转问题。然后&#xff0c;需要分步骤…
阅读更多...
OpenCV计算摄影学（20）非真实感渲染之增强图像的细节函数detailEnhance()

OpenCV计算摄影学（20）非真实感渲染之增强图像的细节函数detailEnhance()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 此滤波器增强特定图像的细节。 cv::detailEnhance用于增强图像的细节&#xff0c;通过结合空间域和频率域的处理&#xff0c;提升图像中特定细节…
阅读更多...
使用DeepSeek完成一个简单嵌入式开发

使用DeepSeek完成一个简单嵌入式开发

开启DeepSeek对话 请帮我使用Altium Designer设计原理图、PCB&#xff0c;使用keil完成代码编写&#xff1b;要求&#xff1a;使用stm32F103RCT6为主控芯片&#xff0c;控制3个流水灯的原理图 这里需要注意&#xff0c;每次DeepSeek的回答都不太一样。 DeepSeek回答 以下是使…
阅读更多...
鸿蒙 @ohos.arkui.drawableDescriptor (DrawableDescriptor)

鸿蒙 @ohos.arkui.drawableDescriptor (DrawableDescriptor)

鸿蒙 ohos.arkui.drawableDescriptor (DrawableDescriptor) 在鸿蒙开发中&#xff0c;ohos.arkui.drawableDescriptor 模块提供了一种强大的方式来处理图片资源&#xff0c;包括普通图片和分层图片&#xff08;LayeredDrawableDescriptor&#xff09;。通过这个模块&#xff0…
阅读更多...
Anthropic 的模型

Anthropic 的模型

Anthropic 的模型&#xff08;特别是 Claude 系列&#xff09;之所以在性能和推理能力上表现强劲&#xff0c;可以从技术设计、研究理念、训练方法以及应用优化等多个方面进行详细分析。以下是基于当前信息&#xff08;截至 2025 年 3 月 13 日&#xff09;和行业趋势的深入剖析…
阅读更多...
网络安全防护架构有哪些 网络安全防护措施包括

网络安全防护架构有哪些 网络安全防护措施包括

网络安全预防措施 网安措施 计算机网络安全措施主要包括保护网络安全、保护应用服务安全和保护系统安全三个方面&#xff0c;各个方面都要结合考虑安全防护的物理安全、防火墙、信息安全、Web安全、媒体安全等等。 (一)保护网络安全。 网络安全是为保护商务各方网络端系统之…
阅读更多...
图论——广度优先搜索实现

图论——广度优先搜索实现

99. 岛屿数量 题目描述 给定一个由 1（陆地）和 0（水）组成的矩阵，你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成，并且四周都是水域。你可以假设矩阵外均被水包围。 输入描述 第一行包含两个整数 N, M，表示矩阵的行数和列数。 后续 N 行，每行…
阅读更多...
最新文章

Copyright @ 2022~2023