HTML 替换型元素

一个网页，它是由多个文件构成的，在之前，已经学过了一种引入文件的方案：链接。

另一种引入文件的方式了。替换型元素是把文件的内容引入，替换掉自身位置的一类标签。

script

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

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

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

这个例子中，我们展示了两种 script 标签的写法，一种是直接把脚本代码写在 script 标签之间，另一种是把代码放到独立的 js 文件中，用 src 属性引入。
这两种写法是等效的。这种等效性可以帮助你理解替换型元素的“替换”是怎么一回事

**凡是替换型元素，都是使用 src 属性来引用文件的，**而链接型元素是使用 href 标签的，我们用 link 标签引入 CSS 文件，当然就是用 href 标签啦

style 标签并非替换型元素，不能使用 src 属性

img

的替换型标img 标签的作用是引入一张图片。这个标签是没有办法像 script 标签那样作为非替换型标签来使用的，它必须有 src 属性才有意义。

img 标签可以使用 width 和 height 指定宽度和高度。也可以只指定其中之一。如果从性能的角度考虑，建议你同时给出图片的宽高，因为替换型元素加载完文件后，如果尺寸发生变换，会触发重排。

img 标签还有一组重要的属性，那就是 srcset 和 sizes，它们是 src 属性的升级，这两个属性的作用是在不同的屏幕大小和特性下，使用不同的图片源。

picture

picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源，它的基本用法如下

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

picture 元素的设计跟 audio 和 video 保持了一致（稍后我会为你讲解这两个元素），它跟 img 搭配 srcset 和 sizes 不同，它使用 source 元素来指定图片源，并且支持多个。
这里的 media 属性是 media query，跟 CSS 的 @media 规则一致。

video

video 标签跟 img 标签类似，也是使用 src 属性来引入源文件的，不过，我想应该是考虑到了各家浏览器支持的视频格式不同，现在的video 标签跟 picture 元素一样，也是提倡使用 source 的。

<video controls="controls" src="movie.ogg"></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">
 You browser does not support video.
</video>

video 中还支持一种标签：track。

track 是一种播放时序相关的标签，它最常见的用途就是字幕。track 标签中，必须使用 srclang 来指定语言，此外，track 具有 kind 属性，共有五种。

subtitles：就是字幕了，不一定是翻译，也可能是补充性说明
captions：报幕内容，可能包含演职员表等元信息，适合听障人士或者没有打开声音的人了解音频内容
descriptions：视频描述信息，适合视障人士或者没有视频播放功能的终端打开视频时了解视频内尔用
chapters：用于浏览器视频内容。

metadata：给代码提供的元信息，对普通用户不可见。
一个完整的 video 标签可能会包含多种 track 和多个 source，这些共同构成了一个视频播放所需的全部信息。

audio

跟 picture 和 video 两种标签一样，audio 也可以使用 source 元素来指定源文件。我们看一下例子：

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

iframe

这个标签能够嵌入一个完整的网页

不过，在移动端，iframe 受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。
同时很多网页也会通过 http 协议头禁止自己被放入 iframe 中。
iframe 标签也是各种安全问题的重灾区。opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。