Latest web development tutorials

imagen HTML

Ejemplos

Norwegian Mountain Trip

pulpito

Trate »

Ejemplos

ejemplos en línea

Insertar una imagen
Este ejemplo muestra cómo mostrar imágenes en una página web.

Insertar imágenes desde diferentes ubicaciones
Este ejemplo demuestra cómo las diferentes imágenes de la carpeta o del servidor para mostrar páginas Web.

(Puede encontrar más ejemplos en la parte inferior de esta página.)


imagen HTML - la etiqueta de la imagen (<img>) y un atributo de origen (SRC)

En HTML, las imágenes son definidas por la etiqueta <img>.

<Img> está vacía, lo que significa que contiene atributos, y no etiqueta de cierre.

Para mostrar la imagen en la página, es necesario utilizar el atributo de origen (src). src hace referencia a la "fuente". Valor del atributo de origen es la dirección URL de la imagen.

sintaxis de la imagen personalizada es:

<img src="url" alt="some_text">

URL hace referencia a la ubicación para almacenar imágenes. Si la imagen se denomina "boat.gif" ubicado www.w3school.com.cn el directorio de imágenes, el URL es http://www.w3school.com.cn/images/boat.gif.

El navegador mostrará la imagen en el documento donde aparece la etiqueta de imagen. Si se pone una etiqueta de imagen entre dos párrafos, el navegador mostrará en primer lugar el primer párrafo, a continuación, mostrar la imagen que aparece último párrafo segundo.


imágenes HTML - Atributo Alt

atributo alt se utiliza como una definición alternativa de una serie de imágenes de texto preparados.

Reemplazar propiedades de texto son los valores definidos por el usuario.

<img src="boat.gif" alt="Big Boat">

Cuando un navegador no puede cargar imágenes, vuelva a colocar los atributos de texto dicen los lectores pierden información. En este caso, el navegador mostrará el texto alternativo en lugar de imágenes. La imagen de la página se combinan con la propiedad de texto de sustitución es un buen hábito, lo que ayuda a una mejor información de la pantalla, y para aquellos que utilizan el navegador de texto sin formato es muy útil.


HTML Imágenes - Ajuste la altura de la imagen y el ancho

altura (altura) y el ancho (ancho) Propiedad para establecer el ancho y la altura de la imagen.

El valor por defecto del atributo en píxeles:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Consejo: Una buena imagen de la altura y la anchura especificada del hábito. Se conservará el tamaño especificado si la altura de la imagen se especifica la anchura, cuando se carga la página. Si no se especifica el tamaño de la imagen, es posible cuando se carga la página socavarían la disposición general de las páginas HTML.


precauciones básicas - consejos útiles:

Nota: Si un archivo HTML contiene diez imágenes, a continuación, con el fin de visualizar correctamente esta página, necesitas cargar 11 archivos.foto de carga lleva tiempo, por lo que nuestro consejo es: foto precaución.

Nota: Cuando se carga la página, a prestar atención a insertar ruta imagen de la página, si la posición de la imagen no se puede ajustar correctamente, el navegador no puede cargar la imagen, la etiqueta de la imagen mostrará una imagen rota.


Ejemplos

más ejemplos

Arreglos fotos
Este ejemplo demuestra cómo organizar las imágenes en el texto.

Imágenes flotantes
Este ejemplo demuestra cómo hacer que el flotador imagen al párrafo izquierda o hacia la derecha.

Configuración de enlace de la imagen
Este ejemplo muestra cómo utilizar la imagen como un enlace.

Creación de un mapa de imagen
Este ejemplo muestra cómo crear mapas de imágenes con áreas se puede hacer clic. Cada una de estas regiones es un hipervínculo.


etiqueta de imagen HTML

标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域