img标签及属性

一、img标签

1、img标签的作用：用来告诉浏览器我们需要显示一张图片

2、img标签格式：<img src = " xxx.jpg">

-- img标签中的src是英文source的缩写，src 是用来告诉img标签，需要显示的图片名称

3、注意点：

-- 和H系列标签、P标签、Hr标签不一样，img标签不会独占一行

4、img标签的属性

width：宽度

height：高度

-- img标签中的width和height 这两个属性的作用：是用来告诉标签将来需要显示的图片的宽和高

-- 如果 img 标签没有指定需要现实的图片宽高，那么系统会按照图片默认的宽高显示

-- 如果img 标签指定了宽高，那么系统会按照指定的宽高显示

-- 如果我们手动指定了img标签的宽高，有可能导致图片变形；如果想指定宽高的图片不变形，可以指定宽度或高度的其中一个值即可，只要指定其中一个值（高 / 宽），系统会自动根据该值计算出对应的宽 / 高，并且等比拉伸，不会变形

title：用来告诉浏览器，当鼠标悬停在图片时显示的内容

alt ：是英文alternate的缩写，用来告诉浏览器当需要显示的图片找不到时显示的内容

二、img标签路径问题：想给src属性赋值有2种方式

1、通过相对路径赋值：

-- 相对路径就是每次都是从.html文件所在文件夹开始查找

1.1 同级：是图片存放的位置和.html文件存储在同一个文件夹中，

格式：src = "Figure_1.png"

含义：在.html文件所在的文件夹中查找名称叫做Figure_1.png的图片

1.2 下级 ：是存储图片的文件夹和.html文件在同一个文件夹中

格式：src = "Images/Figure_1.png"

含义：在.html文件所在的文件夹中查找名称叫做Images的文件夹中找到名称叫做Figure_1.png的图片

1.3上级：存储图片的位置在存储.html的文件夹的上一级

格式：src = "../Figure_1.png"

含义：在.html文件所在的文件夹中查找这个文件夹的上一级文件夹，然后再在这个上一级文件夹中找到名称叫做Figure_1.png的图片

2、通过绝对路径赋值

-- 绝对路径就是每次都从指定的盘符开始查找

三、br标签

1、作用：用来换行

2、格式：<br>

3、注意点：

-- 多个br标签可以连续使用，使用了多少个br标签就会换多少行

-- 由于html的作用是用来给文本添加语义，而br标签的语义是不另外起一个段落换行，在企业开发中，一般情况下，需要换行都是因为需要另外起一个段落，所以企业开发中很少用br标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道了</title>
</head>
<body>
<!--只设置了img标签的src属性，其他默认-->
    <img src="Figure_1.png"><br>
    <p>设置了img标签的src、width、height属性，但宽高不是等比拉伸</p>
    <p><img src="Figure_1.png" width="300" height="478"></p>
    <P>设置了img标签的src、width</P>
    <P><img src="Figure_1.png" width="100"></P>
    <P>设置了img标签的src、height属性</P>
    <P><img src="Figure_1.png" height="178"></P>
    <P>设置了img标签的src、height属性</P>
    <P><img src="Figure_1.png" height="178" title="这是随便找的图片"></P>

    <P><img src="Figure_12.png" width="100" alt="你找的图片去到外太空了"></P>

</body>
</html>

猜你喜欢