HTML中link的用法

一点寒芒先到，随后，抢出如龙！

对于本人而言，这篇笔记内容有些扩展了，有些还未学到的也用上了，但是大概可以使用的明白，坚持下去，相信一定可以建设一个稳固的根基。

该文章为个人成长学习笔记，仅用于学习研究，感谢您的观看。

内容简介

  1. 引入外部样式表（CSS）
  2. 定义页面的图标（Favicon）
  3. 预加载资源
  4. 替代页面版本（如移动版和桌面版）
  5. 定义 RSS 或 Atom 订阅源

引入外部样式表（CSS）

  • 用途：这是<link>标签最常见的用法。通过它可以将外部的 CSS 文件链接到 HTML 文档中，从而实现对网页的样式设置，包括字体、颜色、布局、边距等方面的样式控制，使网页具有统一且美观的外观。
  • 示例：
<link rel="stylesheet" href="styles.css">

  • 上述代码中，rel="stylesheet"表示链接的是一个样式表，href="styles.css"指定了外部 CSS 文件的路径和文件名。这样，浏览器在加载 HTML 页面时，会根据styles.css中的规则来渲染页面元素。
  • 真示例：
  • 完成此示例需要满足以下条件：首先要准备两个文件，一个是html文件，另一个是css文件，并确保两个文件在统一目录下，而且href="styles.css"所指定的文件名必须相同，若因为href="styles.css"中文件的名字不对应，就会造成示例失败的原因。
  • css文件代码内容：
body {font-family: Arial, sans-serif;background-color: lightblue;
}h1 {color: red;text-align: center;
}p {font-size: 18px;line-height: 1.5;
}
  • html文件代码内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS 样式应用示例</title><!-- 引入外部 CSS 样式表 --><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是一个标题</h1><p>这是一段文本内容，将受到 styles.css 中样式的影响。</p>
</body>
</html>
  • 一气呵成

定义页面的图标（Favicon）

  • 用途：用于设置网页在浏览器标签页、书签栏等位置显示的小图标，增强网站的品牌辨识度和用户体验。
  • 示例：
<link rel="shortcut icon" href="favicon.ico">

  • 这里rel="shortcut icon"表示这是一个快捷方式图标，href="favicon.ico"指定了图标文件的路径和文件名（通常为.ico格式，也可以是其他支持的格式如.png等）。
  • 真示例1：
  • 首先准备两个文件，一个是ico的图片文件，或者是png的图片文件，另一个是html的文件，并确保ico文件或png文件要与html文件在同一个目录下，否则不会生效。
  • 这是博主的ico文件，名字叫IDA.ico（若您没有ico文件，您也可以准备一张png文件）由于这里不支持上传ico图片文件，博主只好截图上传。

  • 这是html文件代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="shortcut icon" href="IDA.ico"><title>带有图标示例的网页</title>
</head>
<body><h1>这是一个带有自定义图标的网页</h1>
</body>
</html>
  • 这里的<link rel="shortcut icon" href="IDA.ico">告诉浏览器，该网页的图标文件是IDA.ico。当用户在浏览器中访问这个网页时，浏览器会在标签页的标题左侧显示这个图标。
  • 一气呵成

  •  真示例2：
  • 考虑不同浏览器兼容性的示例
  • 考虑不同浏览器对ico图片文件的兼容性问题。若ico不起作用，则自动换成png，准备两张图片文件，一是ico另一个是png，在准备html代码。就可以解决浏览器兼容性问题了。
  • 以下是代码html（由于现在的浏览器兼容性很强，这个可以不考虑）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>带有图标示例的网页（兼容多种格式）</title><link rel="icon" type="image/x - icon" href="IDA.ico"><link rel="shortcut icon" href="IDA.ico"><link rel="icon" type="image/png" href="favicon.png">
</head>
<body><h1>这是一个带有自定义图标的网页</h1>
</body>
</html>

  • 真示例3：
  • 动态设置图标的示例（通过 JavaScript）
  • 动态切换图片，需要准备两张图片文件，一个html代码文件，并确保三者于同一目录下。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>带有动态图标示例的网页</title><link id="faviconLink" rel="shortcut icon" href="IDA.ico">
