Falando em imagens, acredito que todos as conheçam, porque no nosso dia a dia e no nosso uso, sempre podemos ver imagens, e as imagens são mais expressivas e atraentes do que palavras quando usadas de forma adequada, podemos tornar as pessoas a página da web. fica mais bonito e intuitivo, principalmente a primeira visualização da página é muito importante.
1. atributo src
Símbolo: imagem
Características: rótulo único
Código:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML inserir imagem</title></head><body><p>Imagem a ser exibida:</p><imgsrc=fish .jpg></body></html>
Resumo: A inserção da imagem pode ser concluída introduzindo o nome do atributo src na tag img, onde o valor do atributo src é "nome do arquivo" ou "caminho./nome do arquivo". mesmo arquivo do projeto html Caught! Esta seção fornecerá explicações importantes.
2. Outros atributos
3. uso alternativo
Descrição: Quando a imagem não pode ser exibida por algum motivo, o valor do atributo correspondente ao atributo alt é exibido.
Código:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML inserir imagem</title></head><body><p>Imagem a ser exibida:</p><imgsrc=potato .jpgwidth=500alt=Batata></body></html>
Mostrado abaixo:
4. Uso do título
Nota: Se a imagem for exibida normalmente, ao passar o mouse sobre a imagem, o conteúdo correspondente ao valor do atributo título será exibido.
Código:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML inserir imagem</title></head><body><p>Imagem a ser exibida:</p><imgsrc=fish .jpgwidth=500alt=fish title=Este é um peixe cozido></body></html>
Efeito: Se a imagem puder ser exibida normalmente, se você passar o mouse sobre a imagem, as palavras “Este é um peixe cozido” aparecerão.
Exibido conforme mostrado:
5. Características dos atributos
As características dos atributos das tags de imagem são aplicáveis à maioria das tags HTML:
1. Os atributos da tag são escritos dentro da tag inicial.
2. Vários atributos podem existir na tag ao mesmo tempo
3. Separe os atributos com espaços.
4. Os nomes e atributos das tags devem ser separados por espaços.
5. Não há ordem entre os atributos.
6. Explicação do caminho e inserção de imagens em vários níveis
(1) Introdução ao caminho
1. Caminho absoluto
A posição absoluta no diretório pode atingir diretamente o local de destino, geralmente referindo-se ao caminho que começa na letra da unidade ou no URL completo. Na inserção de imagens HTML, os caminhos absolutos geralmente não são usados, e os caminhos relativos são mais comumente usados.
2. Caminho relativo
O processo de localização do arquivo de destino a partir do arquivo atual é frequentemente usado.
(2) Insira imagens em todos os níveis
1. Mesmo nível
Quando a imagem a ser inserida está no mesmo nível do arquivo html criado, ela pode ser inserida diretamente. O valor do atributo src é "nome do arquivo de destino. sufixo" ou "./nome do arquivo de destino. sufixo". Ao usar o compilador para codificar, se você inserir a primeira letra do nome do arquivo do mesmo nível, o compilador geralmente saltará automaticamente do restante do conteúdo.
Exibição de código: (assumindo que a imagem se chama imagem e está no formato jpg)
<imgsrc=picture.jpg> ou <imgsrc=./picture.jpg>
2. Subordinado
Se o arquivo html estiver no mesmo nível da pasta de arquivos e a imagem a ser inserida estiver na pasta de arquivos, inserir a imagem no arquivo html será uma operação de acesso de imagem em nível cruzado.
<imgsrc=arquivo/imagem.jpg>
3. Superior
Se houver uma imagem na pasta total e outra pasta de teste, e o arquivo html estiver na pasta de teste, inserir a imagem no arquivo html pertence ao acesso à pasta de nível superior. O código é o seguinte:
<imgsrc=../imagem.jpg>
Se você precisar acessar as imagens nas pastas superiores de dois níveis, o código é:
<imgsrc=../../picture.jpg>
4. Aplicação abrangente
Se houver duas pastas, arquivo1 e arquivo2, arquivo1 armazena o arquivo html e arquivo2 armazena a bandeira da imagem a ser inserida no formato jpg, então o código para inserir a imagem da bandeira no arquivo html é o seguinte:
<imgsrc=../file2/flag.jpg>
(Volte primeiro ao nível anterior e depois visite o próximo nível)