Говоря об изображениях, я думаю, что все они знакомы, потому что в нашей повседневной жизни и использовании мы всегда можем видеть изображения, а изображения при использовании более выразительны и привлекательны, чем слова. Когда мы правильно используем изображения, мы можем создавать людей на веб-страницах. более красив и интуитивно понятен, особенно важен первый просмотр веб-страницы.
1. атрибут источника
Символ: изображение
Особенности: одна этикетка
Код:
<!doctypehtml><html><head><metacharset=utf-8><title>Вставить изображение HTML</title></head><body><p>Изображение для отображения:</p><imgsrc=fish .jpg></body></html>
Сводка: Вставку изображения можно выполнить, введя имя атрибута src в тег img, где значением атрибута src является «имя файла» или «путь/имя файла». Примечание. Вставляемое изображение должно находиться в файле. тот же файл, что и html-проект Caught! В этом разделе будут представлены ключевые пояснения.
2. Другие атрибуты
3. альтернативное использование
Описание: Если изображение по какой-либо причине не может быть отображено, отображается значение атрибута, соответствующее атрибуту alt.
Код:
<!doctypehtml><html><head><metacharset=utf-8><title>Вставить изображение HTML</title></head><body><p>Изображение для отображения:</p><imgsrc=potato .jpgwidth=500alt=Картошка></body></html>
Показано ниже:
4. Использование названия
Примечание. Если изображение отображается нормально, при наведении указателя мыши на изображение будет отображаться содержимое, соответствующее значению атрибута заголовка.
Код:
<!doctypehtml><html><head><metacharset=utf-8><title>Вставить изображение HTML</title></head><body><p>Изображение для отображения:</p><imgsrc=fish .jpgwidth=500alt=fish title=Это приготовленная рыба></body></html>
Эффект: Если картинку можно отобразить нормально, то при наведении мыши на картинку появятся слова «Это приготовленная рыба».
Отображается, как показано:
5. Характеристики атрибутов
Характеристики атрибутов тегов изображений применимы к большинству тегов HTML:
1. Атрибуты тега записываются внутри начального тега.
2. В теге одновременно может существовать несколько атрибутов.
3. Разделяйте атрибуты пробелами.
4. Имена и атрибуты тегов должны быть разделены пробелами.
5. Между атрибутами нет порядка.
6. Объяснение пути и межуровневая вставка изображений.
(1) Введение в путь
1. Абсолютный путь
Абсолютная позиция в каталоге может напрямую достигать целевого местоположения, обычно это относится к пути, начинающемуся с буквы диска или полного URL-адреса. При вставке html-изображений обычно не используются абсолютные пути, чаще используются относительные пути.
2. Относительный путь
Часто используется процесс поиска целевого файла, начиная с текущего файла.
(2) Вставляйте изображения на разных уровнях.
1. Тот же уровень
Если вставляемое изображение находится на том же уровне, что и созданный HTML-файл, его можно вставить напрямую. Значением атрибута src является «имя целевого файла. суффикс» или «./имя целевого файла. суффикс». Если при использовании компилятора для кода вы вводите первую букву имени файла того же уровня, компилятор часто автоматически выскакивает из остального содержимого.
Отображение кода: (при условии, что изображение называется «картинка» и имеет формат jpg)
<imgsrc=picture.jpg> или <imgsrc=./picture.jpg>
2. Подчиненный
Если html-файл находится на том же уровне, что и папка с файлом, и вставляемое изображение находится в папке с файлом, то вставка изображения в html-файл представляет собой операцию межуровневого доступа к изображению. Код выглядит следующим образом:
<imgsrc=file/picture.jpg>
3. Улучшенный
Если в папке total и другой папке test есть картинка, а в папке test находится html файл, то вставка картинки в html файл относится к обращению к папке верхнего уровня. Код такой:
<imgsrc=../picture.jpg>
Если вам нужен доступ к изображениям в верхних двухуровневых папках, код:
<imgsrc=../../picture.jpg>
4. Комплексное применение
Если есть две папки, файл1 и файл2, в файле1 хранится html-файл, а в файле2 хранится флаг изображения для вставки в формате jpg, то код вставки изображения флага в html-файл выглядит следующим образом:
<imgsrc=../file2/flag.jpg>
(Сначала вернитесь на предыдущий уровень, затем посетите следующий уровень)