精华内容
下载资源
问答
  • Link标签有两个作用 一是定义文档与外部资源的关系、二是链接样式表,下面有个示例,大家可以参考下
  • 在CSS中,link里 的rel="st 在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。...link rel="stylesheet" type=...

    在CSS中,link里 的rel="st

    在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。

    rel是Relations的缩写,指关联到一个stylesheet(样式表单)。

    注释:此元素只能存在于 head 部分,不过它可出现任何次数。

    在 HTML 中,<link> 标签没有结束标签。

    链接文件的名称 href="1.css"
    文件的类型 type="text/css"
    文件的属性 rel="stylesheet"

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

    1  内联式样式表
    行样式<div style="color:#000;"></div>
    只能操作专1个标签,细节灵活
    2  嵌入式样式表
    <head>
    <style>
    div{color:#000;}
    </style>
    </head>
    3  引用式属样式表
    <head>
    <link href="css.css" rel="stylesheet" type="text/css" />
    </head>

    展开全文
  • 整条语句的含义是: ...rel="stylesheet"表示:调用的是一种样式。告诉浏览器你将采用一个样式表文件简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理 type="text/css" 表示:就具体...

    整条语句的含义是:

    调用一个外部的CSS样式文件。他是通过<link/>这个标签来调用的。
    然后, href="css/index.css" 表示外部样式文件的路径,

    rel="stylesheet"表示:
    调用的是一种样式。告诉浏览器你将采用一个样式表文件
    简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理
    type="text/css" 表示:
    就具体说明调用样式的文件类型为CSS样式!
     
     
     
     
    另一种说法~有空可以看看,其实都差不多。
    html中link标记允许当前文档和外部文档之间建立连接,但是只能在head标签里面用。href设置或获取目标 URL ,rel设置或获取对象和链接目的的关系,type设置或获取对象的 MIME 类型,media设置或获取媒体类型。 
    all 就表示all所有媒体类型的样式

     

    转载于:https://www.cnblogs.com/sui776265233/p/9437467.html

    展开全文
  • rel="stylesheet"表示调用的是一种样式。告诉浏览器你将采用一个样式表文件简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理 最后,type="text/css" 就具体说明调用样式的文件类型为CSS样式! 另
    整条语句的意思就是:
    调用一个外部的CSS样式文件。他是通过<link/>这个标签来调用的。
    然后, href="css/index.css" 表示外部样式文件的路径,
    rel="stylesheet"表示调用的是一种样式。告诉浏览器你将采用一个样式表文件
    简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理
    最后,type="text/css" 就具体说明调用样式的文件类型为CSS样式!
    另一种说法~有空可以看看,其实都差不多。
    html中link标记允许当前文档和外部文档之间建立连接,但是只能在head标签里面用。href设置或获取目标 URL ,rel设置或获取对象和链接目的的关系,type设置或获取对象的 MIME 类型,media设置或获取媒体类型。 
    all 就表示all所有媒体类型的样式


    完整一句是这样的<link href="Theme/2010_/Css_/css_.css" rel="stylesheet" type="text/css" media="all" />

     
    
    rel="stylesheet"相关。看过来~~
    展开全文
  • 通过rel="preload"进行内容预加载

    千次阅读 2019-05-08 09:30:47
    link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面...

    <link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。

    基础部分

    标签最常见的应用情形就是被用来加载CSS文件,进而装饰你的页面:
    <link rel="stylesheet" href="styles/main.css">
    

    但是在这里,我们将使用preload作为rel属性的属性值。这种做法将把<link> 元素塞入一个预加载器中,这个预加载器也将用于其他我们所需要的,各种各样的,任意类型的资源。为了完成基本的配置,你还需要通过 href和as 属性指定需要被预加载资源的资源路径及其类型。

    一个简单的例子可能看起来像下面这样

    <head>
      <meta charset="utf-8">
      <title>JS and CSS preload example</title>
    
      <link rel="preload" href="style.css" as="style">
      <link rel="preload" href="main.js" as="script">
    
      <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
      <h1>bouncing balls</h1>
      <canvas></canvas>
    
      <script src="main.js"></script>
    </body>
    

    在这里,我们预加载了CSSJavaScript文件,所以在随后的页面渲染中,一旦需要使用它们,它们就会立即可用。这个例子本身可能有些平淡,但预加载的好处可以更清晰直观的得到展示,在随后的渲染过程中,这些资源得到有效使用。对于更大的文件来说,也是如此。 例如那些在CSS文件中指向的资源,比如字体或是图片;再比如更大的图片和视频文件。

    preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型,将使得浏览器能够:

    • 更精确地优化资源加载优先级。
    • 匹配未来的加载需求,在适当的情况下,重复利用同一资源。
    • 为资源应用正确的内容安全策略。
    • 为资源设置正确的 Accept 请求头。

    哪些类型的内容可以被预加载?

    许多不同类型的内容都可以被预加载,一些主要可用的as 属性值列举如下:

    • audio: 音频文件。
    • document: 一个将要被嵌入到<frame><iframe>内部的HTML文档。
    • embed: 一个将要被嵌入到<embed>元素内部的资源。
    • fetch: 那些将要通过fetchXHR请求来获取的资源,比如一个ArrayBufferJSON文件。
    • font: 字体文件。
    • image: 图片文件。
    • object: 一个将会被嵌入到<embed>元素内的文件。
    • script: JavaScript文件。
    • style: 样式表。
    • track: WebVTT文件。
    • worker: 一个JavaScriptweb workershared worker
    • video: 视频文件。

    包含一个MIME类型节

    <link> 元素可以接受一个type属性。这一属性可以包含该元素所指向资源的MIME类型。在浏览器进行预加载的时候,这个属性值将会非常有用——浏览器将使用type属性来判断它是否支持这一资源,如果浏览器支持这一类型资源的预加载,下载将会开始,否则便对其加以忽略。

    <head>
      <meta charset="utf-8">
      <title>Video preload example</title>
    
      <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
    </head>
    <body>
      <video controls>
        <source src="sintel-short.mp4" type="video/mp4">
        <source src="sintel-short.webm" type="video/webm">
        <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
      </video>
    </body>
    

    在这个实例中,支持MP4格式的浏览器将仅预加载并使用MP4资源,以使得视频播放器的表现尽可能的流畅,或者说,为用户提供更好的响应。而不支持MP4格式的浏览器仍然能够加载视频的WebM版本,但无法体验到预加载带来的良好体验。这个例子展示了预加载机制如何与渐进式增强的哲学进行有机的结合。

    跨域获取

    如果你已经有了一个可以正确工作的CORS设置,那么你也可以同样成功的预加载那些跨域资源,只需要你在<link>元素中设置好crossorigin属性即可。

    一个有趣的情况是,如果你需要获取的是字体文件,那么即使是非跨域的情况下,也需要应用这一属性。因为各种各样的原因,这些获取请求必须使用以匿名模式使用CORS(如果你对其中的细节感兴趣,可以查看Font fetching requirements一文)。

    我们将以这个情况作为一个示例——首先是由于字体文件的加载是预加载方面一个好的用例,其次,这也比真正的配置一个跨域请求的例子要简单许多:

    <head>
      <meta charset="utf-8">
      <title>Web font example</title>
    
      <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
      <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
      <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
      <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
      <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
    
      <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
      <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
      <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
      <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
      <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
    
      <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      ...
    </body>
    

    你可以看到,在这里,我们不仅通过配置type属性提供了一个MIME类型的暗示,我们也提供了一个crossorigin 属性来处理CORS问题。

    包含媒体

    <link>元素有一个很棒的特性是它们能够接受一个media属性。它们可以接受媒体类型或有效的媒体查询作为属性值,这将令你能够使用响应式的预加载!

    让我们来看一个简单的示例:

    <head>
      <meta charset="utf-8">
      <title>Responsive preload example</title>
    
      <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
      <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
    
      <link rel="stylesheet" href="main.css">
    </head>
    <body>
      <header>
        <h1>My site</h1>
      </header>
    
      <script>
        var mediaQueryList = window.matchMedia("(max-width: 600px)");
        var header = document.querySelector('header');
    
        if(mediaQueryList.matches) {
          header.style.backgroundImage = 'url(bg-image-narrow.png)';
        } else {
          header.style.backgroundImage = 'url(bg-image-wide.png)';
        }
      </script>
    </body>
    

    你可以看到我们在<link>元素中包含了一个media属性,因此,当用户在使用较窄屏幕的设备时,较窄的图片将会被预加载,而在较宽的设备上,较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过Window.matchMedia / MediaQueryList 来加以实现。

    这一特性将使另一种情况成为可能——字体在随着页面渲染完成的时候即可使用,减少了FOUT (无样式字体闪烁,flash of unstyled text)问题。

    值得注意的是,这一特特性并不仅限于图片,或其他有着同样类型的文件,还有更多想象空间。比如,你可以在用户仅有较窄的屏幕,CPU和带宽资源较为有限的情况下预加载并展示一个简单的SVG图表,而在用户资源较为充裕的时候再去加载一系列复杂的JavaScript文件以显示一个有交互功能的3D模型。

    脚本化与预加载

    另一项很棒的关于预加载的事情是,如果需要,你可以完全以脚本化的方式来执行这些预加载操作。例如,我们在这里创建一个HTMLLinkElement实例,然后将他们附加到DOM上:

    var preloadLink = document.createElement("link");
    preloadLink.href = "myscript.js";
    preloadLink.rel = "preload";
    preloadLink.as = "script";
    document.head.appendChild(preloadLink);
    

    这意味着浏览器将预加载这个JavaScript文件,但并不实际执行它。

    如果要对其加以执行,在需要的时候,你可以执行:

    var preloadedScript = document.createElement("script");
    preloadedScript.src = "myscript.js";
    document.body.appendChild(preloadedScript);
    

    当你需要预加载一个脚本,但需要推迟到需要的时候才令其执行时,这种方式会特别有用。

    其他资源预加载机制

    还存在一些其他预加载机制,但没有哪个会比<link rel="preload">在大多数情况下更符合你的需要和预期:

    • <link rel="prefetch">已经被许多浏览器支持了相当长的时间,但它是意图预获取一些资源,以备下一个导航/页面使用(比如,当你去到下一个页面时)。这很好,但对当前的页面并没有什么助益。此外,浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。毕竟,当前的页面比下一个页面相对更加重要。
    • <link rel="subresource">Chrome支持了有一段时间,并且已经有些搔到预加载当前导航/页面(所含有的资源)的痒处了。但它有一个问题——没有办法处理所获取内容的优先级(as也并不存在),所以最终,这些资源会以一个相当低的优先级被加载,这使得它能提供的帮助相当有限。
    • 除以上这些意外,还有大量的基于脚本的资源加载器。但这些加载器对于浏览器的加载优先级队列完全束手无策,这也使得他们不得不屈服于同样的性能问题。
    展开全文
  • 整条语句的意思就是:调用一个外部的CSS样式文件。...然后, href="css/index.css" 表示外部样式文件的路径,rel="stylesheet"表示调用的是一种样式。 最后,type="text/css" 就具体说明调用样式的文件类型为CSS样式!
  • <link>标签中的rel="sheetstyle"含义

    千次阅读 2016-09-12 14:13:47
    rel是relationship的英文缩写 stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思 rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表
  • 网页的linke rel="icon"详解 favicon深究

    万次阅读 2014-04-03 16:39:41
    (1)rel属性必须包含一个用空格作分隔符的link类型的列表,所以一个包含两词的link类型不能被遵守标准的浏览器理 解。 (2)“ .ico ”文件类型(一种用于Microsoft Windows 上图标的 光栅 格式)没有一...
  • rel="stylesheet"属性指定将一个样式表立即应用到文档. rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它   通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表 disa
  • boostrap-table.rar

    2020-02-05 10:39:07
    <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <script src="js/jquery.js"> <script src="js/bootstrap.min.js"> <script src=...
  • 然后, href="css/index.css" 表示外部样式文件的路径,rel="stylesheet"表示调用的是一种样式。 最后,type="text/css" 就具体说明调用样式的文件类型为CSS样式! 好处:调用外部样式能达到内容与样式分离的效果...
  • <link rel="shortcut icon" rel="stylesheet" href="favicon.ico" />小图标
  • link 标签中“rel=stylesheet”的作用

    万次阅读 多人点赞 2016-11-29 17:10:37
    最近在用link标签引入外部css文件的时候,忘记加上rel=stylesheet,结果css样式显示不出来,疑惑万分。加上这个css效果就出现了。  那rel=stylesheet又是何方神圣呢?  首先,我们要知道Link标签有两个作用:1. ...
  • link标签的href与 rel=stylesheet是什么意思? 此处是设置CSS样式的,叫做外部格式链接。 rel=“stylesheet” type=“text/css” 是固定写法,不可修改。 href是URL rel是relationship的英文缩写,意思是“关系”; ...
  • rel="alternate" 作用

    千次阅读 2016-04-26 14:07:38
    2. <lik rel="stylesheet" media="screen" href="http://www.home.com/screen.css" /> 首选样式  <link rel="alternate stylesheet" media="print" href="http://www.home.com/print.css" /> 替换样式
  • link标签rel="alternate"属性的作用及用法: 1.链接外部样式表: <link rel="alternate" type="text/css" href="out.css"> rel属性定义当前.html文档与被链接的...link rel="stylesheet" type="text/css" href
  • link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64"> </head> <body>[removed][removed] <div class="container" 0;"> <div class="page-header"> <h1>PopConfirm 演示 ...
  • rel=stylesheet的意思

    千次阅读 2018-01-21 20:24:07
    通常出现在link标签里。 “rel”是relationship的英文缩写,它描述了当前页面与href所指定文档的关系;   “stylesheet”中style是样式的意思,sheet是表格之意,连起来就是样式表的意思;中style是样式的意思...
  • rel='stylesheet' 什么意思?

    千次阅读 2014-06-05 13:02:19
    rel是Relations的所写 指关联到一个stylesheet(样式表单) 只写一个就可以了,由于目前的CSS还不能... 在标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初
  • 与onload处理程序异步加载,该处理程序在加载文件后将rel="preload"切换为rel="stylesheet" 。 < link rel =" preload " href =" style.css " as =" style " onload =" this.rel='stylesheet' " > ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 264,994
精华内容 105,997
关键字:

linkrel="stylesheet"