第五章：图像，音频，视频 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>图片的引入</title>
 6     </head>
 7     <body>
 8         <!--网页中引入图片：使用img标签，<img src="图片路径"/>-->
 9         <!--src属性：
10             1.用来指定图片文件所在的路径，必须要有
11             2.图片路径可以是相对路径，也可以是绝对路径-->
12         
13         <!--<img src="img/logo.png"/>-->
14         <!--<img src="https://www.xxx.net/Contents/Images/logo.png"/>-->
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         <!--网页中引入图片：使用img标签，<img src="图片路径"/>-->
 9         <!--src属性：
10             1.用来指定图片文件所在的路径，必须要有
11             2.图片路径可以是相对路径，也可以是绝对路径-->
12         <!--alt属性：
13             1.图片无法正常显示时替换文本，可以使用中文，也可以使用英文
14             2.路径不对，网速过慢，浏览器版本过低，图片格式不对...
15             3.<img src="图片路径" alt="替换文本" />-->
16         <!--width属性和height属性：
17             1.width属性：设置图片宽度，height属性：设置图片高度
18             2.不设置，图片会按原始尺寸显示
19             3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放
20             4.如果2个属性都设置，可能会变形
21             5.默认单位为像素，也可以使用百分比
22             -->
23             
24         <!--<img src="img/logo.png"/>-->
25         <!--<img src="https://www.xxx.net/Contents/Images/logo.png"/>-->
26         
27         <!--<img src="img/logo.png" alt="我要自学网logo图片" width="400"  height="200"/>-->
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         <!--像素：
 9             1.指设备屏幕上的一个点，单位px
10             2.当屏幕分辨率固定时，像素就是一个固定的值，精确的值
11             3.同样大小的屏幕，像素点越多，图像越清晰，画面越细腻。
12             4.像素是网页开发中使用最多的尺寸单位-->
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         <!--audio:在网页中引入音频
 9             属性名和属性值一样，可以只写属性名
10             src属性:指定音频文件路径，必须要有
11             controls属性：显示播放控件,
12             autoplay属性：音频在就绪后马上播放-->
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         <!--audio:在网页中引入音频
 9             IE8以及之前版本不支持
10             
11             属性名和属性值一样，可以只写属性名
12             src属性:指定音频文件路径，必须要有
13             controls属性：显示播放控件,
14             autoplay属性：音频在就绪后马上播放
15             loop属性：音频播放结束后重新开始
16             muted属性：音频输出应该被静音
17             preload属性：页面加载时就开始加载音频，并预备播放.如果使用了“autoplay”属性，preload属性不会生效
18             -->
19         
20         <!--<audio src="m/wdzg.mp3" controls autoplay loop muted preload></audio>-->
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         <!--video:在网页中引入音频
 9             IE8以及之前版本不支持
10             
11             属性名和属性值一样，可以只写属性名
12             
13             src属性:指定视频文件路径，必须要有
14             controls属性：显示播放控件,
15             autoplay属性：视频在就绪后马上播放
16             loop属性：视频播放结束后重新开始
17             muted属性：视频输出应该被静音
18             preload属性：页面加载时就开始加载视频，并预备播放.如果使用了“autoplay”属性，preload属性不会生效
19             
20             width属性和height属性：
21             1.width属性：设置视频窗口宽度，height属性：设置视频窗口高度
22             2.不设置，视频窗口会按原始尺寸显示
23             3.如果只设置1个属性，另一个会根据已设置的属性等比例缩放
24             4.如果2个属性都设置，可能会变形
25             5.默认单位为像素，也可以使用百分比
26             
27             
28             poster属性：用于在视频加载时或用户在点击播放前显示的图片,属性值是图片路径
29             -->
30         
31         <!--<audio src="m/wdzg.mp3" controls autoplay loop muted preload></audio>-->
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         <!--source标签用来为<video>和<audio>定义媒介资源-->
 9             <!--src属性：定义资源路径-->
10             <!--type属性：规定媒介资源的类型-->
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 定义媒介资源

 

posted @ 2020-08-06 07:19  菜逼学飞  阅读(77)  评论(0)    收藏  举报