2021-09-17

添福宝615

于 2021-09-18 17:04:49 发布

阅读量73

点赞数

分类专栏：笔记文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_61923897/article/details/120369762

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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>

添福宝615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-09-17

2、图片标签场景：在网页中显示图片代码：<img src="" alt="">特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置图片标签的属性：src属性：属性名：src属性值：目标图片的路径【注：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）】alt属性：属性名：alt属性值：替换文本【当图片加载失败时，才会显示alt的文本；当图片加载成功时，不会显示alt的文本】<body>
复制链接

扫一扫