web前端开发html5+css3（入门学习笔记）day3-CSDN博客

本文链接：https://blog.csdn.net/weixin_44647089/article/details/128122907

·图片标签

·图片标签用于引入一个外部图片

·使用img标签来引入外部图片， img是一个自结束标签

·img属于替换元素（块和行内元素之间，具有两种元素的特点）

·src属性指定的是外部图片的路径（路径规则与超链接一样）

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

·width图片的宽度（单位是像素） ·height图片的高度

宽度和高度如果只修改一个，则另一个会等比例缩放

·注意：一般情况在pc端，不建议修改图片的大小，提前修剪好。

移动端，经常需要对图片进行缩放。大图缩小）

·图片的格式：

· jpeg（jpg）

支持的颜色比较丰富，不支持透明效果，不支持动图

一般用来显示照片

·gif

支持的颜色比较少，支持简单透明，支持动图

颜色单一的图片，动图

·png

支持的颜色丰富，支持复杂透明，不支持动图

颜色丰富，复杂透明图片（专为网页而生）

· webp

谷歌新推出的专门用来表示网页中的图片的一种格式

具备其他图片格式的所有优点，并且文件特别小

·缺点：兼容性不好

·base64

将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片

一般都是一些需要和网页一起加载的图片才会使用base64

使用原则：

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

·内联框架，用于向当前页面中引入一个其他页面

src指定要引入的网页的路径

frameborder的值为0或1.

0：引入页面无边框

1：引入页面有边框

·向网页中引入音视频

<!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音乐循环播放
        除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径
    -->
     <audio src="./source/See You Again-Soundtrack.mp3" controls autopla loop></audio>
     <!-- edge8不支持播放音乐可以文字提示升级 -->
     <audio controls>
        对不起！你的浏览器不支持播放音乐，请升级浏览器
        <source src="./source/See You Again-Soundtrack.mp3">
        <source src="./source/See You Again-Soundtrack.ogg">
    </audio>
    <!-- 也可以使用embad ，type使播放器稳定-->
    <audio controls>
        <source src="./source/See You Again-Soundtrack.mp3">
        <source src="./source/See You Again-Soundtrack.ogg">
        <embed src="./source/See You Again-Soundtrack.mp3" type="audio/MP3" width="300" height="100">
    </audio>
    <!-- 使用video标签来向网页中引入一个视屏，使用方式和audio基本一样-->
    <video controls>
        <source src="./source/a.webm">
        <source src="./source/a.mp4">
        <source src="./source/a.mp4"type="video/mp4">
    </video>
    <iframe src="https://www.bilibili.com/video/BV1fM411z7JG/?spm_id_from=333.1007.tianma.3-1-5.click" 
    frameborder="0" allowfullscreen="true" width="500" height="300"></iframe>
</body>
</html>