🔴HTML嵌入多媒体元素

本文最后更新于:2022年5月3日 上午

img

基础使用

src:图片链接

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

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

http状态码:101

图像链接

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

http状态码:101

语义化

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

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

figure

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

figcaption实现语义化

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

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

video

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

🔴HTML嵌入多媒体元素
https://qingshaner.com/HTML嵌入多媒体元素/
作者
清山
发布于
2021年11月23日
许可协议