摘要：在这篇文章，你将会看到在负责网页构造的HTML中如何插入图片和视频。非常适合初学者！大鹏一日同风起，扶摇直上九万里！一起学习，一起提高！

1.HTML中的图片

HTML5的<figure>和<figcaption>为图片提供了一个语义容器，在题目和图片之间建设了清晰的分割。<figcaption>元素通知浏览器和其余辅助的技术工具这段阐明文字描述了<figure>元素的内容。<figure>能够是几张图片、一段代码、音视频、方程或表格等。

代码如下：

<figure>  <img src="https://bkimg.cdn.bcebos.com/pic/8718367adab44aede658ce89b11c8701a18bfb4d?x-bce-process=image/resize,m_lfit,w_220,limit_1"   alt="《肖申克的救赎》海报"   height="300">  <figcaption>故事产生在1947年，银行家安迪（Andy）被指控枪杀了妻子及其情人，安迪被判无期徒刑，这意味着他将在肖申克监狱中度过余生。</figcaption></figure>

效果图如下：
<figure>
<img src="https://bkimg.cdn.bcebos.com/pic/8718367adab44aede658ce89b11c8701a18bfb4d?x-bce-process=image/resize,m_lfit,w_220,limit_1"
alt="《肖申克的救赎》海报"
height="300">
<figcaption>故事产生在1947年，银行家安迪（Andy）被指控枪杀了妻子及其情人，安迪被判无期徒刑，这意味着他将在肖申克监狱中度过余生。</figcaption>
</figure>

小结：如果图像对您的内容有意义，则应该应用HTML图像。若纯正是装璜，则应该应用CSS背景图片，能更好的管制图片和设置图片的地位。

2.HTML中的视频和音频

先看代码：

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

成果如下（前提是你须要有该视频的资源方可关上视频）：
<video src="rabit320.webm" controls>
<p>你的浏览器不反对HTML5视频，可点击此链接观看</p>
</video>

  • 其中，src指向你要嵌入到网页中的视频资源；controls可管制回放以及音量性能。 <video>标签内的内容叫后备内容，当浏览器不反对<video>的时候，就会显示这段内容。
  • 接下来，
    咱们把src从 <video>中移除，把它放在几个独自的<source>中，这样浏览器会先查看<source>，并且播放第一个与其本身相匹配的媒体，你的视频该当包含webm和mp4两种格局，目前这两种格局曾经足够反对大多数平台和浏览器。<source>中的 type属性可选，倡议加上，它蕴含了视频文件的MIME types，同时会跳过那些不反对的格局。若你不加的话，浏览器会尝试加载每一个文件，直到找到一个正确的格局，这样会耗费大量的工夫和资源。
<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>
留神：<audio>用法简直与 <video>齐全一样。此处就不赘述了。
  • 再来看一个十分有意义的标签 <track>，它能够给听不懂音频的/不不便播放音频的/听觉有阻碍的人提供字幕。当然这就须要用到一个WebVTT文本格式，一个典型的WebVTT文件如下（这种文件的具体写法能够在查查相干材料，网上很多博客都有写到相干写法）：
WEBVTT
1
00:00:22.230 --> 00:00:24.606
第一段字幕

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

  • 要以.vtt后缀名保留文件；
  • <track>链接.vtt文件，需放在<audio>或<video>中，<source>之后，用kind指明是哪种类型(eg:subtitles/captions/descriptions)，用srclang通知浏览器你应用的语言。
<video controls>  <source src="rabbit320.mp4" type="video/mp4">  <source src="rabbit320.webm" type="video/webm">  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">  <p>你的浏览器不反对HTML5视频，可点击<a href="rabbit320.mp4">此链接</a>观看</p></video>

<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
<p>你的浏览器不反对HTML5视频，可点击此链接观看</p>
</video>

以上均是参考最权威的MDN web docs，总结进去的比拟重要的知识点，与君共勉。不欠缺之处，评论区欢迎您！