HTML-“多媒体与嵌入”的笔记

目录

• HTML 中的图片
  • 怎样将一幅图片放到网页上？
    • 备选文本
    • 宽度和高度
    • Image titles 图片标题
  • 通过为图片搭配说明文字的方式来解说图片
  • CSS 背景图片
• 视频和音频内容
  • web 中的音频和视频
    • <video> 元素
    • 使用多个播放源以提高兼容性
    • 其他 <video> 特性
    • <audio> 标签
    • 重新播放媒体
    • 音轨增删事件
  • 显示音轨文本
• 嵌入技术
  • Iframe 详解
    • 安全隐患
  • <embed> 和 <object> 元素
• 了解矢量图形
  • 什么是矢量图形？
  • 怎么将矢量图添加到页面？
    • 通过<img>
    • 直接在HTML中引入SVG代码
    • 具体示例

HTML 中的图片

怎样将一幅图片放到网页上？

简单的例子就是这样：
<img src="dinosaur.jpg">
或者这样：
<img src="images/dinosaur.jpg">
更多的例子看这里。

备选文本

也就是 alt 属性，它的值是对图片的文字描述，用于在图片无法显示或不能被看到的情况。
举例就是这样：

<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

宽度和高度

不建议用这个属性，更多是建议用图片编辑器或CSS来对宽高进行操作。
如果实在想知道怎么做，那就看这里吧。

Image titles 图片标题

有用，但用处不大。
这类似于超链接，用title属性给图片提供需要更进一步的支持信息。
举例就是这样：

<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     title="A T-Rex on display in the Manchester University Museum">

这会给我们一个鼠标悬停提示，看起来就像链接标题。

通过为图片搭配说明文字的方式来解说图片

HTML5 的 <figure> 和 <figcaption> 元素来为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
例如：

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
      alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
      width="400"
      height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

需要注意的是：
<figure> 里不一定要是一张图片，只要是一个这样的独立内容单元：

• 用简洁、易懂的方式表达意图。
• 可以置于页面线性流的某处。
• 为主要内容提供重要的补充说明。

也就是说，<figure> 只是用来给特定内容绑定信息的，而不是只能对图片这样做。

CSS 背景图片

因为CSS背景图片有着一定的局限性，所以我这里只举例要怎么使用，而更详细的信息请看这里。
举例：

p {
  background-image: url("images/dinosaur.jpg");
}

视频和音频内容

web 中的音频和视频

<video> 元素

使用举例：

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

讲解：

• src 负责指向视频链接
• controls 负责给视频加上最基础的功能（开始、停止、调整音量）
• <video> 标签内的内容则是当视频无法加载时，再给用户提供特定信息的

使用多个播放源以提高兼容性

一个播放源可能不能很好的支持所有浏览器，所以可以提供多个播放源以给用户最佳体验。
举例：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

讲解：

• 将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签 <source> 当中。
• <source> 的使用显而易见，就是给同一个视频提供多个播放源，想要有几个播放源就弄几个 <source>
• 而同时 <source> 还有一个可选的 type 属性，它的作用是向浏览器说明，这个播放源是什么格式的，这会更方便浏览器找到那个可以使用的播放源，所以一般建议加上。

其他 <video> 特性

其他 <video> 特性有着诸如 “控制视频尺寸”、“自动播放”、“循环播放”、“加入封面”等内容，具体的就来这里看吧。

<audio> 标签

因为原本教程说的很清晰，所以我这里就照搬了。
<audio> 标签与 <video> 标签的使用方式几乎完全相同，有一些细微的差别比如下面的边框不同，一个典型的例子如下：

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

看，是不是与 <video> 几乎一样?

只不过因为 <audio> 没有视觉部件，所以并不支持 width/height 属性和 poster 属性，不过总体而言还是跟 <video> 十分相似的。

重新播放媒体

这个吧...因为用到的是JS技术，所以我就不做笔记、跳过了，不过还是把链接放出来，方便之后需要的时候检索吧。

音轨增删事件

同《重新播放媒体》

显示音轨文本

简单来说，就是通过 WebVTT 这个格式，用来编写文本文件，然后给视频提供帮助（字幕、翻译等）。
举例：
这是典型的 WebVTT 文件：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

而这是让 WebVTT 文件正常使用的做法：

1. 以 .vtt 后缀名保存文件。

2. 用 <track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles、captions、descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

如下：

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

更多细节看这里。

嵌入技术

Iframe 详解

示例代码：

<iframe src="https://developer.mozilla.org/zh-CN/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

内容讲解：

1. src="https://developer.mozilla.org/zh-CN/docs/Glossary"这部分一如既往地，是你要嵌入的内容的链接。
2. width="100%" height="500" 这部分则显而易见，是控制嵌入内容的宽、高的。
3. frameborder="0"这个属性如果设置为 1，会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 CSS 中可以更好地实现相同的效果。
4. allowfullscreen如果设置，<iframe>则可以通过全屏 API 设置为全屏模式。
5. sandbox该属性可以提高安全性设置，更详细内容会在后面说到。

安全隐患

内容挺多的，其中相当一部分内容是讲解了造成安全隐患的逻辑/原因，具体的话可以看这里。

我这里的话就简单做一下避免安全隐患的笔记了。

1. 只有在必要时嵌入。
   在网络上，你怎么谨慎都不为过，如果你决定要做这件事，多检查一遍；如果是别人做的，在被证明是安全的之前，都假设这是危险的。

2. 使用 HTTPS
   如果用不了，也要注意无论成本如何，你绝对不能使用 HTTP 嵌入第三方内容。

3. 始终使用 sandbox 属性
   默认情况下，应该使用没有参数的sandbox属性来强制执行所有可用的限制，如前面的示例所示。
   如果绝对需要，再逐个添加权限（sandbox=""属性值内）
   其中很重要的一点是，你永远不应该同时添加 allow-scripts 和 allow-same-origin 到你的 sandbox 属性中

4. 配置 CSP 指令
   不会，没看懂，如果真的要用的时候，再上网搜一下具体内容吧。

<embed> 和 <object> 元素

因为这部分内容只是推荐了解，然后在特定场合下能够理解其含义，而不推荐使用，所以我就不做笔记了，直接看大佬的教程吧。

了解矢量图形

什么是矢量图形？

在网络上，我们通常会有遇到两种类型的图片 — 位图和矢量图：

• 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。
• 而矢量图则是使用算法来定义的。

也可以这样说，通过算法形成的图片就是矢量图。

怎么将矢量图添加到页面？

通过<img>

要通过 <img> 元素嵌入 SVG，你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性（或者如果您的 SVG 没有固有的宽高比）

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" >

直接在HTML中引入SVG代码

你还可以在文本编辑器中打开 SVG 文件，复制 SVG 代码，并将其粘贴到 HTML 文档中 - 这有时称为将SVG 内联或内联 SVG。确保您的 SVG 代码在<svg></svg>标签中（不要在外面添加任何内容）。这是一个非常简单的示例，您可以粘贴到文档中：

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

具体示例

  <svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
    <polygon points="120,0 240,225 0,225" fill="green"/>
    <text x="50" y="100" font-family="Verdana" font-size="55"
          fill="white" stroke="black" stroke-width="2">
            Hello!
    </text>
  </svg>

---

因为关于矢量图形的内容只是用作了解而已，所以我在这里并没有做太详细的记录，更多细节（例如无法通过JavaScript来操控的缺点）还是看大佬的教程吧，