link_linkedlist - CSDN
精华内容
参与话题
  • link标签的主要用法

    千次阅读 2019-02-09 22:09:32
    link的rel属性有很多的值,不同的值代表了外部资源与本html文档的关系。 rel属性的值可以是: alternate author canonical dns-prefetch external help icon licence manifest modulepreload next ...

    link的rel属性有很多的值,不同的值代表了外部资源与本html文档的关系。

    rel属性的值可以是:

    • alternate
    • author
    • canonical
    • dns-prefetch
    • external
    • help
    • icon
    • licence
    • manifest
    • modulepreload
    • next
    • pingback
    • prefetch
    • preload
    • prev
    • search
    • shortlink
    • sidebar
    • stylesheet
    • tag

    1、连接外部的样式表,这个是最常用的

    <link rel="stylesheet" type="text/css" href="*.css"/>指被link链接的css文档是本文档的样式描述文件。

    2、链接一个外部的icon用于浏览器的栏目图标和收藏夹图标,地址栏最前面的小图标和收藏夹图标

    如图中的图标,<link rel="icon" href="/favicon.ico" >

    关于rel="icon"属性,主要用途就是如上所示。但是对于IOS的图标,icon属性无效,需使用 apple-touch-icon and apple-touch-startup-image 。

    <link rel="apple-touch-icon-precomposed" sizes="114x114"
          href="apple-icon-114.png" type="image/png">

    另外rel="icon" 同时可以附加sizes="32x32"等属性,确保浏览器只会把目标图片解析成32x32的大小。当然,我们可以提供多种大小的图片,浏览器会自行选择最合适的图片。

    例如:<link rel="icon" sizes="16x16" href="/favicon.ico" >

               <link rel="icon" sizes="32x32" href="/favicon.ico" >

               <link rel="icon" sizes="128x128" href="/favicon.ico" >

    关于href指向的资源,图标必须是ico图片,ico图片的制作过程如下:

    首先准备一张png图片,再利用在线的转换工具即可转换称为ico图片。

    3、rel="alternate"可以定义另外一个版本的文档,可以是Pdf,另外一种语言,另外一种css样式,如下所示

    <link rel="alternate" href="url"  >,方便了浏览器插件(例如翻译插件,下载插件)和搜索引擎的搜索。

    4、rel="author license",规定一些作者和版权相关的信息。例如,

    <link rel="author license" href="url"  >,url所指向的就是这些信息所在的文档。

    5、rel="canonical",用来定义一个权威的版本,保证内容的正确性。

    <link rel="canonical" href="url"  >,url所指向的html文档,即使权威版本,内容更加正确,方便搜索引擎的分析。

    6、rel="preconnect"或者rel="prefetch"或者rel="preload"等都是用于加快网页的一个加载速度的类型,只有部分浏览器实现了。

    preconnect是告知浏览器提前连接指定的url,以便在后面需要使用该连接的时候,连接已经形成,节省了时间。

    prefetch是告知浏览器立刻取来url所指向的资源,这个适用于该资源立刻需要被用户使用。

    preload是告知浏览器预加载一些url指定的资源,这些资源可能立刻会被使用。

    通过预加载,将一些后续需要使用的资源提前下载下来,虽然会导致一开始网页加载的时候,空白一段时间,但是却可以换来后续用户使用体验的增加,使用户在操作网页的时候,不会中途因为等待资源下载而等待。

    在上面三种类型之中,preload更加适用于预加载资源。

    下面将是一些preload的常用的预加载资源的方式:

    preload可以预先加载如下这些资源, 并通过as属性指定如下这些资源类型,并通过type类型指定这些资源中的子资源,例如as="vedio" type="vedio/mp4"

    • audio: Audio file.
    • document: An HTML document intended to be embedded inside a <frame> or <iframe>.
    • embed: A resource to be embedded inside an <embed> element.
    • fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
    • font: Font file.
    • image: Image file.
    • object: A resource to be embedded inside an <embed> element.
    • script: JavaScript file.
    • style: Stylesheet.
    • track: WebVTT file.
    • worker: A JavaScript web worker or shared worker.
    • video: Video file.

    例1:提前下载好script,之后再执行,有可以下载css,font等等

    <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>

     

    例2:提前下载视频资源如下,(当然,还可以提前下载好图片等等,只需要as="image" type="image/png")

    <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>

     

    8、rel属性配合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>

    浏览器的支持

      Desktop Mobile
      Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet
    Basic support Full support1 Full supportYes Full support1 Full supportYes Full supportYes Full supportYes Full supportYes Full supportYes Full supportYes Full support4 Full supportYes Full supportYes Full supportYes
    Alternative stylesheets. ? ? Full support3 ? Full supportYes ? ? ? ? Full support4 ? ? ?
    dns-prefetch

    Experimental

    Full support46 ? Full support3 ? ? ? Full support46 Full supportYes ? Full support4 ? ? Full supportYes
    manifest

    ExperimentalNon-standard

    No supportNo ? ? ? ? ? Full support39 Full support39 ? ? ? ? Full support4.0
    modulepreload

    Experimental

    Full support66 ? ? ? Full support53 ? Full support66 Full support66 ? ? Full support53 ? ?
    noopener

    Non-standard

    Full support49 No supportNo Full support52

    Notes

    Open
    No supportNo Full support36 Full support10.1 Full support49 Full support49 No supportNo Full support52

    Notes

    Open
    Full support32 Full support10.3 Full support5.0
    preconnect

    Experimental

    Full support46 No supportNo Full support39

    Notes

    Open
    No supportNo ? No supportNo Full support46 Full support42 No supportNo Full support39

    Notes

    Open
    ? No supportNo Full support4.0
    prefetch

    Experimental

    ? ? ? ? ? ? ? ? ? ? ? ? ?
    preload

    Experimental

    Full support50 ? No support56 — 57

    Notes

    Open
    ? ? ? Full support50 Full support50 ? No support56 — 57

    Notes

    Open
    ? ? Full support5.0
    prerender

    Experimental

    ? ? ? ? ? ? ? ? ? ? ? ? ?

     

    展开全文
  • HTML中的标签——link标签

    千次阅读 2019-03-29 14:15:21
    link标签:链接一个外部样式表,只用在head标签里面,但是可以用多次,形式如下: &lt;head&gt; &lt;link rel=“stylesheet” type=“text/css” href=“theme.css” /&gt; &lt;/head&gt; ...

    link标签:链接一个外部样式表,只用在head标签里面,但是可以用多次,形式如下:
    <head>
    <link rel=“stylesheet” type=“text/css” href=“theme.css” media=“all” />
    </head>
    rel:规定当前文档与被链接文档之间的关系,stylesheet是样式表的意思。
    type:规定被链接文档的 MIME 类型。
    href:规定被链接文档的位置。
    补充一个:
    media:设置或获取媒体类型。 all 就表示all所有媒体类型的样式
    更详细的用法如链接所示:http://www.w3school.com.cn/tags/tag_link.asp

    展开全文
  • ln(即link) 的功能是为某一个文件在另外一个位置建立一个同步的链接。有两种链接方式,一种是硬链接(hard link),另一种是符号链接(symbolic link),又称软链接。硬链接和原有文件是存储在同一物理地址的两个...

    创建软链接

    ln  -s  [源文件或目录]  [目标文件或目录]

    例如:

    当前路径创建test 引向/var/www/test 文件夹 

    ln –s  /var/www/test  test

    创建/var/test 引向/var/www/test 文件夹 

    ln –s  /var/www/test   /var/test 


    删除软链接

    和删除普通的文件是一样的,删除都是使用rm来进行操作

     rm –rf 软链接名称(请注意不要在后面加”/”,rm –rf 后面加不加”/” 的区别,可自行去百度下啊)

    例如:

    删除test

    rm –rf test

    修改软链接

    ln –snf  [新的源文件或目录]  [目标文件或目录]

    这将会修改原有的链接地址为新的地址

    例如:

    创建一个软链接

    ln –s  /var/www/test   /var/test

    修改指向的新路径

    ln –snf  /var/www/test1   /var/test

    好了,基本上的增加、删除、修改都在这了。
    这里有三点要注意:
    第一,ln命令会保持每一处链接文件的同步性,也就是说,不论你改动了哪一处,其它的文件都会发生相同的变化;
    第二,ln的链接又软链接 和硬链接两种,
             软链接就是ln -s src  dst,它只会在你选定的位置上生成一个文件的镜像,不会占用磁盘空间,
             硬链接ln src  dst,没有参数-s, 它会在你选定的位置上生成一个和源文件大小相同的文件,无论是软链接还是硬链接,文件          都保持同步变化。 
    第三,向一个文件的所有 硬链接都删掉的话文件的内容才会被删掉
    软链接只要删掉了源链接文件,软链接也就失效

    -------------------------我是有深度的分割线------------------------

    如果您想更深入的了解,可以ln –help 查看详细。


    常用的参数:

    -b 删除,覆盖以前建立的链接

    -d 允许超级用户制作目录的硬链接

    -f 强制执行

    -i 交互模式,文件存在则提示用户是否覆盖

    -n 把符号链接视为一般目录

    -s 软链接(符号链接)

    -v 显示详细的处理过程


    展开全文
  • link与@import的区别

    千次阅读 2018-11-19 10:26:00
    两者都是外部引入CSS的方式,那么二者有什么...加载页面时,link引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后加载; link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,故老版...

    两者都是外部引入CSS的方式,那么二者有什么区别呢?

    1. @import是CSS提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS,rel连接属性等;
    2. 加载页面时,link引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后加载;
    3. link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,故老版本浏览器(IE5之前)不能识别;
    4. 可以通过JS操作DOM,来插入link标签改变样式;由于DOM方法是基于文档的,无法使用@import方式插入样式;

    建议使用link的方式引入CSS

    展开全文
  • 什么是link标签?

    千次阅读 2018-06-17 06:23:10
    什么是link标签?link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标(favicon.ico),&lt;link&gt; 标签最常见的用途是链接外部样式表,外部资源。link实例&lt;link...
  • npm link 命令的作用浅析

    万次阅读 2017-12-26 09:16:09
    npm link命令可以将一个任意位置的npm包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该npm包。 那么,当运行npm link时发生了什么? 简要地讲,这个命令主要做了两件事: 为npm包目录创建软链接...
  • Link2019错误排错

    千次阅读 2019-08-02 09:40:06
    参考:https://www.cnblogs.com/thisway/p/5497200.html 另外包括未添加对应依赖项。
  • link标签大全

    千次阅读 2019-08-12 20:47:34
    link rel="stylesheet" href="https://example.com/styles.css"> //链接到一个CSS层叠样式表 <link rel="canonical" href=...
  • 初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 在react开发中,router是必不可少的,例如我们做登录功能时,登录成功之后,需要对页面重定向,这该...
  • Chainlink预言机基本原理(一)

    千次阅读 2020-10-16 16:56:18
    Chainlink预言机基本原理(一) 作者:团长 本文我们来从技术上简述一下Chainlink的基本原理。如果用最短的一句话解释什么是Chainlink,可以说Chainlink一个去中心化的预言机项目,所以为了理解Chainlink的工作原理...
  • link_libraries 和 target_link_libraries 区别

    万次阅读 2019-01-17 15:19:44
    在cmake语法中,link_libraries和target_link_libraries是很重要的两个链接库的方式,虽然写法上很相似,但是功能上有很大区别: 1,link_libraries用在add_executable之前,target_link_libraries用在add_...
  • html5使用link引入外部css

    万次阅读 2016-07-21 19:36:40
    html5/link/css
  • GD Link version

    万次阅读 2017-12-07 17:23:31
    GD-Link Programmer软件版本
  • CameraLink通信接口的一般定义

    万次阅读 2013-10-08 16:52:39
    CameraLink是从Channel link技术上发展而来的,基于视频应用发展而来的通信接口,在机器视觉系统中广泛应用。 2000年10月美国NI、摄像头供应商和其他图像采集公司联合推出了CameraLink协议,CameraLink协议是一个...
  • Communications link failure的解决办法

    万次阅读 2012-10-30 16:52:45
    使用Connector/J连接MySQL数据库,程序运行较...Communications link failure,The last packet successfully received from the server was *** millisecond ago.The last packet successfully sent to the server was
  • 总结了include_directories,link_directories,link_libraries和target_link_libraries的作用,并以实例说明它们在CMakeLists.txt中的角色。尤其是后面三个参数,比较相似,容易弄混。INCLUDE_DIRECTORIES(添加...
  • 本文介绍Excel link插件的安装,实现Excel与Matlab的互联。 Excel link是在Microsoft Windows环境下实现Microsoft Excel和MATLAB进行交互的插件。 使用Excel link时,不必脱离Excel环境。Excel link提供11条功能...
  • vue,router-link传参以及参数的使用

    万次阅读 2017-05-18 10:13:09
    1.路径:...跳转(id是参数) 使用:this.$route.query.id ...跳转(id是参数) 路由: 使用:this.$route.query.id(这个id给上图路由的配置有关) this.$route是一个数组,里面包含路由的
  • 由于a link是disabled属性设置成true,只是颜色变灰色但是还能提交.要想不能提交,可以删除href属性: disable link function disableLink(link) { //link.disabled = true; link.setAttribute("disabled",true); ...
  • https://blog.csdn.net/qq_27093465/article/details/59121608
1 2 3 4 5 ... 20
收藏数 1,242,870
精华内容 497,148
关键字:

link