2、图片标签
场景:在网页中显示图片
代码:<img src="" alt="">
特点:单标签;img标签需要展示对应的效果,需要借助标签的属性进行设置
图片标签的属性:
src属性:
属性名:src
属性值:目标图片的路径
【注:当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)】
alt属性:
属性名:alt
属性值:替换文本【当图片加载失败时,才会显示alt的文本;当图片加载成功时,不会显示alt的文本】
<body>
<img src="./错误路径会加载失败" alt="替换文本" title="">
</body>
</html>
title属性:
属性名:title
属性值:提示文本,当鼠标悬停时,才显示的文本
【注:title属性不仅仅可以用于图片标签,还可以用于其他标签】
wigth和height属性:
属性名:width和height
属性值:宽度和高度(数字)
【注:如果只设置width或height中的一个,另一个不设置的会自动等比例缩放,此时图片不会变形;如果同时设置了width和height两个,若设置不当此时图片可能会变形】
路径
场景:页面需要加载图片,需要先找到对应的图片
路径可分为:绝对路径和相对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
例:
盘符开头:D:/day02/王源.jpg
完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif
<!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 src="C:\在家实习\王俊凯.jpg" alt="" height="280">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190616%2Fa55a6d7f680240b28021026ce0814bd4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634476405&t=e11ee9208659a42c597f45e82dab798b" alt="" width="300">
</body>
</html>
相对路径:
概念普及:当前文件:当前的HTML网页 目标文件:要找到的文件
【从当前文件开始出发找目标文件的过程】
相对路径的分类:
同级目录:
当前文件和目标文件在同一目录下
代码步骤:直接写目标文件的名字即可
方法一:<img src="目标文件.gif">
方法二:<img src="./目标文件.gif">
VSCode快捷操作:
直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可
下级目录:
目标文件在下一级目录中
代码步骤:先知道在哪个文件里面-----文件夹名字-----进入这个文件夹----看见目标文件直接写目标文件的名字
VSCode快捷操作:
直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可
上级目录:
目标文件在上级目录中
代码步骤:先出当前文件夹,到上一级目录——../——此时看到目标文件——直接写目标文件
VSCode快捷操作:
直接敲../后,会自动提示上级目录下有文件,直接选择即可
<!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 src="王源.jpg" alt="" width="190">
<img src="./王源.jpg" alt="" width="190">
<!-- 下级目录 -->
<img src="./TFBOYS/易烊千玺1.jpg" alt="" width="190">
<!-- 上级目录 -->
<img src="../易烊千玺1.jpg" alt="" width="190" >
<!-- 例子上级目录的上级目录 -->
<img src="../../1.jpg" alt="">
</body>
</html>
3、音频标签
场景:在页面中插入音频
代码:<audio src="./music.mp3" controls></audio>
常见属性:
属性名 | 功能 |
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
【注:音频标签目前支持三种格式:MP3、Wav、Ogg】
<!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-sc">
<title>Document</title>
</head>
<body>
<audio src="./TFBOYS - 快乐环岛 (live).mp3" controls autoplay loop></audio>
</body>
</html>
4、视频标签
场景:在页面中插入视频
代码:<video src="./video.mp4" controls></video>
常见属性:
属性名 | 功能 |
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌中需要配合muted实现静音播放) |
loop | 循环播放 |
【注:视频标签目前支持三种格式:MP4、WebM、Ogg】
<!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>
<video src="./TFBOYS/王俊凯.mp4"controls autoplay loop muted width="200" ></video>
</body>
</html>