HTML基础——图像标签（img标签）

一、思维导图：

二、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="data:images/xxx.jpg"

含义：在.html文件所在的文件夹中找到名称叫做images的文件夹，然后在images文件夹中找到名称叫做xxx.jpg的图片

即：图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：

<img src="data: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.一般在企业开发中不会使用绝对路径，因为绝对路径的可移植性不好，代码拷贝发给别人之后，可能就不能打开了。