5.HTML基础——img标签

img标签

1.什么是img标签

img标签中的img其实是英文image的缩写。所以img标签的作用，就是告诉浏览器我们需要显示一张图片。

2.img标签的格式

< img src=" " >
img —— 代表一个标签
src="" —— 代表一个属性
img标签中的src是英文source的缩写
所以img标签中的src就是用来告诉img标签，需要显示的图片名称

3.注意

• 和H系列标签、P标签还有Hr标签不一样，img标签不会独占一行
• 如果我们手动指定img标签显示的图片的宽度和高度，有可能会导致图片的变形；
• 那么如果又想要指定高度和宽度，又不想让图片变形，我们可以只指定宽度和高度其中一个值，只要指定了高度，浏览器会自动根据比例计算出宽度，也就不会导致图片的变形。

4.属性

除了src属性，还有其他属性

1. width：宽度
2. height：高度
   所以在img标签中width/height这两个属性的作用：
   就是用来告诉img标签将来需要显示的图片有多宽有多高。如果img标签没有指定需要显示的图片的宽度和高度，那么浏览器会按照图片默认的宽度和高度来显示；如果img标签指定宽度高度，那么浏览器会按照指定的宽高来显示
3. title：用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容
4. alt：其实是alternate的缩写，它的作用就是告诉浏览器，当需要的图片找不到时显示什么内容

<img src="71a66149764fd076d31d8d90996010c.png">

<img src="71a66149764fd076d31d8d90996010c.png" width="400" height="500">

<img src="71a66149764fd076d31d8d90996010c.png" width="500" >

<img src="71a66149764fd076d31d8d90996010c.png" width="500" title="这个是图片">

<img src="71a66149764fd076d31d8d90996010c1.png" width="500" alt="对不起，你需要查看的图片不见了">

运行截图：