Hablando de imágenes, creo que todo el mundo las conoce, porque en nuestra vida y uso diario, siempre podemos ver imágenes, y cuando las usamos, las imágenes son más expresivas y atractivas que las palabras. Cuando las usamos apropiadamente, podemos hacer que las personas La página web. Es más hermoso e intuitivo, especialmente la primera visualización de la página web es muy importante.
1. atributo origen
Símbolo: img
Características: etiqueta única
Código:
<!doctypehtml><html><head><metacharset=utf-8><title>Imagen de inserción HTML</title></head><body><p>Imagen que se mostrará:</p><imgsrc=fish .jpg></body></html>
Resumen: La inserción de la imagen se puede completar introduciendo el nombre del atributo src en la etiqueta img, donde el valor del atributo de src es "nombre de archivo" o "ruta./nombre de archivo". Nota: La imagen a insertar debe estar en el archivo. mismo archivo que el proyecto html ¡Atrapado! Esta sección proporcionará explicaciones clave.
2. Otros atributos
3. uso alternativo
Descripción: Cuando la imagen no se puede mostrar por algún motivo, se muestra el valor del atributo correspondiente al atributo alt.
Código:
<!doctypehtml><html><head><metacharset=utf-8><title>Imagen de inserción HTML</title></head><body><p>Imagen que se mostrará:</p><imgsrc=potato .jpgwidth=500alt=Patata></body></html>
Se muestra a continuación:
4. Uso del título
Nota: Si la imagen se muestra normalmente, cuando el mouse pasa sobre la imagen, se mostrará el contenido correspondiente al valor del atributo del título.
Código:
<!doctypehtml><html><head><metacharset=utf-8><title>Imagen de inserción HTML</title></head><body><p>Imagen que se mostrará:</p><imgsrc=fish .jpgwidth=500alt=pescado title=Este es un pescado cocido></body></html>
Efecto: si la imagen se puede mostrar normalmente, si pasa el mouse sobre la imagen, aparecerán las palabras "Este es un pescado cocido".
Se muestra como se muestra:
5. Características de los atributos
Las características de los atributos de las etiquetas de imagen son aplicables a la mayoría de las etiquetas HTML:
1. Los atributos de la etiqueta están escritos dentro de la etiqueta de inicio.
2. Pueden existir varios atributos en la etiqueta al mismo tiempo.
3. Separe los atributos con espacios.
4. Los nombres y atributos de las etiquetas deben estar separados por espacios.
5. No hay orden entre los atributos.
6. Explicación de la ruta e inserción de imágenes entre niveles.
(1) Introducción al camino
1. Camino absoluto
La posición absoluta en el directorio puede llegar directamente a la ubicación de destino, generalmente refiriéndose a la ruta que comienza desde la letra de la unidad o la URL completa. Al insertar imágenes html, generalmente no se utilizan rutas absolutas y las rutas relativas se utilizan más comúnmente.
2. Camino relativo
A menudo se utiliza el proceso de encontrar el archivo de destino a partir del archivo actual.
(2) Insertar imágenes en todos los niveles
1. Mismo nivel
Cuando la imagen que se va a insertar está al mismo nivel que el archivo html creado, se puede insertar directamente. El valor del atributo de src es "nombre de archivo de destino. sufijo" o "./nombre de archivo de destino. sufijo". Cuando se utiliza el compilador para codificar, si ingresa la primera letra del nombre del archivo del mismo nivel, el compilador a menudo saltará automáticamente del resto del contenido.
Visualización de código: (suponiendo que la imagen se llame imagen y esté en formato jpg)
<imgsrc=imagen.jpg> o <imgsrc=./imagen.jpg>
2. subordinado
Si el archivo html está en el mismo nivel que la carpeta de archivos y la imagen que se insertará está en la carpeta de archivos, entonces insertar la imagen en el archivo html es una operación de acceso a imágenes entre niveles. El código es el siguiente:
<imgsrc=archivo/imagen.jpg>
3. superiores
Si hay una imagen en la carpeta total y otra carpeta de prueba, y el archivo html está en la carpeta de prueba, insertar la imagen en el archivo html pertenece al acceso a la carpeta de nivel superior. El código es el siguiente:
<imgsrc=../imagen.jpg>
Si necesita acceder a las imágenes en las carpetas superiores de dos niveles, el código es:
<imgsrc=../../imagen.jpg>
4. Aplicación integral
Si hay dos carpetas, archivo1 y archivo2, el archivo1 almacena el archivo html y el archivo2 almacena la bandera de imagen que se insertará en el formato jpg, entonces el código para insertar la imagen de la bandera en el archivo html es el siguiente:
<imgsrc=../file2/flag.jpg>
(Regrese primero al nivel anterior, luego visite el siguiente nivel)