iframe内联元素有白边原因_HTML--替换型元素

什么是替换型元素

替换型标签是指一类把 文件内容引入文档，并替换自身位置的标签。

有哪些替换型元素

一般来说，替换型元素都可以使用 src 属性来引入文件，并替换当前的标签位置的。如常见的 script 、 img 标签和比较少用的 iframe 和 picture 标签，还有 html5 新引入的 video 和 audio 标签，都属于替换型元素。下面一一介绍这些标签：

script 标签

script 标签用于嵌入或引用可执行脚本

script 标签既可以用作替换型标签引入可执行脚本文件，也可以直接在标签内直接书写脚本；这两种做法是等效的。下面是 script 标签的一些常用属性:

src

src 属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。

type

type 属性定义了 script 标签内的脚本语言类型。属性值是一个 MIME 类型，支持的属性值有4个：text/javascript, text/ecmascript, application/javascript, 和application/ecmascript；一般使用application/javascript（ie8以下无法识别），和text/javascript表现一致，只是不同浏览器支持不一样。html5 的标准可以不写type。

async

async 属性表示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有 src 属性的脚本）。该属性值是一个布尔值，是 html5 的新特性。

defer

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded （初始的 html 文档被完全加载并解析）事件前执行。

注意：这里的async和defer定义和功能十分相似，都是为了异步执行脚本；他们两者的主要区别是脚本文件执行的时间点不同：async 是将脚本文件异步加载，加载完立即执行；而 defer 则是异步加载文件，触发DOMContentLoaded事件时执行

crossorigin、integrity等属性见MDN

img 标签

img 标签代表文档中的一个图像。通过 src（或 srcset ）属性引入一个图片文件或者使用 data uri 作为图片的 src ，来生成一个图像。常见的属性如下：

src

图像的 url ，这个属性对于 img 标签来说是必须的。除非使用了 sizes 和 srcset 指定不同屏幕大小使用不同的图片源。

title

hover 时显示的提示文本

alt

alt 属性定义了图像的替换文本；但图片无法显示时就会显示 alt 属性的内容。且这个属性可用作机器阅读，对视障用户十分重要。

width

指定图像的宽度，在 html5 中单位是像素，在 html4 中单位是像素或百分比

height

指定图像的高度，在 html5 中单位是像素，在 html4 中单位是像素或百分比

sizes（html5）

表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括：

1. 一个媒体条件。最后一项一定是被忽略的。
2. 一个资源尺寸的值。

如：

<img src="128px.jpg"
     srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

表示设备宽度小于 360px 时，sizes 取 340px 作为图片展示的尺寸，大于 360px 时取 128px 作为图片尺寸

srcset（html5）

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

1. 一个图像的 URL
2. 一个宽度描述符（"w"）或像素密度描述符（"x"），可选。

像素密度描述符（"x"）表示不同的设备像素密度比；比如普通的pc电脑的显示器像素密度比为 1 ，在此用 1x 表示；iphone6的像素密度比为 2 ，在此用 2x 表示。默认为 1x

宽度描述符（"w"）和屏幕的像素密度与 sizes 的属性设置息息相关；与宽度描述符匹配的规则是：

1. 获取设备的像素密度
2. 获取 sizes 中与设备匹配的媒体条件下的资源尺寸
3. 相应的 像素密度 和 资源尺寸 相乘，就得到了宽度描述符所匹配的值，如果没有准确匹配的值会向上查找，直到找到最后一个。

sizes 属性和 srcset 属性一般组合起来使用，用于在不同的屏幕大小时使用不同的图片源。

<img src="128px.jpg"
 srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
 sizes="(max-width: 360px) 340px, 128px">

上面代码表示：

• 在像素密度为 1 的设备下，当设备宽度大于360px时，取 128px 作为资源展示的尺寸，此时的宽度描述符为：128 * 1 即128w，匹配到 128px.jpg；当设备宽度小于360px时，取 340px 作为资源展示的尺寸，此时的宽度描述符为：340 * 1 即 340w，向上取 512w，匹配到512px.jpg，并以340px的尺寸展示。依次类推。

picture 标签

通过包含零或多个 source 元素和一个 img 元素来为不同的显示/设备场景提供图像版本。如果没有匹配的 source 元素，就会显示 img 元素

source 元素有以下属性

• srcset：指定资源url
• media：跟 CSS 的 @media 规则一致，用于媒体查询
• type：指定资源类型，如果不支持该类型，则会直接跳过。

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture> 

video 标签

用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频（也支持音频，但音频文件一般使用 audio 标签）播放。一般来说也是通过包含0个或多个 source 元素来指定不同（与浏览器支持有关）的源文件（也可通过 src 引入，但不推荐），浏览器会默认使用第一个支持的源。除了 source 元素以外的元素相当于一个 slot ，用于浏览器不支持video标签或无支持文件源的提示。

下面是一些常用的属性：

• width：指定播放器的宽度，单位是像素
• height：指定播放器的高度，单位是像素
• autoplay：是否自动播放，是一个布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束
• loop： 是否循环播放，是一个布尔属性；
• controls：是否提供控制器，是一个布尔属性；允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放
• muted：是否默认播放音频，是一个布尔属性；默认值为 false ，表示静音
• preload：指定加载策略（是否提前缓存视频），属性值为：none（不缓存视频）、metadata（不缓存视频，只获取视频的元数据，如长度等）、auto（优先加载）和空字符串（同auto）；默认值与浏览器的实现有关
• poster：指定海报帧，接收一个 url 字符串，用于在用户播放或者跳帧之前展示

video 标签还支持字幕相关内容的track标签

audio 标签

用于在文档中表示音频内容。常用属性与 video 标签大致一样；没有（poster属性），多了一个 volume 属性用于控制音量，它是一个浮点数，0.0 - 1.0 表示无声到最大声

iframe 标签

iframe 标签用于在文档内嵌套一个独立的外部文档

<iframe id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://developer.mozilla.org/zh-CN/docs/Web/HTML">
</iframe>

iframe标签涉及到很多安全问题，在实际开发中不推荐使用。详见 MDN

参考文章

HTML（超文本标记语言）​developer.mozilla.org

极客时间​time.geekbang.org