本文首发公众号： 伊洛的小屋，欢迎关注并查看更多内容！！！
视频
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo</title>
</head>
<body>
<video src="land.mov" controls></video>
<p>欢迎观看航拍视频</p>
</body>
</html>
|
打开浏览器播放视频
src 属性指向你想要嵌入网页当中的视频资源
controls 控制视频和音频的回放功能
video 当浏览器不支持
音频
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 公众号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频</title>
</head>
<body>
<audio controls>
<source src="music.mp3" type="audio/mp3"></audio>
<p>这是一首简单的小情歌</p>
</body>
</html>
|
打开浏览器听音频
音频播放器所占用的空间比视频播放器要小，
矢量图形
拥有较小的文件尺寸，高度可以缩放，不会在镜头拉进或者放大时像素化
位图：用像素网格定义
矢量图：算法定义
SVG
用于描述矢量图的XML语言，需要用不同的元素定义要显示在图像中的形状
优点：矢量图像中的文本仍然可访问
SVG添加到页面
要通过 <img>元素嵌入SVG
自适应图片
可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片
比如在手机上查看页面的时候，一些图片的显示就可能存在问题
新属性
srcset和sizes
1
2
3
4
5
6
7
| <img srcset="320w.jpg 320w,
480w.jpg 480w,
800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="800w.jpg" alt="display">
|
srcset:定义允许浏览器选择的图像集
sizes:定义了一组媒体条件，什么样的尺寸
