1.图像标签简介

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL" />

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

2.图像标签写法

<img src="08-千玺.jpg" alt="亲，图片加载错误" title="这是千玺" width="300" border="15" />

img图片属性.png

注意：

1.图像标签可以拥有多个属性，各必须写在标签名的后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
4.图片的width和height属性只需要设置其中一个，另一个就会等比例缩放。同时设置两个会使图片压缩失真。

3.路径

3.1绝对路径

3.1.1直接从根目录开始写图片位置

<img src="D:\0code\day01\images\images2\12-千玺.jpg" alt="图片无法加载" width="300" />

优点：
1.运行环境简单明了，不随网页位置的变化而变化。
2.比较安全。
缺点：
1.当html在别的电脑上打开，或者图片更换了盘符之后，图片就没办法在页面中显示，图片的移植性较差。

3.1.2图像地址https://

在网站上右键点击复制图像地址，写入src中就可成功引入。

<img src="https://ac.gtimg.com/media/images/ac_logo.png" width="500" />

优点：
1.路径简单明了，便与搜索引擎搜索。
2.只要有网络，不管html文件怎么移动，图片还能正常显示。
缺点：
不容易移植，如果网站域名变化，所有的图片会全部失效。

3.2相对路径

以html文件所在位置为参考基础，而建立出的目录路径。即图片相对于 HTML 页面的位置。

路径.gif

<img src="同一级路径图片名字.png" />
<img src="同一级路径/下一级路径图片名字.png" />
<img src="../上一级路径图片名字.jpg" />

3.2.1图片和html在同一级

直接书写即可，一定要加上图片的后缀名。

<img src="08-千玺.jpg" />

3.2.2图片在文件的下一级

<img src="images/images2/12-千玺.jpg" />

03.图像标签img