</head>
<body><button onclick="toggleFavicon()">切换图标</button><script>function toggleFavicon() {const faviconLink = document.getElementById('faviconLink');const currentHref = faviconLink.href;if (currentHref.includes('IDA.ico')) {faviconLink.href = 'favicon.png';} else {faviconLink.href = 'IDA.ico';}}</script>
</body>
</html>
  •  一气呵成

预加载资源

  • 用途：可以指示浏览器预先加载某些资源，如 CSS 文件、JavaScript 文件、图片等，以便在需要时能够更快地加载和显示，提高页面性能。
  • 示例：
<link rel="preload" href="image.jpg" as="image">

  • 在这个例子中，rel="preload"表示预加载，href="image.jpg"指定要预加载的资源路径，as="image"告诉浏览器预加载的是图片资源，这样浏览器可以提前进行一些优化处理，如缓存等。

  • 真示例1：
  • 简单页面中的图片预加载
  • 准备一张叫favicon的图片，需放在与html文件同目录 。
  • html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="preload" href="favicon.png" as="image"><title>图片预加载示例</title>
</head>
<body><h1>这是一个图片预加载的示例</h1><img src="favicon.png" alt="示例图片">
</body>
</html>

  • 真示例2：
  • 多个资源预加载示例：包含图片和 CSS 文件
  • 需要CSS和HTML还有两张图片，一张作为背景，一张作为加载图片
  • css代码
body {background-color: lightblue;background-image: url(Ikun.png);background-repeat: no-repeat;background-size: cover;
}
  • html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><link rel="preload" href="favicon.png" as="image"><link rel="preload" href="styless.css" as="style"><link rel="preload" href="Ikun.png" as="image"><link rel="stylesheet" href="styless.css"><title>多个资源预加载示例</title>
</head>
<body><h1>这是一个多个资源预加载的示例</h1><img src="favicon.png" alt="示例图片">
</body>
</html>

 真示例3：

JavaScript 与预加载结合的示例：根据条件加载资源

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="preload" href="Ikun.png" as="image"><link rel="preload" href="favicon.png" as="image"><title>JavaScript与预加载结合示例</title>
</head>
<body><h1>这是一个结合JavaScript的预加载示例</h1><button onclick="showImage('Ikun.png')">显示图片1</button><button onclick="showImage('favicon.png')">显示图片2</button><div id="imageContainer"></div><script>function showImage(imageSrc) {const imageContainer = document.getElementById('imageContainer');const img = document.createElement('img');img.src = imageSrc;imageContainer.appendChild(img);}</script>
</body>
</html>

 替代页面版本（如移动版和桌面版）

  • 用途：用于指定页面的不同版本，例如为移动设备提供专门的页面版本，当用户使用移动设备访问时，浏览器可以根据标签的设置加载对应的移动版页面，提供更好的用户体验。
  • 示例：
<link rel="alternate" media="only screen and (max-width: 640px)" href="mobile-page.html">

  • 上述代码中，rel="alternate"表示这是一个替代版本，media="only screen and (max-width: 640px)"指定了适用的媒体条件（这里是屏幕宽度小于等于 640px，通常针对移动设备），href="mobile-page.html"则是移动版页面的链接。当满足条件的设备访问时，会加载mobile-page.html页面。
  • 真示例1：
  • 需要准备两个HTML代码，一个是适合桌面版的HTML，一个是适合移动版的页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="alternate" media="only screen and (max - width: 640px)" href="link8-2.html"><title>桌面版页面</title>
</head>
<body><h1>这是桌面版页面</h1><p>这个页面在大屏幕设备（如桌面电脑）上显示。它可能包含更多的内容或者更复杂的布局。</p><img src="Ikun.png" alt="桌面版图片">
</body>
</html>
  • 这里的<link>标签告诉浏览器，当设备屏幕宽度小于等于 640px 时，应该加载mobile - page.html这个移动版页面。
