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