HTML图片标签

img 单标签 ， 是行内块标签

src 属性 填写图片文件路径

alt 属性 描述图片

<style>
        img {
            width: 200px;
        }
    </style>

    <img src="photo/p2.jpeg"  alt="这是一朵美丽的荷花" title="美丽的荷花">
    <img src="photo/icon1.png" alt="图标1">
    <img src="./photo/icon1.png" alt="图标1">
    <img src="../icon2.png" alt="图标1">

路径问题：

 以后看到404 要联想到路径拼写问题，

404的意思是找不到资源，找不到对象的意思。

1） 本地相对路径 （推荐）

./      当前路径

 ../     上一级目录路径

../../  上上一级目录路径

注明： 此处这个http路径，是讲台电脑的环境下的图片路径。

除非你的电脑是把HTMLCSS作为工作目录（意思直接把“HTMLCSS”这个目录拖拽到vscode打开）

2） http环境下相对路径

 <img src="http://127.0.0.1:5500/p1.jpeg" alt="图片p1">

3) 绝对路径：带电脑盘符 （在客户端通常不推荐使用，浏览器叫做客户端）

例如： E:\stu\GZH52429\HTMLCSS\DAY01

这种路径的图片，需要在文件传输协议上 file:///E:/ 才能访问到。

<img src="D:\HTMLCSS\icon2.png" alt="图标2">

4）线上的图片路径

这种是别人服务器的图片路径，需要连网才能访问。

<img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="">
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="">