HTML替换型元素

替换型元素顾名思义就是把文件的内容引入并替换掉自身位置的一类元素标签；首先，问题是引入一个 css 和 js 它们两个所用的标签属性 一个是 link 的 href，一个是 script 的 src，下面开始学习。

替换型元素包括以下几种：

• script 标签
• img 标签
• picture 标签
• video 标签
• audio 标签
• iframe 标签

script 标签

script 标签时为数不多的既可以作为替换型标签又可以不作为替换型标签的元素，用法如下：

<script type='text/javascript'>
console.log('hello');
</script>

<script type='text/javascript' src='a.js'></script>

这里有两种方式来引入 JavaScript 代码，它们两者是等效的；于是这里就可以解释前面提出的问题了：凡是替换型元素，都是使用 src 属性来引用文件的，而链接型元素都是使用 href 属性来引用文件的，所以前面的问题就能根据替换型元素和链接型元素来解释为什么 link 一个 css 文件是用 href 属性，script 一个 js 脚本使用 src 属性了。
通过上面的说明，style 标签是不是也有类似的结果呢？答案并不是，style 标签并不是替换型元素(虽然不知道它究竟是怎么实现的)，所以它不能使用 src 属性，只能是在 style 标签里面写样式。

img 标签

• src 属性
  img 标签是平时使用较多的元素标签，它的作用是引入一张图片，它没有办法像 script 标签那样作为非替换型标签来使用，所以它必须有 src 属性才有意义。
  在 img 标签的 src 属性中一般都是直接放入一个图片的 url 地址(对应一个独立文件)，如果不想这样引入一个独立文件的话可以使用 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>' />

  这个例子用 data uri 作为图片的 src，并咩有产生独立的文件，客观上做到了和内联相同的效果。
  除此之外，它还可以使用 width 和 height 指定宽度高度，也可以只指定其中之一，另外一边会自动等比缩放；如下：

  <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>'
    width="100"
  />

• alt 属性
  img 标签的 alt 属性也是一个很重要但是用户很少感知的属性，它主要是针对视障用户很重要。

• srcset 和 sizes 属性
  这两个属性时 src 属性的升级版，也可以在最新浏览器下面不使用 src 属性让 img 展示图片，它们的作用是在不同屏幕大小和特性下，使用不同的图片源，如下：

  <img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

  这里 img 用 srcset 属性提供了根据屏幕条件选取不同图片的能力，但是更好的做法是用另一个替换型元素 picture。

picture 标签

picture 标签也可以根据屏幕条件的不同为 img 元素提供不同的源文件，用法如下：

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

picture 标签的设计跟 video 和 audio 保持了一致，它跟 img 搭配 srcset 和 sizes 不同的是它使用 source 元素来指定图片源，并且支持多个 source；而它的 media 属性就相当于 media query，跟 css 的 @media 规则一致。

video 标签

• src 属性和 source 标签
  在 HTML5 早期的设计中，video 标签跟 img 标签类似，也是使用 src 属性来引入源文件，由于各家浏览器支持的视频格式不同，导致现在的 video 标签跟 picture 标签一样，提倡使用 source 来进行源文件的引入；如下：

  // 旧的用法
  <video controls="controls" src="movie.ogg">
  </video>
  
  // 提倡的用法 使用 source 引入多个不同的视频源
  <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>

• track 标签
  track 标签在 video 标签中也是支持的，它是一种播放时序玄关的标签，常见的用途就是字幕。
  track 标签中必须使用 srclang 来指定语言，此外，track 具有 5 种 kind 属性 ，如下：

  • subtitles: 字幕(也可能是补充性说明)
  • captions: 报幕内容(可能包含演职员等元信息)
  • descriptions: 视频描述信息
  • chapters: 用于浏览器视频内容
  • metadata: 给代码提供的元信息，用户不可见
    一个完整的 video 标签可能包含多种 track 和多个 source，共同构成一个视频播放所需要的信息。

audio 标签

audio 标签可以用 src 属性来引入源文件，同时它跟 picture 和 video 标签一样也可以使用 source 标签来引入指定的源文件，如下:

// 1
<audio controls src='song.mp3' type='audio/mpeg></audio>

// 2
<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 标签能够嵌入一个完整的网页，用法如下：

<iframe src="http://www.baidu.com" />

但是在移动端，iframe 受到了很多限制，它无法像浏览器端一样指定大小，里面的内容会被完全平铺到父级页面上，同时很多网页也会通过 http 协议头禁止自己被放入 iframe 中；除此之外，iframe 还是各种安全问题的重灾区，像 opener、window.name 甚至 css 的 opacity 都是入侵者可以利用的漏洞；因此，iframe 标签是能不用就不用吧。

在新标准中为 iframe 加入了 sandbox 模式和 srcdoc 属性，这两个属性为 iframe 带来了一定的新场景，如下：

<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;amp;page=1">in my gallery</a>."></iframe>

这里使用 srcdoc 属性创建一个新文档嵌入在 iframe 中，同时使用 sandbox 来进行隔离。这样，这个 iframe 就不涉及任何跨域问题了。

最后

开篇通过对 script 标签的学习和对 link 标签的解释(替换型标签和链接型标签)来解释了开头的问题，后面依次对替换型标签(script、img、picture、video、audio、iframe)进行了学习。对 img 标签的 srcset 属性和 iframe 标签的 sandbox 和 srcdoc 属性有了新的认识。