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

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

<link> 标签的常见用途

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

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

<!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):让浏览器标签页上显示特定的图标。
<!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. 预加载资源:提前加载一些后续可能会用到的资源,提高页面加载速度。
<!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 脚本很大或者网络不好的话。
    • 不过,我们可以通过添加 asyncdefer 属性来改变 <script> 标签的加载行为:
      • async 属性:异步加载脚本,脚本下载完成后立即执行,不会等待其他资源,也不会阻塞页面渲染,但脚本的执行顺序可能和它们在 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 中出现的顺序一致。
<!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 页面中引入外部资源,下面为你详细介绍它的语法和常见属性:

语法

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

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

常见属性

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

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

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

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

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

除了常见属性,标签还有其他属性吗?

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

hreflang 属性

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

示例

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

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

referrerpolicy 属性

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

示例

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

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

imagesizes 属性

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

示例

<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(由浏览器自动决定)。

示例

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

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

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

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

1. 检查文件路径与 URL

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

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

  • 网络面板:在浏览器(如 Chrome、Firefox)中按 F12Ctrl + 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.rhkb.cn/news/35312.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTB 学习笔记 【中/英】《Web 应用 - 布局》P2

&#x1f4cc; 这篇文章讲了什么&#xff1f; 介绍了 Web 应用的架构和布局&#xff0c;包括不同的基础设施、组件、架构模式等。讲解了 常见的 Web 应用部署方式&#xff08;单服务器、多服务器等&#xff09;&#xff0c;并分析了它们的安全性。介绍了 微服务架构&#xff0…

蓝牙系统的核心组成解析

一、硬件层&#xff1a;看得见的物理载体 1. 射频模块&#xff08;Radio Frequency Module&#xff09; 专业描述&#xff1a;工作在2.4GHz ISM频段&#xff0c;支持GFSK/π/4 DQPSK/8DPSK调制方式 功能类比&#xff1a;相当于人的"嘴巴"和"耳朵" 发射端…

LeRobot源码剖析——对机器人各个动作策略的统一封装:包含ALOHA ACT、Diffusion Policy、VLA模型π0

前言 过去2年多的深入超过此前7年&#xff0c;全靠夜以继日的勤奋&#xff0c;一天当两天用&#xff0c;抠论文 抠代码 和大模型及具身同事讨论&#xff0c;是目前日常 而具身库里&#xff0c;idp3、π0、lerobot值得反复研究&#xff0c;故&#xff0c;近期我一直在抠π0及l…

ISP--Gamma Correction

文章目录 现象Gamma产生的原因CRT属性导致人眼的亮度特性 gamma校正LUT法线性插值法模拟gamma法 现象 从上往下看左侧黑色块黑得越来越严重&#xff0c;对比度也在逐渐加深。此时灰阶的高亮区获得的数据位变少&#xff0c;暗区获得的数据位变多&#xff0c;暗区细节会更多。但是…

光谱相机识别瓶子材质的技术原理和应用案例

一、技术原理 ‌光谱特征差异识别‌ 不同材质的塑料&#xff08;如PET、PP、PE等&#xff09;因化学结构差异&#xff0c;在近红外或可见光波段会呈现独特的光谱反射曲线。例如&#xff0c;高光谱相机通过分析数百个窄波段的光谱数据&#xff0c;可生成每种材质的“光谱指纹”…

某快餐店用户市场数据挖掘与可视化

1、必要库的载入 import pandas as pd import matplotlib.pyplot as plt import seaborn as sns2、加载并清洗数据 # 2.1 加载数据 df pd.read_csv(/home/mw/input/survey6263/mcdonalds.csv)# 2.2 数据清洗 # 2.2.1 检查缺失值 print(缺失值情况&#xff1a;) print(df.isn…

MySQL 衍生表(Derived Tables)

在SQL的查询语句select …. from …中&#xff0c;跟在from子句后面的通常是一张拥有定义的实体表&#xff0c;而有的时候我们会用子查询来扮演实体表的角色&#xff0c;这个在from子句中的子查询会返回一个结果集&#xff0c;这个结果集可以像普通的实体表一样查询、连接&…

Electron使用WebAssembly实现CRC-16 MAXIM校验

Electron使用WebAssembly实现CRC-16 MAXIM校验 将C/C语言代码&#xff0c;经由WebAssembly编译为库函数&#xff0c;可以在JS语言环境进行调用。这里介绍在Electron工具环境使用WebAssembly调用CRC-16 MAXIM格式校验的方式。 CRC-16 MAXIM校验函数WebAssembly源文件 C语言实…

HTB 学习笔记 【中/英】《前端 vs. 后端》P3

