Тег img

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад
Полный HTML Ссылки
Дальше ❯

Пример

Как вставить изображение:

<img src=»smiley.gif» alt=»Smiley face»>

Подробнее примеры ниже.

---

Определение и использование

Тег <img> определяет изображение в HTML-странице.

Тег <img> имеет два обязательных атрибута: src и alt.

Примечание: Изображения технически не вставлены в страницу HTML, изображения соединены к страницам HTML. Тег <img> создает пространство для хранения указанного изображения.

Совет: Чтобы связать изображение с другим документом, просто вложить тег <img> в теги <a>.

---

Поддержка браузера

Элемент
<img>	Да	Да	Да	Да	Да

---

Различия между HTML 4,01 и HTML5

Следующие атрибуты: выравнивание, граница, хспаце и vSpace являются навестить поддерживается в HTML5.

---

Различия между HTML и XHTML

В HTML тег <img> не имеет конечного тега.

В XHTML тег <img> должен быть правильно закрыт.

---

---

Атрибуты

= Новое в HTML5.

Атрибут	Значение	Описание
align	top bottom middle left right	Не поддерживается в HTML5. Задание выравнивания изображения в соответствии с окружающими элементами
alt	text	Задает альтернативный текст для изображения
border	pixels	Не поддерживается в HTML5. Задает ширину границы вокруг изображения
crossorigin	anonymous use-credentials	Разрешить использование изображений с веб-сайтов сторонних производителей для использования с Canvas
height	pixels	Задает высоту изображения
hspace	pixels	Не поддерживается в HTML5. Указывает пробелы в левой и правой части изображения
ismap	ismap	Определяет изображение как серверное изображение-Map
longdesc	URL	Задает URL-адрес для подробного описания изображения
sizes		Определяет размеры изображения для различных макетов страниц
src	URL	Указывает URL-адрес изображения
srcset	URL	Указывает URL-адрес изображения для использования в различных ситуациях
usemap	#mapname	Указывает изображение в виде клиентского изображения-карты
vspace	pixels	Не поддерживается в HTML5. Указывает пробелы в верхней и нижней части изображения
width	pixels	Задает ширину изображения

---

Глобальные атрибуты

Тег <img> также поддерживает Глобальные атрибуты в HTML.

---

Атрибуты события

Тег <img> также поддерживает Атрибуты событий в HTML.

---

Попробуйте примеры

Вставка изображений из разных местоположений
Вставка изображений из другой папки или с другого веб-узла.

Сделать гиперссылку изображения
Как добавить гиперссылку на изображение.

Создание карты изображений
Как создать карту изображения с щелчком областей. Каждый регион является гиперссылкой.

---

Похожие страницы

HTML Учебник: HTML Images

HTML DOM Ссылки: Image Object

CSS Учебник: Styling Images

---

Параметры CSS по умолчанию

В большинстве обозревателей элемент <img> будет отображаться со следующими значениями по умолчанию:

Пример

img {
    display: inline-block;
}

❮Назад
Полный HTML Ссылки
Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

---

---

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности
О нас
Контакты

HTML тег img

Тег <img> предназначен для вставки изображений в HTML страницу.

Тег <img> имеет два обязательных атрибута: src и alt.

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

Чтобы создать ссылку-изображение на другой документ, поместите элемент <img> внутри тега <a>.

Разница между HTML 4.01 и HTML5

Атрибуты align, border, hspace и vspace не поддерживаются в HTML5.

Различия между HTML и XHTML

HTML тег <img> — одиночный элемент без закрывающего тега. В XHTML тег <img> должен закрываться должным образом, а именно — <img />.

Атрибуты тега <img>

Атрибут	Описание
align	Определяет горизонтальное выравнивание содержимого элемента
alt	Определяет альтернативный текст, если элемент не удается отобразить
border	Определяет толщину рамки вокруг элемента
height	Определяет высоту изображения
hspace	Определяет величину отступов слева и справа от изображения
ismap	Определяет, что изображение является серверной картой-изображением.
longdesc	Определяет гиперссылку на подробное описание изображения
src	Определяет URL изображения
usemap	Определяет картинку, как клиентскую карту-изображение
vspace	Определяет величину отступов сверху и снизу от изображения
width	Определяет ширину изображения

Общие атрибуты

Тег <img> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <img> со следующими стилями

img { 
    display: inline-block;
}

HTML пример использования

Вставляем изображение:

<img src='smiley. gif' alt="Smiley face">

HTML img usemap Атрибут

❮ Тег HTML

Пример

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

  <область shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

Попробуйте сами »

---

Определение и использование

Атрибут usemap определяет изображение как карту изображения на стороне клиента (карта изображения — это изображение с областями, на которые можно щелкнуть).

Атрибут usemap связан с

атрибут имени элемента и создает связь между
и
<карта> .

Примечание: атрибут usemap нельзя использовать, если
элемент является
потомок или
<кнопка> элемент.

---

Поддержка браузера

Атрибут
карта использования	Да	Да	Да	Да	Да

---

Синтаксис

#mapname «>

Значения атрибутов

Значение	Описание
#название_карты	Символ решетки («#») плюс имя элемента

---

❮ HTML-тег

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Как учебное пособие
SQL Tutorial
Python Tutorial
W3. CSS TURAND
BootStrap Tutorial
PHP Учебное пособие
Java Учебное пособие
C ++ Учебник
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ |
О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег HTML

❮ Пред.

Следующий ❯

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

Для элемента есть два обязательных атрибута: src, который используется для отображения источника изображения, и alt, определяющий альтернативный текст для изображения.

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

Тег пуст, значит, закрывающий тег не требуется. Он содержит только атрибуты. Но в XHTML тег () должен быть закрытым ().

Пример тега HTML

:

 

  <голова>
    
  
  <тело>
    
Заголовок 
    
Это фото Алека
     jpeg" alt="Aleq"/>
  
 

Попробуй сам »

Мы можем использовать CSS для изменения первоначального вида изображения.

Пример тега

, оформленного с помощью CSS:

 

  <голова>
    
    <стиль>
      картинка {
      радиус границы: 50%;
      граница: пунктирная 4 пикселя #077cb9;
      ширина: 300 пикселей;
      дисплей: блок;
      поле: 0 авто;
      }
    
  
  <тело>
    <дел>
     
    

 

  <голова>
    
  
  <тело>