第五章:图像,音频,视频

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>图片的引入title>
 6     head>
 7     <body>
 8         
 9         
12         
13         
14         
15         <img src="https://www.xxx.net/Contents/Image/logo.png"/>
16         
17     body>
18 html>
5-1 图片引入1
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>图片的引入title>
 6     head>
 7     <body>
 8         
 9         
12         
16         
23             
24         
25         
26         
27         
28         <img src="img/logo.png" alt="我要自学网logo图片" width="30%"  />
29     body>
30 html>
5-2 图片引入2
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>像素title>
 6     head>
 7     <body>
 8         
13             
14             <img src="img/logo.png" width="300"/>
15             <br />
16             <img src="img/logo.png" width="23.4%"/>
17     body>
18 html>
5-3 像素单位
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>图片格式title>
 6     head>
 7     <body>
 8         <img src="img/logo.png"/>
 9         <br />
10         <img src="img/logo.jpg"/>
11         <br />
12         <img src="img/logo.gif"/>
13         
14         jpg/jpeg 格式:
15             1.色彩丰富,压缩比高,画质损失小,体积小
16             2.不支持透明度,不支持动画
17             3.适用于色彩丰富,要求体积小的场景
18             
19         png格式:
20             1.色彩丰富,压缩比高,体积小,比jpg大
21             2.支持任意透明度,不支持动画
22             3.适用于色彩丰富,需要透明度的场景    
23             
24         gif格式:
25             1.仅支持256种颜色,画质损失大,体积最小
26             2.支持完全透明度,支持动画
27             3.适用于要求动画,有透明,图片颜色少的场景        
28             
29             
30     body>
31 html>
5-4 常用图片格式
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>音频引入title>
 6     head>
 7     <body>
 8         
13         
14         <audio src="m/wdzg.mp3" controls autoplay>audio>
15         
16     body>
17 html>
5-5 音频引入1
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>音频引入title>
 6     head>
 7     <body>
 8         
19         
20         
21         
22         <audio src="m/wdzg.mp3" controls loop muted preload>
23             您的浏览器不支持audio
24         audio>
25         
26     body>
27 html>
5-6 音频引入2
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>视频引入title>
 6     head>
 7     <body>
 8         
30         
31         
32         
33         <video src="v/wdzg.mp4" poster="img/logo.png" width="600" height="400" controls loop muted preload>
34             您的浏览器不支持video
35         video>
36         
37     body>
38 html>
5-7 视频引入
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>定义媒介资源title>
 6     head>
 7     <body>
 8         
 9             
10             
11             
12             
13         <video width="400" controls>
14             <source src="v/movie.ogg" type="video/ogg">source>
15             <source src="v/wdzg.mp4" type="video/mp4">source>
16                 
17             当前浏览器不支持 video直接播放
18         video>
19     body>
20 html>
5-8 定义媒介资源

 

你可能感兴趣的:(第五章:图像,音频,视频)