《重学前端》学习笔记Day120

HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？

script

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标签的。

img

img标签的作用是引入一张图片。这个标签是没有办法像script标签那样作为非替换型标签来使用的，它必须有src属性才有意义。
如果一定不想要引入独立文件，可以使用data uri：

<img src="data:image/xxxxurlxxxx" />

使用了data url作为图片的src，这样并没有产生独立的文件，客观上做到了和內联相同的效果。
img可以使用width和height属性指定宽高。
alt 这个属性对于视障用户非常重要，不夸张的说，已经做完了可访问性的一半。
srcset和sizes，它们是srcd的升级版（前面说img必须有src属性，是不严谨的说法）。这两个属性的作用是在不同的屏幕大小和特性下，使用不同的图片源。

picture

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

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

source元素来指定图片源，并且支持多个。
这里的media属性是media query，跟CSS的@media规则一致。

Video

在HTML5早期的设计中，video标签跟img标签类似，也是使用src属性来引入源文件的。
不过现在考虑到每家浏览器的支持的视频格式不同，现在video推荐与picture一样使用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>

除了支持media标签之外，还可以使用type来区分源文件的使用场景。
标签的内容默认会被当作不支持video的浏览器内容，此外如果还要支持老的浏览器，，还可以加入object或者embed标签。
track是一种播放时序相关的标签，它最常见的用途就是字幕。必须使用srclang来指定语言。此外，track具有kind属性，共五种：

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

Audio

接下来我们来讲讲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标签能够嵌入一个完整的网页。
但是在移动端，iframe受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。
同时很多网页也会通过http协议头禁止自己被放入iframe中。
iframe标签也是各种安全问题的重灾区。opener、window.name、甚至css的opacity都是黑客可以利用的漏洞。
不推荐使用以前的iframe。
新的标准，为iframe加入了sandbox模式和srcdoc属性。

此文章为7月Day23学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