HTML中link的用法

去皮卡多  金牌会员 | 2025-1-14 19:48:20 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 908|帖子 908|积分 2724

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

对于本人而言，这篇条记内容有些扩展了，有些还未学到的也用上了，但是大概可以使用的明白，坚持下去，相信一定可以建设一个稳固的根基。
该文章为个人成长学习条记，仅用于学习研究，感谢您的观看。
内容简介

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

   

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

  

  • 上述代码中，rel="stylesheet"表现链接的是一个样式表，href="styles.css"指定了外部 CSS 文件的路径和文件名。如许，欣赏器在加载 HTML 页面时，会根据styles.css中的规则来渲染页面元素。
  • 真示例：
  • 完成此示例需要满足以下条件：起首要准备两个文件，一个是html文件，另一个是css文件，并确保两个文件在同一目录下，而且href="styles.css"所指定的文件名必须相同，若因为href="styles.css"中文件的名字不对应，就会造成示例失败的原因。
  • css文件代码内容：
  1. body {
  2.   font-family: Arial, sans-serif;
  3.   background-color: lightblue;
  4. }
  6. h1 {
  7.   color: red;
  8.   text-align: center;
  9. }
  11. p {
  12.   font-size: 18px;
  13.   line-height: 1.5;
  14. }
复制代码


  • html文件代码内容：
  1. <!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）

   

  • 用途：用于设置网页在欣赏器标签页、书签栏等位置显示的小图标，增强网站的品牌辨识度和用户体验。
  • 示例：
   
  1. <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文件代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="shortcut icon" href="IDA.ico">
  6.     <title>带有图标示例的网页</title>
  7. </head>
  8. <body>
  9.     <h1>这是一个带有自定义图标的网页</h1>
  10. </body>
  11. </html>
复制代码


  • 这里的<link rel="shortcut icon" href="IDA.ico">告诉欣赏器，该网页的图标文件是IDA.ico。当用户在欣赏器中访问这个网页时，欣赏器会在标签页的标题左侧显示这个图标。
  • 一气呵成
  

  



  •  真示例2：
  • 考虑不同欣赏器兼容性的示例
  • 考虑不同欣赏器对ico图片文件的兼容性问题。若ico不起作用，则主动换成png，准备两张图片文件，一是ico另一个是png，在准备html代码。就可以办理欣赏器兼容性问题了。
  • 以下是代码html（由于如今的欣赏器兼容性很强，这个可以不考虑）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>带有图标示例的网页（兼容多种格式）</title>
  6.     <link rel="icon" type="image/x - icon" href="IDA.ico">
  7.     <link rel="shortcut icon" href="IDA.ico">
  8.     <link rel="icon" type="image/png" href="favicon.png">
  9. </head>
  10. <body>
  11.     <h1>这是一个带有自定义图标的网页</h1>
  12. </body>
  13. </html>
复制代码



  • 真示例3：
  • 动态设置图标的示例（通过 JavaScript）
  • 动态切换图片，需要准备两张图片文件，一个html代码文件，并确保三者于同一目录下。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>带有动态图标示例的网页</title>
  6.     <link id="faviconLink" rel="shortcut icon" href="IDA.ico">
  7. </head>
  8. <body>
  9.     <button onclick="toggleFavicon()">切换图标</button>
  10.     <script>
  11.         function toggleFavicon() {
  12.             const faviconLink = document.getElementById('faviconLink');
  13.             const currentHref = faviconLink.href;
  14.             if (currentHref.includes('IDA.ico')) {
  15.                 faviconLink.href = 'favicon.png';
  16.             } else {
  17.                 faviconLink.href = 'IDA.ico';
  18.             }
  19.         }
  20.     </script>
  21. </body>
  22. </html>
复制代码


  •  一气呵成

   预加载资源

     

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

   

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



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



  • 真示例2：
  • 多个资源预加载示例：包含图片和 CSS 文件
  • 需要CSS和HTML尚有两张图片，一张作为背景，一张作为加载图片
  • css代码
  1. body {
  2.     background-color: lightblue;
  3.     background-image: url(Ikun.png);
  4.     background-repeat: no-repeat;
  5.     background-size: cover;
  6. }
