🔴HTML嵌入多媒体元素

img

基础使用

src:图片链接

alt:加载失败时的文字提示

<img src="https://http.cat/101" alt="http状态码:101" />

图像链接

<a href="http.cat"><img src="https://http.cat/101" alt="http状态码:101" /></a>

语义化

当图片只起装饰作用时,可使用CSS背景图片代替

不要将重要信息放在图片title中显示

figure

figure元素定义一个语义化的多媒体元素

figcaption实现语义化

<figure>
	<img src="https://http.cat/101" alt="http状态码:101" />
  <figcaption>HTTP状态码101:切换协议</figcaption>
</figure>

HTTP状态码101:切换协议

<figure>可以是几张图片、一段代码、音视频、方程、表格或别的--------MDN

video

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