HTML <img> 标签

在网页设计中，图像可以提高网页的美感，也可以提升内容的可读性。

在HTML中，使用<img>标签来定义一个图像。

HTML <img>基本语法

在HTML中，<img>标签的基本语法形式如下：

src属性用于给出图像的存储路径；

alt属性用于指定当图像加载失败或图片不存在时的说明性文字。

如果src属性指定的图片路径不存在这个图片，浏览器将以破碎的图片图标及alt属性中指定的文本显示在图片的位置。当图片能正确显示时，alt属性指定的内容对用户不可见。

浏览器支持

元素
<img>	谷歌	IE	Edge	Firefox	Safari	Opera
	支持	支持	支持	支持	支持	支持

所有的浏览器都支持<img>标签。

使用width和height设置图片的显示尺寸

你可以使用<img>的width属性和height属性为图片指定显示的尺寸。若未指定图片尺寸，浏览器在加载图片时，可能会出现闪烁抖动问题，图片过大时，在没有尺寸约束下，图片会撑破网页的布局，影响用户的体验。

使用style属性设置图片的样式

HTML <img>标签可以结束style属性为图片指定样式，如尺寸，边框等。

上面例子中的width属性和height属性可以使用style属性来实现。

在HTML中，使用style属性定义的标签样式要优先于样式表中的样式渲染标签，所以在使用style属性为<img>标签定义了样式后，它会阻止样式表中对<img>标签设置的样式，以便呈现出图片自己应有的样式。

使用服务器外部的图片

在<img>标签的src属性中可以指定当前服务器或网站之外的图片源。如，下面使用了w3schools网站中的一个动态图片。

使用网站内的图片时，可以借助相对路径或绝对路径来实现。绝对路径和相对路径的概念，可以参考这篇文章中有关相对路径和绝对路径的内容：HTML 链接。

使用图片作为链接

图片也可以作为链接，用户点击图片即可以进入目的网页中。

以上各个例子的效果，读者可以点击这里预览效果。

<img>对全局属性的支持

<img>支持HTML 全局属性。

常用的图片格式

在一个网站中，常用的图片格式主要有以下几种：

用户可以结合实际需要选择不同的图片格式。

以上讲解了HTML <img>标签的使用方法，如有疑问，请留言。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/HTML5/2023/6590.html