17HTML替换型元素：为何link一个css要用href，而引入js要用src？

1.两种引入文件的方案

2.script

3.img和picture

4.video 和 audio

1.两种引入文件的方案

• 链接：使用href引用文件。
• 替换型元素：把文件的内容引入，替换掉自身位置的一类标签，用src引用文件。

2.script

script标签是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。

<script type="text/javascript">
console.log("Hello world!");
</script>

<script type="text/javascript" src="my.js"></script>

3. img和picture

3-1 img

如果不想引入独立文件，可以使用data uri。

 < img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>'/>

3-2 picture

picture元素可以根据屏幕的条件为其中的img元素提供不同的源：

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

4.video 和 audio

4-1 video

<video controls="controls" src="movie.ogg">
</video>

考虑到各家浏览器支持的视频格式不同，可以使用soruce解决。

<video controls="controls" >
  <source src="movie.webm" type="video/webm" >
  <source src="movie.ogg" type="video/ogg" >
  <source src="movie.mp4" type="video/mp4">
  You browser does not support video.
</video>

4-1 audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <p>You browser does not support audio.</p >
</audio>