<!DOCTYPE html>
<html lang="en">
<head><meta charset = "UTF-8"><title>移动版页面</title>
</head>
<body><h1>这是移动版页面</h1><p>这个页面是为小屏幕设备（如手机）设计的，内容更简洁，布局更适合移动设备。</p><img src="Ikun.png" alt="移动版图片">
</body>
</html>
  • 移动版页面的内容可以根据移动设备的特点进行设计，比如简化布局、调整字体大小等，以提供更好的用户体验。

                

定义 RSS 或 Atom 订阅源

  • 用途：如果网站提供了 RSS 或 Atom 格式的内容订阅源，通过标签可以告知用户和浏览器该订阅源的位置，方便用户订阅网站的更新内容。
  • 示例：
<link rel="alternate" type="application/rss+xml" href="rss.xml">

  • 其中，rel="alternate"表示这是一个替代内容，type="application/rss+xml"指定了内容类型为 RSS 格式，href="rss.xml"是 RSS 订阅源文件的路径和文件名。用户可以通过这个链接将网站添加到 RSS 阅读器中，获取网站的最新内容更新。

真示例：

该示例需要准备一个名字叫rss.xml的文件且有一个HTML文件，并且保证两个文件在同一个目录下就可以实现。

这是HTML文件代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 引入 RSS 订阅源 --><link rel="alternate" type="application/rss+xml" href="rss.xml"><title>我的网站</title>
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个包含 RSS 订阅源的网站。你可以通过 RSS 阅读器订阅我们的内容，获取最新的信息。</p><p>点击 <a href="rss.xml">这里</a> 可以查看 RSS 订阅源文件。</p>
</body>
</html>

这是xml文件代码（名字改成rss.xml）

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"><channel><title>我的网站 - 最新消息</title><link>https://www.example.com</link><description>这里是我的网站的最新消息和更新。</description><language>en</language><item><title>文章 1 标题</title><link>https://www.example.com/article1</link><pubDate>Tue, 13 Jan 2025 00:00:00 GMT</pubDate><description>文章 1 的描述信息。</description></item><item><title>文章 2 标题</title><link>https://www.example.com/article2</link><pubDate>Tue, 14 Jan 2025 00:00:00 GMT</pubDate><description>文章 2 的描述信息。</description></item><!-- 更多的 <item> 元素可用于添加更多的文章 --></channel>
</rss>

  • 总之，标签在 HTML 中<link>扮演着重要的角色，通过它可以实现多种功能，提升网页的外观、性能和用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/68110.shtml

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

相关文章

浅谈云计算02 | 云计算模式的演进

浅谈云计算02 | 云计算模式的演进

云计算计算模式的演进 一、云计算计算模式的起源追溯1.2 个人计算机与桌面计算 二、云计算计算模式的发展阶段2.1 效用计算的出现2.2 客户机/服务器模式2.3 集群计算2.4 服务计算2.5 分布式计算2.6 网格计算 三、云计算计算模式的成熟与多元化3.1 主流云计算服务模式的确立3.1.…
阅读更多...
kubernetes第八天

kubernetes第八天

1.RBAC 角色&#xff1a;Role&#xff1a;某个空间的角色&#xff0c;属于局部资源 ClusterRole&#xff1a;整个集群的角色&#xff0c;属于集群资源 查看角色&#xff1a;kubectl get clusterrole 规则 主题&#xff1a;User:用户自定义名称&#xff0c;一般是给人用的 Se…
阅读更多...
微信小程序-Docker+Nginx环境配置业务域名验证文件

微信小程序-Docker+Nginx环境配置业务域名验证文件

在实际开发或运维工作中&#xff0c;我们时常需要在 Nginx 部署的服务器上提供一个特定的静态文件&#xff0c;用于域名验证或第三方平台验证。若此时使用 Docker 容器部署了 Nginx&#xff0c;就需要将该验证文件正确地映射&#xff08;挂载&#xff09;到容器中&#xff0c;并…
阅读更多...
腾讯云AI代码助手编程挑战赛-智能聊天助手

腾讯云AI代码助手编程挑战赛-智能聊天助手

