java学习第28天

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        图片标签是想当前页面引入外部图片
        使用img标签引入外部图片，img是个自结束标签
        img 属于替换元素（介于块和行内元素之间，具有两种元素的特点）
        属性
            ：src 指定外部图片的路径
             alt 图片的描述，描述在默认情况下是不会显示的，在某些浏览器中当图片无法加载时会显示

        weith 图片宽度（单位是像素）
        height 图片的高度
            wieth和height只要有已发生了改变，另一个就会等比例缩放
            注意：
                一般情况下在PC端，不建议修改图片大小，但是在移动端经常对图片进行缩放。


        图片的格式：
            jpeg(jpg)
                -支持的颜色比较丰富，不支持透明效果，不支持动图
                -一般用来显示照片
            gif
                -支持的颜色比较少，支持简单透明，支持动图
                -颜色单一的图片，动图
            png 
                -支持颜色丰富，支持复杂透明，不支持动图
                -颜色丰富，复杂透明（转为网页而生）
            webp
                -这种格式是谷歌推出一种专门用来表示网业的图片
                -它具备其他图片格式的所有优点，而且文件特别小
                -缺点，兼容性不好
            base64
                -将图片使用base64编码，可以将图片转换为字符，通过字符的形式来引入图片
                -一般都是需要和网页一起加载的图片才会使用base64
            使用规则：
            效果一样，用小的。效果不一样，用效果好的。

     -->
     <img weith=200 src="../图片/2d29fddd8017ce565dc3fe2a71633df5.jpeg" alt="北京奥运会1">
     <img src="../图片/2f192dad31eb971e177fb16f4ccd1533.jpeg" alt="北京奥运会2">
     <img src="../图片/57f0f482f9cd178a58b6f72cdf90b4ce.jpeg" alt="北京奥运会3">
     <img src="../图片/9673064805d8d16f24518629179162df.jpeg" almt="北京奥运会4">
     <img src="../图片/9fbecf2f3ac62f5067731a91088a9531.jpeg" alt="北京奥运会5">
     <img src="../图片/aa88c09642e23cf194f0430a4d90ad94.jpeg" alt="北京奥运会6">
     <img src="../图片/ce2e8b467f70b0420628376c474c7fae.jpeg" alt="北京奥运会7">
     <img src="../图片/e5637769ce68071f57128beb4e1314b0.jpeg" alt="北京奥运会8">
     <img src="https://img0.baidu.com/it/u=518767001,328825262&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="北京奥运会9">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        内联框架，用于向当前页面引入一个其他页面
            src 指定要引入网页的路径
            frameborder 指定内联框架的边框

     -->
     <iframe src="https://www.qq.com" width="1000" height="800" frameborder="0"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        audio 标签表示像页面引入一个外部的音频文件
        音频文件引入时默认用户不可以自己控制播放停止

        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                如果设置了autoplay则音乐再打开页面时会自动播放
                但是目前来讲大部浏览器都不会自动对音乐进行自动播放
            loop 音乐是否循环播放
     -->
     <!--  下为插入音频的两种方式-->
      <audio src="./音乐/MG动画转场音效-唰唰呼呼嗖嗖滑动移动-动画嗖13(Anim_爱给网_aigei_com.mp3" controls loop></audio> 
     <audio controls>
         对不起您的浏览器不支持播放音频，请刷新浏览器
        <source src="./音乐/MG动画转场音效-唰唰呼呼嗖嗖滑动移动-动画嗖13(Anim_爱给网_aigei_com.mp3">
        <source src="./音乐/击出高频电流-雷电-游戏技能_爱给网_aigei_com.mp3">

     </audio>
     <!-- 插入视频用viedio标签，使用方式和audio基本相同 -->
     <br>
     <!-- <video controls> -->
        <!-- <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" allowFullScreen="true"></iframe> -->
     <!-- </video> -->
     
        <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" allowFullScreen="true" width="1000" height="800"></iframe>
     
</body>
</html>
posted @ 2021-07-25 22:39  几人著眼到青衫  阅读(21)  评论(0)    收藏  举报