Manual de referência HTML

大全 de etiquetas HTML

HTML: <img> tag

A etiqueta <img> do HTML define uma imagem no documento HTML. Este rótulo também é conhecido como elemento <img>.

Online example

How to insert an image:

Example

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<img src="pig.gif" alt="pig face" width="32" height="32">
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the <img> tag.

Difference between image alt and title attributes:

The alt attribute of the image is the text hint displayed when the image cannot be displayed normally.
The title attribute of the image is the text hint displayed when the mouse moves over the element.

Definition and usage instructions

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

The <img> tag may support the following image formats: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico (depending on the browser).

Note:Technically, the image is not inserted into the HTML page but linked to the HTML page. The role of the <img> tag is to create a placeholder for the referenced image.

Tip:By nesting <img> tags within <a> tags, add links to another document for the image.

HTML 4.01 With HTML5Differences

HTML5 The following attributes are not supported: align, border, hspace, longdesc, vspace.

In HTML 4.01 In the following attributes: align, border, hspace, vspace have been deprecated.

Differences between HTML and XHTML

In HTML, the <img> tag does not have a closing tag.
In XHTML, the <img> tag must be closed correctly.

Attribute

New: HTML5 New attribute added in

Attribute	Value	Description
align	top 　bottom 　middle 　left 　right	HTML5 Não suportado. HTML 4.01 Descontinuado. 　　Define how the image is aligned according to the surrounding text
alt	text	Define the alternative text of the image
border	pixels	HTML5 Não suportado. HTML 4.01 Descontinuado. 　　Define the border around the image
crossoriginHTML5	anonymous use-credentials	Set the cross-domain attribute of the image
height	pixels	Define the height of the image.
hspace	pixels	HTML5 Não suportado. HTML 4.01 Descontinuado. 　　Define o espaço vazio à esquerda e à direita da imagem.
ismap	ismap	Define a imagem como um mapa de imagem do servidor.
longdesc	URL	HTML5 Não suportado. HTML 4.01 Descontinuado. 　　Ponto para URL que contém uma descrição longa da imagem.
src	URL	Define a URL para exibir a imagem.
usemap	#mapname	Define a imagem como um mapa de imagem do cliente.
vspace	pixels	HTML5 Não suportado. HTML 4.01 Descontinuado. 　　Define o espaço vazio no topo e na parte inferior da imagem.
width	pixels	Define a largura da imagem.

Atributos Globais

O tag <img> suporta Atributos Globais do HTML.

Atributos de Evento

O tag <img> suporta Atributos de Evento do HTML.

Experimente o exemplo online

Alinhar Imagem
Este exemplo demonstra como alinhar uma imagem no texto.

Imagem Flutuante
Este exemplo demonstra como fazer uma imagem flutuar até a esquerda ou direita do parágrafo.

Configurar Link de Imagem
Este exemplo demonstra como usar uma imagem como um link.

Criar Mapa de Imagem
Este exemplo mostra como criar um mapa de imagem com áreas clicáveis. Cada área é um hyperlink.