多媒体和嵌入内容
HTML5中的音频和视频标签的使用
嵌入内容的应用，如地图、嵌入网页等
图片
图片是一种非常重要的媒体类型，能够提升用户体验，使信息传递更为直观和生动。在 HTML 中，我们使用 <img> 标签来插入图片。<img> 标签是自闭合的空标签，也就是说它没有结束标签。图片的地址通过 <img> 标签的 src（source）属性指定。
示例：
1 | <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="图像描述"> |
效果：
图像元素还可以包含以下属性：
width：指定图像的宽度。height：指定图像的高度。align：指定图像的对齐方式。border：指定图像的边框。hspace：指定图像与周围元素的水平间距。vspace：指定图像与周围元素的垂直间距。ismap：指定图像是否为地图图像。
设置图片大小
我们可以通过 <img> 标签的 width 和 height 属性来设置图片的宽度和高度。这两个属性的值可以是具体的像素值，也可以是百分比。
示例：
1 | <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="图像描述" width="100" height="100" align="center" border="1"> |
效果：
设置替代文本
替代文本（alt text）用来在图片无法加载的时候显示，也被屏幕阅读器用来读出图片的内容，帮助视力障碍者理解图片。我们通过 <img> 标签的 alt 属性来设置替代文本。
示例：
1 | <img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="找不到图片时显示此文本"> |
效果：
图片链接
图片也可以被用作超链接。我们只需要把 <img> 标签放在 <a> 标签内部，就可以创建一个图片链接。
示例：
1 | <a href="https://www.zhaojian.net/"> |
效果：
[!小结]
width和height属性来设置图片的宽度和高度。这两个属性的值可以是具体的像素值，也可以是百分比。- 如果同时设置了图片的宽度和高度，而这两个值的比例与图片本身的比例不一致，那么图片可能会被拉伸或压缩，造成形变。
- 如果图片链接设置了边框，那边框默认和超链接一样的颜色
视频
HTML 视频元素用于在网页中嵌入视频。视频元素的标签是 <video>。
示例：
1 | <video src="https://www.zhaojian.net/images/mp4.mp4" controls> |
效果：
视频元素还可以包含以下属性：
width：指定视频的宽度。height：指定视频的高度。poster：指定视频的海报帧。autoplay：指定视频是否在加载时自动播放。loop：指定视频是否循环播放。muted：指定视频是否静音。preload：指定视频是否在加载时预加载。
示例：
1 | <video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto"> |
这个示例包含一个视频元素。视频文件的 URL 设置为 mp4.mp4，宽度设置为 400 像素，高度设置为 300 像素，海报帧设置为 zhaojian-avatar.png，自动播放设置为 true，循环播放设置为 true，静音设置为 true，预加载设置为 auto。
效果：
一个非常全面的 HTML 视频 解决方案（不推荐）
以下实例中使用了 4 种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
示例：
1 | <video width="320" height="240" controls> |
[!小结]
<source>元素提供了一个备份选项，如果浏览器不支持该格式，则将尝试播放第二个<source>元素指定的视频文件。
音频
HTML 中的 <audio> 元素用于在网页中嵌入音频内容。
示例：
1 | <audio src="https://www.zhaojian.net/images/mp3.mp3" controls> |
效果：
音频元素还可以包含以下属性：
controls：指定是否显示音频控件，默认值是true。autoplay：指定音频是否在加载时自动播放。loop：指定音频是否循环播放。muted：指定音频是否静音。preload：指定音频是否在加载时预加载。
示例：
1 | <audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto"> |
这个示例包含一个 <audio> 元素。音频文件的 URL 设置为 mp3.mp3，控制控件设置为 true，自动播放设置为 true，循环播放设置为 true，静音设置为 true，预加载设置为 auto。
效果：
embed 元素
embed 元素是 HTML 4.01 中引入的元素。它可以嵌入任何类型的资源，包括视频、音频、图像、Flash 等。embed 元素需要浏览器支持特定的插件才能显示。
示例：
1 | <embed src="资源 URL" type="资源类型"> |
[!小结]
- HTML5 引入了
<video>和<audio>元素来替代<embed>元素。embed元素可以嵌入任何类型的资源，而<video>元素和<audio>元素只能嵌入视频和音频资源。embed元素需要浏览器支持特定的插件才能显示，而<video>元素和<audio>元素不需要。<embed>元素仍然可以使用，但它不再被推荐。
object元素
object 元素是 HTML 4.01 中引入的元素。它可以嵌入任何类型的资源，包括视频、音频、图像、Flash 等。object 元素使用 <param> 元素来指定资源的属性，例如资源的宽度、高度、背景颜色等。
示例：
1 | <object data="资源 URL" type="资源类型"> |
object 和 embed 元素的具体区别：
| 属性 | object |
embed |
|---|---|---|
| 参数 | 使用 <param> 元素 |
使用 type 属性 |
| 资源类型 | 任何类型 | 特定类型 |
| 插件 | 需要 | 不需要 |
| 功能 | 丰富 | 基本 |
[!小结]
- 如果您需要嵌入任何类型的资源，并且浏览器支持特定的插件，则可以使用
object元素。- 如果您只需要嵌入特定类型的资源，并且不需要浏览器支持特定的插件，则可以使用
embed元素。- 如果您只需要嵌入视频或音频资源，则建议使用
<video>或<audio>元素。<video>和<audio>元素不需要浏览器支持特定的插件，并且提供了更丰富的功能。
框架
<iframe> 元素是 HTML 中用于在一个文档中嵌套另一个文档的标签。它允许将一个文档嵌套到另一个文档中，并在其中显示被嵌套文档的内容。这通常用于嵌入其他网页、嵌入视频、地图等内容。
<iframe> 元素具有以下属性：
- src 属性定义要嵌入的网页或文档的 URL。
- width 属性定义
<iframe>元素的宽度。 - height 属性定义
<iframe>元素的高度。 - frameborder 属性定义
<iframe>元素的边框是否可见。 - border 属性定义
<iframe>元素的边框宽度。 - framespacing 属性定义
<iframe>元素与其周围内容之间的间距。 - marginwidth 属性定义
<iframe>元素的左和右边距。 - marginheight 属性定义
<iframe>元素的上和下边距。 - scrolling 属性定义
<iframe>元素是否允许滚动。 - name 属性定义
<iframe>元素的名称。 - id 属性定义
<iframe>元素的 ID。 - class 属性定义
<iframe>元素的类。
示例：
1 |
|
效果：