&#x1f4cc; 这篇文章讲了什么&#xff1f; 介绍了 前端&#xff08;客户端&#xff09; 和 后端&#xff08;服务器端&#xff09; 的区别。解释了 全栈开发&#xff08;Full Stack Development&#xff09;&#xff0c;即前端后端开发。介绍了 前端和后端常用的技术。讨论…

SpringBoot集成ElasticSearch实现支持错别字检索和关键字高亮的模糊查询

文章目录 一、背景二、环境准备1.es8集群2.Kibana3.Canal 三、集成到SpringBoot1.新增依赖2.es配置类3.建立索引4.修改查询方法 四、修改前端 一、背景 我们在开发项目的搜索引擎的时候&#xff0c;如果当数据量庞大、同时又需要支持全文检索模糊查询&#xff0c;甚至你想做到…

麒麟系统使用-安装 SQL Developer

文章目录 前言一、基础准备1.基本环境2.相关包下载 二、进行相关配置1.配置JAVA2.配置SQL Developer 总结 前言 作为我国自主研发的操作系统&#xff0c;麒麟系统在使用时需要考虑安装相应的app。尽管麒麟系统是基于linux开发&#xff0c;可由于版本的一些差异&#xff0c;麒麟…

PrimeTime:timing_report_unconstrained_paths变量

相关阅读 PrimeTimehttps://blog.csdn.net/weixin_45791458/category_12900271.html?spm1001.2014.3001.5482 PrimeTime自Q-2019.12版本起引入了timing_report_unconstrained_paths变量&#xff08;默认值为false&#xff09;&#xff0c;该变量控制是否在使用report_timing命…

洛谷 P1115 最大子段和(前缀和详解)c++

题目链接&#xff1a;P1115 最大子段和 - 洛谷 1.题目分析 2.算法原理 解法&#xff1a;利用前缀和 思考&#xff1a;如何求出以a[i]为结尾的所有子区间中最大的子段和 假设 i 等于5&#xff0c;以 a[ i ] 为结尾的区间一共是五段&#xff08;黑色线条部分&#xff09;&#…

JetBrains(全家桶: IDEA、WebStorm、GoLand、PyCharm) 2024.3+ 2025 版免费体验方案

JetBrains&#xff08;全家桶: IDEA、WebStorm、GoLand、PyCharm&#xff09; 2024.3 2025 版免费体验方案 前言 JetBrains IDE 是许多开发者的主力工具&#xff0c;但从 2024.02 版本起&#xff0c;JetBrains 调整了试用政策&#xff0c;新用户不再享有默认的 30 天免费试用…

【数据分析】数据筛选与访问行列元素3

访问元素 .loc属性可以通过传入index的值访问行数据。 .loc属性允许传入两个参数&#xff0c;分别是index的值和columns的值&#xff0c;参数间用“逗号”隔开&#xff0c;这样便可以访问数据中的元素。 1. 访问单个元素 访问单个元素比较简单&#xff0c;只需要通过它的in…

C++ std::list超详细指南:基础实践(手搓list)

目录 一.核心特性 1.双向循环链表结构 2.头文件&#xff1a;#include 3.时间复杂度 4.内存特性 二.构造函数 三.list iterator的使用 1.学习list iterator之前我们要知道iterator的区分 ​编辑 2.begin()end() 3.rbegin()rend() 四.list关键接口 1.empty() 2. size…

【免费】2004-2017年各地级市进出口总额数据

2004-2017年各地级市进出口总额数据 1、时间&#xff1a;2004-2017年 2、来源&#xff1a;城市年鉴 3、指标&#xff1a;进出口贸易总额 4、范围&#xff1a;286个地级市 5、指标说明&#xff1a;进出口总额是指一个国家在特定时期内&#xff08;通常为一年&#xff09;所…

谈谈 undefined 和 null

*** 补充 null 和 ‘’

【第15届蓝桥杯】软件赛CB组省赛

个人主页&#xff1a;Guiat 归属专栏&#xff1a;算法竞赛真题题解 文章目录 A. 握手问题&#xff08;填空题&#xff09;B. 小球反弹&#xff08;填空题&#xff09;C. 好数D. R格式E. 宝石组合F. 数字接龙G. 爬山H. 拔河 正文 总共8道题。 A. 握手问题&#xff08;填空题&…

【计算机视觉】工业表计读数(2)--表计检测

1. 简介 工业表计&#xff08;如压力表、电表、气表等&#xff09;在工控系统、能源管理等领域具有重要应用。然而&#xff0c;传统人工抄表不仅工作量大、效率低&#xff0c;而且容易产生数据误差。近年来&#xff0c;基于深度学习的目标检测方法在工业检测中展现出极大优势&…