• HTML中link标签的那些属性


    在HTML中, link 标签是一个自闭合元素,通常位于文档的 head 部分。它用于建立与外部资源的关联,如样式表、图标等。 link 标签具有多个属性,其中 rel href 是最常用的。

     

    rel 属性定义了当前文档与链接资源之间的关系。常见的 rel 属性值有:

    - stylesheet :表示链接到一个外部CSS样式表。
    - icon :表示链接到网站的图标,如favicon。

     

    href 属性用于指定链接资源的URL。


    一个典型的 link 标签示例是:

    复制代码
    DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>My Websitetitle>
      
      <link rel="stylesheet" href="styles.css">
      
      <link rel="icon" href="favicon.ico">
    head>
    <body>
      <h1>Link!h1>
      <p>这是一段link的介绍。p>
    body>
    html>
    复制代码

    在这个示例中,我们使用了两个 link 标签。第一个 link 标签将HTML文档与外部的CSS样式表 styles.css 关联起来,用于定义页面的样式。第二个 link 标签将HTML文档与网站图标 favicon.ico 关联起来,当用户在浏览器中打开这个网站时,会显示这个图标。

     



    当然, link 标签还有其他属性和用途,下面列举了一些常见的属性和用例:

    1. type :该属性用于指定链接资源的MIME类型。例如,当链接到一个CSS样式表时,可以指定其类型为 text/css 。大多数情况下,浏览器可以自动识别资源类型,所以 type 属性不是必需的。示例:

    <link rel="stylesheet" href="styles.css" type="text/css">

     

    2. media :该属性允许您指定样式表适用于哪些媒体类型。例如,您可以创建专门针对打印的样式表,当用户打印页面时使用。示例:

    <link rel="stylesheet" href="print.css" media="print">

     

    3. sizes :当使用 link 标签链接到多个尺寸的图标时,可以使用 sizes 属性指定图标的大小。这对于根据设备显示不同大小图标的情况很有用。示例:

    <link rel="icon" href="icon-48x48.png" sizes="48x48">
    <link rel="icon" href="icon-96x96.png" sizes="96x96">

     

    4. crossorigin :当链接到跨域资源时,可以使用 crossorigin 属性指定资源的CORS(跨源资源共享)设置。示例:

    <link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">

     

    5. integrity :该属性用于确保外部资源的完整性,可以与 crossorigin 属性一起使用。通过为资源提供一个基于内容的哈希值(如SHA-256),您可以确保资源未被篡改。示例:

    <link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integrity="sha256-base64-encoded-hash">

     

    6. preload : rel="preload" 可以用于提前加载重要的资源,例如字体、图片或脚本。这可以优化页面加载性能。示例:

    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

     

    这些是 link 标签的一些常见属性和用途。

     


    除了前面提到的, rel 还有更多的属性值:

    1. alternate :使用 rel="alternate" 可以为文档提供替代版本,例如不同语言的页面或适用于不同设备的页面。示例:

    <link rel="alternate" hreflang="es" href="https://link.com/es/a">
    <link rel="alternate" media="only screen and (max-width: 640px)" href="https://link.com/mobile/a">

     

    2. dns-prefetch :通过 rel="dns-prefetch" 可以预先解析域名,以减少DNS查找时间并加快资源加载速度。示例:

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

     

    3. preconnect :与 dns-prefetch 类似, rel="preconnect" 可以预先建立连接到第三方资源的TCP连接,减少建立连接所需的时间。示例:

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

     

    4. prefetch :使用 rel="prefetch" 可以预先获取并缓存资源,以便在后续页面中使用。这对于预加载页面中可能用到的资源很有用。示例:

    <link rel="prefetch" href="pre-page.html">

     

    5. canonical :使用 rel="canonical" 可以为搜索引擎提供一个页面的规范URL,有助于避免重复内容问题。示例:

    <link rel="canonical" href="https://link.com/a/post">

     

    6. license :使用 rel="license" 可以指定文档的许可证URL。示例:

    <link rel="license" href="https://link.org/licenses/by/4.0/">

     

    7. manifest :使用 rel="manifest" 可以将Web应用的清单文件(通常是JSON格式)链接到HTML文档。清单文件包含了Web应用的元数据,如名称、描述、图标等。示例:

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

     

    请注意,不同的浏览器对于这些属性和功能的支持程度可能会有所不同。建议在使用新功能时查阅相关文档,以确保兼容性和功能性。

  • 相关阅读:
    Drools(8):WorkBench使用
    【C++】string类模拟实现上篇(附完整源码)
    LiveNVR监控流媒体Onvif/RTSP功能-支持海康摄像头海康NVR通过EHOME协议ISUP协议接入分发视频流或是转GB28181
    MyBatis的使用
    手把手从零开始训练YOLOv8改进项目(官方ultralytics版本)教程
    Arcgis中创建自定义脚本工具
    设计模式之策略模式
    两地三中心部署
    java授权码方案 软件实现时间授权 离线授权 夏末版
    Linux学习-28-用户间切换相关命令
  • 原文地址:https://www.cnblogs.com/ronaldo9ph/p/17370319.html