html学习笔记（三）——多媒体与嵌入

introversi0n

已于 2022-08-03 00:06:37 修改

阅读量360

点赞数

分类专栏：前端学习之旅文章标签： html 学习前端

于 2022-08-03 00:06:23 首次发布

本文链接：https://blog.csdn.net/code_bro/article/details/126132312

版权

前端学习之旅专栏收录该内容

7 篇文章 0 订阅

订阅专栏

8月3日零基础自学HTML笔记第三篇。

多媒体与嵌入

一、图片：img元素

1. src属性

嵌入图片常常使用img元素，它是一个空元素，最少需要一个src属性（就如同a元素的href属性）来使其生效

<img src="images/example.jpg">

几点注意事项：

不推荐使用绝对路径，因为这样会使得浏览器重新通过DNS去寻找IP地址，加重浏览器工作，通常将照片放置在本地服务器，即同项目文件的目录上下级调用。
盗链：指src指向未经授权的别人页面上的图片。

2. alt属性

img元素常常还需要一个alt属性，用于在图片无法正常显示时用文字描述图片，当然这个描述对于盲人来说更加重要。

3. width和height属性

img元素还具有高度和宽度属性，但改变图片的尺寸样式更应当使用css而不是html。

4. figure和figcaption属性

对于图片的解释而言，还需要一个专属的标签，很好理解，假如你随便选用一个语义化标签 p，从语义的角度而言，p 和 img 没有具体关联，读者会感到疑惑，特别是在 img 和 p 较多的时候更加无法匹配上哪个 p 对应 img，因此专门修饰图片内容的文档标签应运而生，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>

这个 figcaption 元素告诉浏览器和其他辅助的技术工具这段说明文字描述了 figure 元素的内容。

5. css背景图片

css也可以插入图片，但是与html插入图片相比，完全没有语义上的意义，也就是说只是为了装饰页面而用。

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

二、视频：video元素

1. 背景

21世纪初带宽的升级导致视频音频在页面的普及率提高，但那时传统web技术（例如HTML）还未能很好的支持在web中嵌入音频和视频。

所以像Flash等专利技术很受欢迎，但是这些技术存在着无法很好支持 HTML/CSS 特性、安全问题以及可行性问题。

恰恰传统的web技术可以提供这些问题很好的解决办法，因此两者可谓各有利弊

直到 HTML5 的出现才彻底打破了这个尴尬的局面，其中具有非常多的新特性，包括 video 和 audio 标签，以及一些 APIs 和 JavaScript 用于对其控制。

在这里仅考虑 HTML 的有关知识。

2. src属性

同 img 标签使用方式一样

3. controls属性

作为一个合格的视频，应当可操纵可回放，可以使用controls来提供浏览器自带的控件界面

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

4. video标签内容

这个内容叫做后备内容，使用场景等同于 img 标签的 alt 属性，在这里我们可以适当的放置一个 a 标签，以便于无法支持播放器的浏览器显示，用户就可以通过链接访问视频内容。

5. 浏览器所支持的媒体文件

为了防止浏览器可能不支持我们提供的视频文件格式，可以将 src 属性从 video 标签中移除，并放置到 source 标签，以提供给浏览器多种格式的视频文件。浏览器会按顺序选择第一个能打开的媒体。

<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>

这里的 type 属性不是必须的，如果不写上，浏览器会尝试加载每一个文件，直到找到能正确播放的文件。如果加上的话，浏览器会先检查该属性从而迅速跳过不支持的格式类型，节省大量时间。

6. 其他 video 特性

width 和 height

你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

autoplay

这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

loop

这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

muted

这个属性会导致媒体播放时，默认关闭声音。

poster

这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload

这个属性被用来缓冲较大的文件，有 3 个值可选：

“none” ：不缓冲
“auto” ：页面加载后缓存媒体文件
“metadata” ：仅缓冲文件的元数据

三、音频：audio元素

<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>