作品简介 本作品开发于腾讯云 AI 代码助手编程挑战赛&#xff0c;旨在体验腾讯云 AI 代码助手在项目开发中的助力。通过这一开发过程&#xff0c;体验到了 AI 辅助编程的高效性。 技术架构 前端: 使用 VUE3、TypeScript、TDesign 和 ElementUI 实现。 后端: 基于 Python 开发…
阅读更多...
计算机视觉算法实战——面部特征点检测

计算机视觉算法实战——面部特征点检测

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ ​​​​​​​​​​​​​​​​​​ 1. 领域介绍✨✨ 面部特征点检测&#xff08;Facial Landmark Detection&#xff09;是计算机视觉中…
阅读更多...
【STM32-学习笔记-8-】I2C通信

【STM32-学习笔记-8-】I2C通信

文章目录 I2C通信Ⅰ、硬件电路Ⅱ、IIC时序基本单元① 起始条件② 终止条件③ 发送一个字节④ 接收一个字节⑤ 发送应答⑥ 接收应答 Ⅲ、IIC时序① 指定地址写② 当前地址读③ 指定地址读 Ⅳ、MPU6050---6轴姿态传感器&#xff08;软件I2C&#xff09;1、模块内部电路2、寄存器地…
阅读更多...
Android SDK下载安装（图文详解）

Android SDK下载安装（图文详解）

安装完sdk&#xff0c;就可以直接使用adb命令了&#xff0c;我们做app自动化测试&#xff0c;也需要sdk环境的依赖。 1. 下载Android SDK 网盘下载地址&#xff1a;https://pan.quark.cn/s/8398e52cefc9 官网下载地址&#xff1a;https://www.androiddevtools.cn/ &#xff08;…
阅读更多...
农业移动式水肥一体机全面解析：开启精准农业新篇章

农业移动式水肥一体机全面解析：开启精准农业新篇章

在当今科技飞速发展的时代&#xff0c;农业领域也迎来了众多创新设备&#xff0c;农业移动式水肥一体机便是其中的佼佼者。它正悄然改变着传统的农业灌溉与施肥模式&#xff0c;为实现精准农业提供了强有力的支持。 一、什么是农业移动式水肥一体机 农业移动式水肥一体机&…
阅读更多...
2008-2020年各省社会消费品零售总额数据

2008-2020年各省社会消费品零售总额数据

2008-2020年各省社会消费品零售总额数据 1、时间&#xff1a;2008-2020年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区、年份、社会消费品零售总额 4、范围&#xff1a;31省 5、指标解释&#xff1a;社会消费品零售总额指企业&#x…
阅读更多...
江科大STM32入门——读写备份寄存器（BKP）实时时钟(RTC)笔记整理

江科大STM32入门——读写备份寄存器（BKP）实时时钟(RTC)笔记整理

wx&#xff1a;嵌入式工程师成长日记 https://mp.weixin.qq.com/s/hDk7QaXP8yfYIj1gUhtMrw?token1051786482&langzh_CNhttps://mp.weixin.qq.com/s/hDk7QaXP8yfYIj1gUhtMrw?token1051786482&langzh_CN RTC是一个独立的定时器&#xff0c;BKP并不能完全掉电不丢失&am…
阅读更多...
GitLab CI/CD使用runner实现自动化部署前端Vue2 后端.Net 7 Zr.Admin项目

GitLab CI/CD使用runner实现自动化部署前端Vue2 后端.Net 7 Zr.Admin项目

1、查看gitlab版本 建议安装的runner版本和gitlab保持一致 2、查找runner 执行 yum list gitlab-runner --showduplicates | sort -r 找到符合gitlab版本的runner&#xff0c;我这里选择 14.9.1版本 如果执行出现找不到下载源&#xff0c;添加官方仓库 执行 curl -L &quo…
阅读更多...
MySQL解压版（保姆级教程）

MySQL解压版（保姆级教程）

文章目录 1. 下载MySQL2. 解压压缩包3. 添加环境变量4. 创建配置文件5. 启动管理员模式下的CMD6. 重启mysql7. 检查服务是否成功启动8. 可能遇见的错误&#x1f3af; 数据目录未正确初始化&#x1f3af; MySQL服务已存在但路径错误&#x1f3af; 端口被占用&#x1f3af; MySQL…
阅读更多...
人工智能实验（四）-A*算法求解迷宫寻路问题实验

