vscode——HTML基本标签图片

最新推荐文章于 2024-08-13 01:30:21 发布

iheyu

最新推荐文章于 2024-08-13 01:30:21 发布

阅读量1.8w

点赞数 13

分类专栏： html 文章标签： src属性 alt属性 title属性链接地址

本文链接：https://blog.csdn.net/iheyu/article/details/99674303

版权

html 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1.在html中显示图片用——><img>——>显示图片就用到<img src=">属性；
****切记要把图片“重命名——>放到对的路径里面才可以哟!"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片</title>
</head>
<body>
    <img src="dudu.jpg">
</body>
</html>

2. alt属性是可替换属性——>例如:<img src="dudu.jpg"  alt="航钰家的狗狗" >——>解释说明前面src属性的——>图片显示不出来——> alt属性后面的字就会显示出来；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="dudu1.jpg" alt="航钰家的狗狗">
</body>
</html>

3.title属性——>是对图片一种补充说明——>点击到图片上停留一会——>title后面的字就会出现；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="dudu2.jpg" alt="航钰家的狗狗" title="汪汪...">
</body>
</html>

4.常用的图片格式有三种：
jpg:有损压缩——>会影响画质——>图片会比较小——>没有透明通道;
png: 无损压缩 ——> 不影响画质——> 比jpg的图片大——> 有了背景才能看出来透明通道;
fig：动图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="background-color: yellowgreen">
    <img src="dudu2.jpg" alt="航航家的狗狗" title="汪汪...">
    <img src="tp123.png" alt="">
    <img src="timg.gif" alt="">
</body>
</html>
5.图片访问方式有二种：
1.网络图片
<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/20d5c57e839fa986939e2e6aec94728b_222_222.jpg">
如图：004
2.本地图片
1.用绝对路劲访问——>从盘符算起的路径
<img src="C:\Users\Administrator\Desktop\新建文件夹\is\dudu2.jpg" alt="航钰家的狗狗" title="汪汪...">
2.用相对路劲访问——>从当前路劲算起的路径
<img src="dudu2.jpg" alt="航航家的狗狗" title="汪汪...">