Manual de referencia HTML

大全 de etiquetas HTML

HTML: <input> etiqueta HTML: <iframe> etiqueta

HTML: <img> etiqueta

La etiqueta <img> de HTML define una imagen en un documento HTML. Este etiqueta también se conoce comúnmente como el 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="32height="32">
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the <img> tag.

Difference between alt and title attributes of the image:

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 of the tag

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 <img> tag creates a placeholder for the referenced image.

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

HTML 4.01 With HTML5Differences

HTML5 Does not support the following attributes: align, border, hspace, longdesc, vspace.

In HTML 4.01 In, the following attributes: align, border, hspace, vspace are 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 No soportado. HTML 4.01 Abandonado. 　　Define how the image is aligned according to the surrounding text
alt	text	Define the alternative text of the image
border	píxeles	HTML5 No soportado. HTML 4.01 Abandonado. 　　Define the border around the image
crossoriginHTML5	anonymous use-credentials	Set the cross-domain attribute of the image
height	píxeles	Define the height of the image.
hspace	píxeles	HTML5 No soportado. HTML 4.01 Abandonado. 　　Define el espacio en blanco izquierdo y derecho de la imagen.
ismap	ismap	Define la imagen como un mapa de imágenes del lado del servidor.
longdesc	URL	HTML5 No soportado. HTML 4.01 Abandonado. 　　Punta a la URL que contiene un documento de descripción de imagen larga.
src	URL	Define la URL para mostrar la imagen.
usemap	#mapname	Define la imagen como un mapa de imágenes del lado del cliente.
vspace	píxeles	HTML5 No soportado. HTML 4.01 Abandonado. 　　Define el espacio en blanco superior e inferior de la imagen.
width	píxeles	Define el ancho de la imagen.

Atributos globales

Soporte de <img> etiqueta Atributos globales de HTML.

Atributos de eventos

Soporte de <img> etiqueta Atributos de eventos de HTML.

Pruebe el ejemplo en línea

Alinear imágenes
Este ejemplo demuestra cómo alinear imágenes en el texto.

Imágenes flotantes
Este ejemplo demuestra cómo hacer que la imagen flote a la izquierda o derecha del párrafo.

Configurar el enlace de la imagen
Este ejemplo demuestra cómo usar una imagen como un enlace.

Crear un mapa de imágenes
Este ejemplo muestra cómo crear un mapa de imágenes con áreas clicables. Cada área es un enlace.