一、思维导图：
二、img标签语法结构
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>img标签</title>
</head>
<body>
① <img src="花花.jpg" />
② <img src="花花.jpg" width=" 100">
③ <img src="花花.jpg" height=" 178">
④ <img src="花花.jpg" width=" 200" title="这是华晨宇">
<!--alt属性：图像的替代文字-->
⑤ <img src="huahua.jpg" width="100" alt="对不起，你需要查看的图片不见了" />
</body>
</html>
代码说明：
1、img标签中的img其实是英文image的缩写，所以 img标签的作用，就是告诉浏览器我们需要显示一张图片。
2、img标签格式：<img src="">
其实img标签中的src是英文source的缩写，所以img标签中的src就是用来告诉img标签，需要显示的图片
3、注意点
- 和H系列的标签/p标签还有Hr标签不一样，img标签不会独占一行
- 使用width、height属性可能会使图片变形，想要等比例改变大小，可以只指定其中一个（宽度或高度），另一个会系统计算出来。
注释：图像的名称和尺寸是以属性的形式提供的。
4、属性：
（1）width、height属性就是指定显示图片的宽度和高度若无指定，则系统按照指定的高度、宽度来显示
（2）title属性：用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容
（3）alt:是alternate的缩写，它的作用就是用于告诉浏览器，当需要显示的图片找不到时显示什么内容
效果：
三、img标签的路径问题：
其实想给src属性赋值有两种方式：
1.通过相对路径赋值：
相对路径就是每次都从.html文件所在的文件夹开始查找，我们称之为相对路径。
- 1.1 *.html 文件跟 *.jpg 文件(同在f盘)在不同目录下：
<img src="file:///f:/*.jpg" width="300" height="120"/>- 1.2同级：指图片和.html文件存储在同一个文件夹中
格式：src="图片名称.jpg"
含义：在.html文件所在的文件夹中查找名称叫做"xxx.jpg"的图片
即：*.html 文件跟 *.jpg 图片在相同目录下：
<img src="*.jpg" width="300" height="120"/>- 1.3 下级：指存储图片的文件夹和.html文件在同一个文件夹中
格式：src="images/xxx.jpg"
含义：在.html文件所在的文件夹中找到名称叫做images的文件夹，然后在images文件夹中找到名称叫做xxx.jpg的图片
即：图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：
<img src="image/*.jpg/"width="300" height="120"/>- 1.4上级：存储图片的位置和存储代码的文件夹在用一个文件夹中
格式：src="../xxx.jpg"
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹，然后再在上一级文件夹中找到名称叫做xxx.jpg的图片
其中“../”代表从当前的位置找到上一级文件夹
即:图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：
<img src="../image/*.jpg/"width="300" height="120"/>
2.通过绝对路径赋值：
绝对路径就是每次都从指定的盘符开始查找.
- 格式：src="F:\学习资料\计算机学习资料\BS\HTML学习\花花.jpg"
例如：<img src="F:\学习资料\计算机学习资料\BS\HTML学习\花花.jpg">
- 含义：按照文件夹的名称一层一层的找。
- 如果图片来源于网络，那么写绝对路径：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
注意：
1.路径中不要出现中文，否则可能出现未知问题
2.如果是通过相对路径来指定，那么不能跨盘符
注意：
1.以后企业开发中如果需要编写路径，统一使用反斜杠"/"，不要使用正斜杠“\”。因为将来我们开发的程序肯跟会部署到其他操作写鸥汀的服务器上，而在其他操作系统中共路径都是"/"，所以如果你写的不是"/"，可能会引发问题。
2.一般在企业开发中不会使用绝对路径，因为绝对路径的可移植性不好，代码拷贝发给别人之后，可能就不能打开了。
扫一扫
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
