尚硅谷前端笔记-11图片标签12内联框架13音视频

最新推荐文章于 2024-08-09 10:42:44 发布

小付学前端

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量63

点赞数

分类专栏： HTML5详细基础笔记文章标签：前端 html html5

本文链接：https://blog.csdn.net/weixin_58264104/article/details/125026091

版权

HTML5详细基础笔记专栏收录该内容

15 篇文章 3 订阅

订阅专栏

11图片标签：

 图片标签用于向当前页面中引入一个外部图片
           使用img标签来引入外部图片，img标签是一个自结束标签
           img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
           属性：
              src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

              alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
              搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

              width 图片的宽度（单位是像素）
              height 图片的高度
                  -宽度和高度中如果只修改了一个，则另一个会等比例缩放

              注意事项：
                 一般情况在PC端，不建议修改图片的大小，需要多大的图片就多大
                 但是在移动端，经常需要对图片进行缩放（大图缩小）

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

                 效果一样，用小的
                 效果不一样，用效果好的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>

<img   width="200"   src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8olSEek1RZjSQDgPizhxEAHaJ3?pid=ImgDet&w=650&h=866&rs=1" alt="海边"
>

</body>
</html>

12内联框架：

    内联框架：用于向当前页面中引入一个其他页面
           src 指定要引入的网页的路径
           frameborder 指定内联框架的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<iframe src="https://www.12371.cn/special/zggcdzc/zggcdzcqw/" width="800" height="600" frameborder="0">内联框架</iframe>
<h1>Hello</h1>
</body>
</html>

13音视频：

audio标签用来向页面中引入一个外部的音频文件的
  音视频文件引入时，默认情况下不允许用户自己控制播放停止

  属性：
    controls 是否允许用户控制播放
    autoplay 音频文件是否自动播放
       -如果设置了autoplay 则音乐在打开时会自动播放
        但目前来讲大部分浏览器都不会自动对音乐进行播放
    loop 音乐是否循环播放

<audio src="   " controls  autoplay  loop> </audio>

 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
     ./source/audio.mp3  是一个示例，未放目录中，无法播放（自己所写）
    
    优先使用MP3，MP3无法使用在使用ogg，如果都不能使用就显示对不起.....

<audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
</audio>

 embed 在老版本浏览器里面使用音频和视频文件
                type属性的指定  指定文件类型
                audio表示文件大的类型（audio音频video视频img图片）
                MP3表示具体类型（具体格式）
                可自动播放   评价：非常不好用

<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

 使用video标签向网页中引入一个视频
           使用方式和audio基本上一样

video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="vido/mp4">
</video>

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
      audio标签用来向页面中引入一个外部的音频文件的
        音视频文件引入时，默认情况下不允许用户自己控制播放停止

        属性：
          controls 是否允许用户控制播放
          autoplay 音频文件是否自动播放
             -如果设置了autoplay 则音乐在打开时会自动播放
              但目前来讲大部分浏览器都不会自动对音乐进行播放
          loop 音乐是否循环播放
-->
<!--<audio src="   " controls  autoplay  loop> </audio>-->


<!--
     除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
     ./source/audio.mp3  是一个示例，未放目录中，无法播放（自己所写）
     -->
<!--      优先使用MP3，MP3无法使用在使用ogg，如果都不能使用就显示对不起.....
-->
<audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
</audio>

<!--     embed 在老版本浏览器里面使用音频和视频文件
                type属性的指定  指定文件类型
                audio表示文件大的类型（audio音频video视频img图片）
                MP3表示具体类型（具体格式）
                可自动播放   评价：非常不好用 -->

<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">


<!--   使用video标签向网页中引入一个视频
           使用方式和audio基本上一样
-->
<video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="vido/mp4">
</video>



</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习。若对码友有用可参考！！！