link标签学习(2022-1-9)

从善如登
193 阅读2分钟

link标签

基本介绍

link标签是用来引入外部资源文件的，即建立页面文档与外部资源文件的关系，它属于页面文档元数据信息的一种，所以通常会将其放置到head头部标签中,link标签常用来链接外部样式文件以及自定义图标文件,link标签常用的重要的属性有三个：

属性(property)属性值(value)作用(introduce)
relstylesheet / shortcut icon指明页面文档与链接文档(CSS文件/icon图标文件)的关系
hrefurl值(绝对路径 / 相对路径)指明链接文档的url地址
typeMIME值(text/css 、 image / x-icon)指明链接文档的媒体类型

示例代码:

   <!DOCTYPE HTML>
   <html lang="zh-cn">
       <head>
           <meta charset="utf-8" />
           <meta name="author" content="Mr.杨" />
           <meta name="description" 
                 content="这个网页是用来描述link标签的相关内容，也用来记录以下自己的学习，坚持每天认真的深入的学习一个标签" />
           <meta name="keywords" content="link,HTML标签,引入CSS文件,引入自定义图标" />
           <!--引入外部css文件-->
           <link rel="stylesheet" href="css文件的web或本地地址" type="text/css" />
           <!--引入外部icon图标文件-->
           <link rel="shortcut icon" href="icon文件的web或者本地地址" type="image/x-icon" />
           <title>link标签学习</title>
       </head>
       <body></body>
   </html>

扩展相关知识

  1. MIME类型。 在学习link时,发现有的人代码里带type属性,有些人不带,但是带和不带的区别在哪里，自己一直也是知之甚少，于是今天看了一下文档。
    MIME类型是很重要的,浏览器会根据MIME类型来确定处理URL的,当我们不指定MIME值时(即不写type属性),那么浏览器会依据其默认值进行处理。
    MIME的语法很简单：不区分大小写，但是尽量使用小写，保证HTML页面的一致性。 type/subtype
    type类型指的是文件的类型，它分为两大类独立类型和多类型。

    MIMI独立类型(type)概述(introduce)子类型(subtype)
    text文本文件类型plain、html、css、javascript
    image图像类型jpeg、png、gif、svg+html、x-icon
    audio音频文件webm、ogg、wav
    vedio视频文件webm、ogg
    application二进制数据文件octet-stream、xml、xhtml+xml、pdf
    MIMI多类型(type)概述(introduce)子类型(subtype)
    multipart二进制数据文件类型,用于HTML表单数据form-data

    总结：

  • 在不为link标签指定type属性时，浏览器按照其默认值进行处理，如果是独立类型文本文件，那么按照默认值text/plain处理(CSS文件和JS文件除外,具体原因在下一段，别急)，即未知的文本文件，浏览器对此直接展示。对于独立类型二进制文件，按照application/octet-stream进行处理，即未知的应用程序文件，浏览器一般不会自动执行或询问执行。
  • "在html4版本的年代,type属性是必要的,但html5版本,javaScript的type属性默认就是text/javascript,css的type属性默认就是text/css,所以不是必须的;当然只有默认type是text/javascript和text/css的时候可以不用写type属性,但是如果一旦要指定必须保证是有效的MIME值。"
  1. 制作自定义图标 注意：为了我保证icon图标在所有的浏览器上都能正常显示，建议将favicon.icon放到根目录下。
avatar
文章
阅读
粉丝