HTML标签：图片标签

img标签语法为：<img src="图片的URL" />

能插入的图片类型

• 能够插入的图片类型：jpg(jpeg)、gif、png、bmp等。
• 不能往网页中插入图片的格式是：psd、ai等。
  HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

img标签的src属性

• src属性：图片的路径，相对路径、绝对路径

写法一：图片的相对路径
相对当前页面所在的路径。两个标记（.——当前目录）和（..——上一层目录）
举例：

<!--当前目录中的图片-->
<img src="2.jpg">
<img src=".\2.jpg">

<!--上一级目录中的图片-->
<img src="..\2.jpg">

相对路径不会出现此情况：

aa/../bbb/1.jpg

要么不写../,要么就写在开头。

相对路径的面试题。
有如下文件层级图，若想在index.html中插入1.png，那么对应的img语句是？

分析：document文件包含work和photo。work中又有一个文件夹myweb。myweb文件中有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。
答案:

<img src="../../photo/1.png"/>

写法二：图片的绝对路径
（1）以盘符开始的绝对路径。例：

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

(2)网络绝对路径。例：

<img src="http://img.smyhvae.com/20200122_200901.png">

总结：

不管是a标签还是img标签，要用路径。只有两种路径可用，相对路径和绝对路径。

• 相对路径从自己出发，找到别人。
• 绝对路径，就是http://或者https://开头的路径。
• 绝对不允许使用file://开头的文件，完全错误！

img标签的其他属性

width、height 属性

• width:图像的宽度。
• height:图像的高度。
  提示：如果想保证图片等比例缩放，只设置width和height中一个。

Alt属性

• alt：当图片不可用（无法显示时），代替图片显示的内容。

如上图，当图片src不可用时，显示文字进行提示。

title属性

• title：提示性文本。鼠标停顿时出现的文本。

align属性

• align：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。
  1、align=“ ”，图片和文字低端对齐，botton默认下的效果：
  
  2、align="center":图片和文字水平方向上居中对齐。效果显示：
  
  3、align="top"：图片和文字顶端对齐。显示效果：
  
  4、align="left"：图片在文字的左边。显示效果：
  
  5、align="right"：图片在文字的右边。