JPG изображения
GIF изображения
PNG изображения
пример
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Попробуй сам " Всегда указывайте ширину и высоту изображения. Если ширина и высота не указана, то страница будет мигать во время загрузки изображения.
HTML изображения Синтаксис
В HTML, изображения определяются с <img> тег.
<img> tag пуст, он содержит только атрибуты и не имеет закрывающего тега.
src атрибут указывает URL - адрес (web address) - (web address) изображения:
<img src=" url " alt=" some_text ">alt Атрибут
alt атрибут задает альтернативный текст для изображения, если изображение не может быть отображено.
alt атрибут предоставляет альтернативную информацию для изображения , если пользователь по какой - то причине не могут просматривать его (из - за медленного соединения, ошибка в src атрибута, или если пользователь использует для чтения с экрана).
Если браузер не может найти изображение, оно будет отображаться альтернативный текст:
alt атрибут обязателен. Веб-страница не будет проверять правильно и без него.
HTML для чтения с экрана
Читатель экрана представляет собой программное обеспечение, которое может прочитать то, что отображается на экране.
считыватели экрана полезны для людей, которые являются слепыми, со слабым зрением, или обучения инвалидов.
Читатели экрана могут читать alt атрибут.
Размер изображения - ширина и высота
Вы можете использовать style атрибут , чтобы указать ширину и высоту изображения.
Значения указаны в пикселях (use px after the value) :
Кроме того , вы можете использовать width и height атрибутов. Здесь значения указаны в пикселях по умолчанию:
Ширина и высота или стиль?
И ширина, высота, и атрибуты стиля действительны в последнем стандарте HTML5.
Мы рекомендуем вам использовать style атрибут. Он предотвращает стили листов изменять размер оригинального изображения:
пример
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Попробуй сам " Изображения в другой папке
Если не указано, то браузер ожидает найти изображение в той же папке, что и веб-страницы.
Тем не менее, он является общим для хранения изображений в подпапке. Затем вы должны включать имя папки в src атрибута:
пример
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Попробуй сам " Изображения на другой сервер
Некоторые веб-сайты хранят их изображения на серверах изображения.
На самом деле, вы можете получить доступ изображения с любого веб-адреса в мире:
Анимированные изображения
Стандарт GIF позволяет анимированные изображения:
пример
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Попробуй сам " Обратите внимание, что синтаксис вставки анимированных изображений не отличается от не-анимированных изображений.
Использование изображения в качестве ссылки
Для использования изображения в качестве ссылки, просто гнездо <img> тег внутри <a> тега:
пример
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Попробуй сам " Добавить "border:0;" для предотвращения IE9 (and earlier) отображать границы вокруг изображения.
изображение Floating
Используйте свойство CSS с плавающей точкой, чтобы поплавок изображения.
Изображение может плавать справа или слева от текста:
пример
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Попробуй сам " Карты изображений
Используйте <map> тег , чтобы определить образ-карту. Изображение карта представляет собой изображение с интерактивными областями.
name атрибут <map> тег связан с <img> атрибут usemap «s и создает связь между изображением и картой.
<map> тег содержит ряд <area> тегов, которая определяет интерактивную область в изображении-карте:
пример
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Попробуй сам " Краткое содержание главы
- Используйте HTML <img> элемент для определения изображения
- Используйте HTML src атрибут для определения URL изображения
- Используйте HTML alt атрибут , чтобы определить альтернативный текст для изображения, если оно не может быть отображена
- Используйте HTML width и height атрибутов , чтобы определить размер изображения
- С помощью CSS width и height свойства , чтобы определить размер изображения (alternatively) в качестве (alternatively)
- Используйте CSS float свойство , чтобы поплавок изображения
- Используйте HTML <map> элемент для определения изображения-карты
- Используйте HTML <area> элемент для определения интерактивных областей в изображении-карте
- Используйте HTML - код <img> элемент «S usemap атрибут , чтобы указать на изображении-карте
Загрузка изображений занимает много времени. Большие изображения могут замедлить вашу страницу. тщательно Использование изображений.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
HTML Image Теги
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет изображение-карту |
| <area> | Определяет интерактивную область внутри изображения-карты |