✅ HTML теги изображений - Поддержка и совместимость с атрибутами тега изображения

Что такое HTML-теги изображений?
Фоновая картинка

Что такое HTML-теги изображений?

В следующей статье будет представлен обзор тегов изображения HTML. Я знаю его клише, но позвольте мне начать с того, что картинка стоит тысячи слов. В случае с веб-страницами это особенно верно. Изображение может продать посетителя с вашей идеей, произвести впечатление на кого-то, чтобы купить ваш продукт, и это может помочь веб-странице выглядеть намного лучше. В этом руководстве мы рассмотрим, как мы можем добавить IMG на веб-страницы и правильно их выровнять вместе с добавлением ссылок на них.

Добавление изображений на веб-страницы

Вы можете добавить IMG на страницу HTML, используя тег в документе HTML, вот синтаксис:

Здесь IMG сообщает браузеру, что тег предназначен для добавления IMG к документу, а «src =» указывает, откуда загрузить изображение.

Пример страницы с изображением

Example HTML IMG Tag alt = " Software development icon " height = " 150 " width = "140" />

Вот вывод кода:

Один интересный факт об этих HTML-страницах заключается в том, что когда вы используете тег IMG, изображение не вставляется на указанную веб-страницу, а вместо этого создает пространство для хранения, куда помещается изображение после его загрузки.

Поддержка браузера и совместимость с атрибутами

Как вы можете ожидать, все современные браузеры поддерживают изображения и используют теги IMG. Иногда мобильные браузеры изменяют размер изображения, чтобы оно помещалось на экране, если изображение не настроено как адаптивное.

Когда дело доходит до совместимости атрибутов с HTML 4.01 и более новым HTML5, большинство тегов будут работать, за исключением выравнивания, border, hspace и vspace, которые просто не поддерживаются в последнем.

Изображения в качестве ссылки:

Будут времена, когда вы захотите, чтобы изображение работало как ссылка на другую страницу. Вы можете сделать это, добавив тег IMG внутри тега.

Установка изображения в качестве фона веб-страницы

Вы можете назначить изображение в качестве фонового изображения веб-страницы, используя CSS-свойство background-image в элементе Body страницы.

Фоновая картинка

Установка изображения для плавания в браузере

Мы можем использовать свойство CSS «float», чтобы установить изображение для перемещения внутри в любом месте окна браузера. Давайте посмотрим на пример, который поможет вам в понимании.

Здесь изображение автомобиля будет плавать в правой части текста.

Здесь изображение машины будет всплывать в левой части текста.

Атрибуты тега изображения

Ниже приведены атрибуты тега изображения.

1) Юстировка

Возможные значения: верхняя, нижняя, средняя, левая или правая.

Атрибут alight используется для указания выравнивания изображения на веб-странице.

2) Alt

Тип значения: текст

Alt используется для указания альтернативного текста изображения веб-страницы. В тех случаях, когда отображение IMG невозможно, браузер отображает этот текст для пользователя. Поисковые системы, такие как Google и Bing, используют этот альтернативный текст для отображения результатов поиска изображений.

3) Пограничный

Тип значения: Пиксели

Он используется для создания границы пользовательской толщины вокруг изображения. Это не работает в HTML5.

4) Кросс-Происхождение

Тип значения: Анонимное использование-Учетные данные

Этот атрибут используется, когда мы хотим указать, как должны обрабатываться фотографии из разных источников. Это в основном используется в тех случаях, когда используются элементы canvas веб-приложений JavaScript.

5) Высота

Тип значения: проценты или пиксели

Очевидно, это используется для обозначения высоты изображения на веб-странице HTML.

6) HSPACE

Тип значения: Пиксели

Не поддерживается в HTML5, атрибут hspace используется для указания в пикселях, сколько пробелов нужно было добавить слева и справа от вставленного изображения.

7) ISMAP

Тип значения: URL страницы

ismap, который мы использовали для определения упомянутого изображения как карты изображений на стороне сервера. Когда пользователь щелкает (или нажимает) внутри изображения, браузеры отправляют координаты щелчка (или касания) на веб-сервер в виде URL-адреса.

8) Longdesc

Тип значения: URL

Longdesc используется для подробного описания изображения с помощью URL. URL, используемый в атрибуте, используется как описание изображения.

9) SRC

Тип значения: URL

src означает источник и используется для указания адреса, с которого браузер будет извлекать изображение. Этот URL-адрес может быть применен к изображению в каталоге на том же сервере, а также может сохранять изображение на стороннем сервере с другое доменное имя.

10) usemap

Тип значения: #mapname

Атрибут usemap используется для определения изображения для клиентской карты изображений. Карта использования всегда используется с HTML-тегами карты и области.

11) VSPACE

Тип значения: Пиксели

Не поддерживается в HTML5, атрибут Vspace используется для установки количества пикселей, которые будут использоваться в качестве пробела в верхней и нижней части изображения на веб-странице.

12) Ширина

Тип значения: Пиксели

Как и следует из его названия, атрибут width используется для указания ширины изображения внутри веб-страницы HTML.

Вывод - HTML теги изображений

Теперь, когда мы рассмотрели, как изображения добавляются на HTML-страницы и как устанавливать их атрибуты, мы можем создавать привлекательные веб-страницы в веб-проекте.

Помимо добавления визуального стиля на веб-страницу, изображения являются ценными, поскольку они также помогают в поисковой оптимизации. Добавление надлежащих alt-тегов и описаний к изображениям помогает поисковым системам лучше понимать содержание веб-страницы и во многих случаях повышает ее рейтинг.

HTML теги изображений - Поддержка и совместимость с атрибутами тега изображения