tags: [资源引入]
categories: 重学前端系列笔记
cover: “https://cdn.nlark.com/yuque/0/2019/jpeg/221851/1555489235300-77ec8cfd-2be0-448e-a3d3-9dead9ff2d33.jpeg“

前言

我们在做网站的时候，需要写 JavaScript 和 css 以及引入其他的资源。 css 是可以写 内联样式、嵌入式样式、外部样式。

script

像是 JavaScript 可以使用 src 引入外部 JS 文件

  1. <script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>

但是如果是这样

<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript">
   var time  = new Date();
   console.log(time);
</script>

上面这种写法，引入的文件会将 script 里的内容覆盖，使得里面的代码不生效，我们通常将这种类型的标签，称之为替换型标签 ：凡是替换型元素，都是使用 src 属性来引用文件的

link

像 style 这种非替换型标签，不能使用 src 引入外部文件，就这样我们需要借助 link 标签

<link rel="stylesheet" href="style.css">

img

这个标签的意义是引入外部的图片资源，使用 src 链接，如果没有 src 属性，这个标签将毫无用处

 <img src="/images/temp.jpg" alt="" sizes="" srcset="" width="300px">

上面的代码显示，引入了一个 temp 的图片，并规定了图片的宽， W3C 规定 img 标签，宽高属性如果只给一个，那么将会进行等比例缩放处理
srcset 提供了根据屏幕条件选取图片的能力，但是其实更好 是使用 picture

picture

picture 元素可以根据不同屏幕尺寸选择展示不同尺寸的图片，也是使用 src 链接

<picture>
  <source srcset="image-wide.png" media="(min-width: 600px)">
  <img src="image-narrow.png">
</picture>

它使用 source 元素来指定图片源，并且支持多个图片， picture 标签里包裹 img 是为了兼容，当 不支持 source 或者不支持 picture 的时候， img 作为最后一道屏障， source 标签中的 media 属性跟 @media 具有同样的功能。
同样支持 source 标签的，还有 video、audio 、

video

// 兼容完整版写法
<video controls="controls" >
  <source src="movie.webm" type="video/webm" >
  <source src="movie.ogg" type="video/ogg" >
  <source src="movie.mp4" type="video/mp4">
  你的浏览器暂不支持视频，请更换浏览器查看
</video>
// 普通版写法
<video controls="controls" src="movie.mp4"></video>

如果是需要兼容老版本的浏览器，需要加上 object、embed 标签，其中 <object> 使用 data 属性链接资源 ，而 embed 是使用 src 链接资源

audio

写法跟上面的差不多

// 兼容完整版写法
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <p>你的平台不支持音频，请更换浏览器再查看</p>
</audio>
// 普通版写法
<audio controls="controls" src="movie.mp3"></audio>

iframe

这个标签可以将页面完整的引入到当前页面

    <iframe>
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            <p>故人心尚永，故人心不现</p>
        </body>
        </html>
    </iframe>