人工智能实验（四）-A*算法求解迷宫寻路问题实验

零、A*算法学习参考资料 1.讲解视频 A*寻路算法详解 #A星 #启发式搜索_哔哩哔哩_bilibili 2.A*算法学习网站 A* 算法简介 一、实验目的 熟悉和掌握A*算法实现迷宫寻路功能&#xff0c;要求掌握启发式函数的编写以及各类启发式函数效果的比较。 二、实验要求 同课本 附录…
阅读更多...
【Vue实战】Vuex 和 Axios 拦截器设置全局 Loading

【Vue实战】Vuex 和 Axios 拦截器设置全局 Loading

目录 1. 效果图 2. 思路分析 2.1 实现思路 2.2 可能存在的问题 2.2.1 并发请求管理 2.2.2 请求快速响应和缓存带来的问题 3. 代码实现 4. 总结 1. 效果图 如下图所示&#xff0c;当路由变化或发起请求时&#xff0c;出现 Loading 等待效果&#xff0c;此时页面不可见。…
阅读更多...
Github配置ssh key，密钥配对错误怎么解决？

Github配置ssh key，密钥配对错误怎么解决？

解决密钥配对的方案如下&#xff1a; 方法一、最有效的方案&#xff1a;重新配置&#xff0c;验证 SSH 密钥是否已添加到 GitHub 确保您的 SSH 密钥已经正确添加到了 GitHub 账户中。您可以打开命令行控制台&#xff08;cmd/powerShell都可以&#xff09;&#xff0c;按照以下…
阅读更多...
Java基础知识(六) -- 常用类

Java基础知识(六) -- 常用类

1.包装类 1.1 概述 Java提供了两个类型系统&#xff0c;基本类型与引用类型&#xff0c;使用基本类型在于效率&#xff0c;但当使用只针对对象设计的API或新特性(例如泛型)&#xff0c;那么基本数据类型的数据就需要用包装类来包装。 序号基本数据类型包装类&#xff08;java…
阅读更多...
【Linux】深入理解文件系统(超详细)

【Linux】深入理解文件系统(超详细)

目录 一.磁盘 1-1 磁盘、服务器、机柜、机房 &#x1f4cc;补充&#xff1a; &#x1f4cc;通常网络中用高低电平&#xff0c;磁盘中用磁化方向来表示。以下是具体说明&#xff1a; &#x1f4cc;如果有一块磁盘要进行销毁该怎么办&#xff1f; 1-2 磁盘存储结构 ​编辑…
阅读更多...
【硬件介绍】Type-C接口详解

【硬件介绍】Type-C接口详解

一、Type-C接口概述 Type-C接口特点&#xff1a;以其独特的扁头设计和无需区分正反两面的便捷性而广受欢迎。这种设计大大提高了用户的使用体验&#xff0c;避免了传统USB接口需要多次尝试才能正确插入的问题。Type-C接口内部结构&#xff1a;内部上下两排引脚的设计虽然可能不…
阅读更多...
Linux第二课：LinuxC高级 学习记录day02

Linux第二课：LinuxC高级 学习记录day02

2.4、shell中的特殊字符 2.4.4、命令置换符 或者 $() 反引号&#xff1a;esc下面的按键&#xff0c;英文状态下直接按 功能&#xff1a;将一个命令的输出作为另一个命令的参数 echo 不会认为hostname是一个命令 加上 之后&#xff0c;先执行hostname&#xff0c;拿到主机名…
阅读更多...
图生生AI描述生图：一句话生成蛇年海报素材

图生生AI描述生图：一句话生成蛇年海报素材

2025年春晚吉祥物“巳升升”的亮相&#xff0c;引发了广泛讨论。其整体造型参考甲骨文中的“巳”字&#xff0c;以青绿色为主调&#xff0c;象征春意盎然、蓬勃生机。从头部轮廓、脸颊螺旋形状到五官设计&#xff0c;都蕴含着丰富的传统文化元素。巳升升的亮相&#xff0c;春节…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023