Img tag | Img элемент | HTML5 элемент изображения
Элемент <img>, как и большинство элементов, является контейнером. Это не само по себе изображение, а вместилище для него.
Так же, как элемент p содержит абзац, элемент img содержит изображение. Однако это происходит совсем по-другому. В частности, изображение представляет собой отдельный файл, который загружается в пространство, созданное элементом img.
Существует три типа файлов изображений, используемых в HTML, обозначенных различными расширениями имени файла: .jpg, .gif и .png (также известные как JPEG, GIF и PING); на что мы посмотрим дальше.
Давайте сначала посмотрим, что я использовал для отображения изображения ниже. Обратите внимание, что закрывающего тега нет. Это один из немногих элементов, который их не использует.
<img src = "images / atitlan.jpg" class = "flr" alt = "Озеро Атитлан, Гватемала" width = "300" height = "240">
Озеро Атитлан, Гватемала, Калифорния * Элемент img имеет ряд атрибутов: **
Атрибут « src » или « источник» сообщает браузеру, какое изображение (т.е. файл изображения) находится в теге и где его найти. Требуется. Браузер отправляет на сервер инструкции перейти в папку с именем images, получить файл atitlan.jpg, отправить его обратно клиенту (т. Е. Вашему компьютеру) и показать его в пространстве, зарезервированном тегом image. Элемент img может иметь атрибут « class », как и большинство элементов. Вы можете размещать изображения, добавлять границы, поля и многое другое с помощью CSS. Атрибут « alt » относится к альтернативному тексту или тексту, который W3C называет «резервным контентом». Это тоже обязательно. Если по какой-то причине посетители не могут видеть изображение, атрибут alt объясняет, что это за изображение. Основными посетителями, которые не могут «видеть» изображения, являются веб-сканеры, разосланные поисковыми системами. Как я неоднократно говорил на протяжении всего урока, у сайтов есть две аудитории - вторыми являются сканеры. Атрибуты alt играют важную роль в SEO. Хотя « высота » и « ширина » не требуются, они настоятельно рекомендуются. Страницы не загружаются все сразу. Когда открывается новая страница, браузер начинает загружать то, что он может, когда он может, и часто изображения заканчивают загружаться в последнюю очередь. С установленными атрибутами высоты и ширины браузер может позиционировать (с помощью CSS) и изменять размер тега img до загрузки файла изображения.В атрибуте source есть два способа показать то, что известно как « путь » к файлу изображения:
« Абсолютный путь »: <img src = "https://www.html-5-tutorial.com/images/atitlan.jpg" ... « Относительный путь »: <img src = "images / atitlan.jpg "...Последний является «относительным» в том смысле, что его местоположение на сервере относительно местоположения запрашивающего его файла html, в данном случае это: image-element.htm - другими словами, эта страница.
На моем сервере есть папка (также называемая «каталогом») с именем «html-5-tutorial.com» - «корневой каталог». В корневом каталоге находится файл image-element.htm и папка с именем images , которая в свою очередь содержит atitlan.jpg .
Файловая система на сервере работает так же, как файловая система на вашем компьютере, за исключением того, что к ней можно получить доступ из Интернета. У вашего компьютера есть брандмауэр (или, по крайней мере, так и должен), который блокирует вход извне.
Важно, чтобы вы понимали, как работают пути, поскольку это относится ко всем файлам, используемым на любом сайте. CSS, javascript, PHP - что у вас есть - все хранятся в файлах, и для доступа к файлу любого типа вы должны следовать по пути. Даже URL этой страницы: https://www.html-5-tutorial.com/image-element.htm (или любая другая страница на любом сайте) - это просто путь. Мы будем больше работать с путями по мере продвижения в этом уроке. Если вы в замешательстве, все, что я могу сказать, это не беспокоиться. Может быть, еще хуже, прежде чем станет лучше, но станет лучше ... в конце концов.
Это был первый раз, когда я сделал страницу с фотографиями, которую я действительно увлекся веб-дизайном. Внезапно мои молодые усилия привели к тому, что я смог показать миру.
Расширение имени файла представляет собой суффикс (отделенный от имени базового файла точкой) к имени компьютерного файла.
википедия
* Я живу в маленькой деревне в горах Гватемалы в Центральной Америке недалеко от озера Атитлан. Вы должны знать, что изображения могут быть вложены в якорные метки и часто есть.
** Атрибуты не должны идти в каком-либо определенном порядке.