复制代码


  • html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="preload" href="favicon.png" as="image">
  6.     <link rel="preload" href="styless.css" as="style">
  7.     <link rel="preload" href="Ikun.png" as="image">
  8.     <link rel="stylesheet" href="styless.css">
  9.     <title>多个资源预加载示例</title>
  10. </head>
  11. <body>
  12.     <h1>这是一个多个资源预加载的示例</h1>
  13.     <img src="favicon.png" alt="示例图片">
  14. </body>
  15. </html>
复制代码

 真示例3：
JavaScript 与预加载结合的示例：根据条件加载资源
html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="preload" href="Ikun.png" as="image">
  6.     <link rel="preload" href="favicon.png" as="image">
  7.     <title>JavaScript与预加载结合示例</title>
  8. </head>
  9. <body>
  10.     <h1>这是一个结合JavaScript的预加载示例</h1>
  11.     <button onclick="showImage('Ikun.png')">显示图片1</button>
  12.     <button onclick="showImage('favicon.png')">显示图片2</button>
  13.     <div id="imageContainer"></div>
  14.     <script>
  15.         function showImage(imageSrc) {
  16.             const imageContainer = document.getElementById('imageContainer');
  17.             const img = document.createElement('img');
  18.             img.src = imageSrc;
  19.             imageContainer.appendChild(img);
  20.         }
  21.     </script>
  22. </body>
  23. </html>
复制代码
    替换页面版本（如移动版和桌面版）

     

  • 用途：用于指定页面的不同版本，比方为移动设备提供专门的页面版本，当用户使用移动设备访问时，欣赏器可以根据标签的设置加载对应的移动版页面，提供更好的用户体验。
  • 示例：
   
  1. <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，一个是得当移动版的页面
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="alternate" media="only screen and (max - width: 640px)" href="link8-2.html">
  6.     <title>桌面版页面</title>
  7. </head>
  8. <body>
  9.     <h1>这是桌面版页面</h1>
  10.     <p>这个页面在大屏幕设备（如桌面电脑）上显示。它可能包含更多的内容或者更复杂的布局。</p>
  11.     <img src="Ikun.png" alt="桌面版图片">
  12. </body>
  13. </html>
复制代码


  • 这里的<link>标签告诉欣赏器，当设备屏幕宽度小于等于 640px 时，应该加载mobile - page.html这个移动版页面。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset = "UTF-8">
  5.     <title>移动版页面</title>
  6. </head>
  7. <body>
  8.     <h1>这是移动版页面</h1>
  9.     <p>这个页面是为小屏幕设备（如手机）设计的，内容更简洁，布局更适合移动设备。</p>
  10.     <img src="Ikun.png" alt="移动版图片">
  11. </body>
  12. </html>
复制代码


  • 移动版页面的内容可以根据移动设备的特点举行设计，比如简化布局、调整字体大小等，以提供更好的用户体验。
                  
  
   定义 RSS 或 Atom 订阅源

     

  • 用途：如果网站提供了 RSS 或 Atom 格式的内容订阅源，通过标签可以告知用户和欣赏器该订阅源的位置，方便用户订阅网站的更新内容。
  • 示例：
   
  1. <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文件代码

  1. <!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）

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <rss version="2.0">
  3.   <channel>
  4.     <title>我的网站 - 最新消息</title>
  5.     <link>https://www.example.com</link>
  6.     <description>这里是我的网站的最新消息和更新。</description>
  7.     <language>en</language>
  8.     <item>
  9.       <title>文章 1 标题</title>
  10.       <link>https://www.example.com/article1</link>
  11.       <pubDate>Tue, 13 Jan 2025 00:00:00 GMT</pubDate>
  12.       <description>文章 1 的描述信息。</description>
  13.     </item>
  14.     <item>
  15.       <title>文章 2 标题</title>
  16.       <link>https://www.example.com/article2</link>
  17.       <pubDate>Tue, 14 Jan 2025 00:00:00 GMT</pubDate>
  18.       <description>文章 2 的描述信息。</description>
  19.     </item>
  20.     <!-- 更多的 <item> 元素可用于添加更多的文章 -->
  21.   </channel>
  22. </rss>
复制代码

  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

去皮卡多

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表