The HTML IMG тагът управлява вмъкването на снимки и други статични графични обекти в рамките на уеб страница. Този общ таг поддържа няколко задължителни и незадължителни атрибути, които добавят богатство към способността ви да проектирате привлекателен, фокусиран върху изображения уебсайт.
Пример за напълно оформен HTML IMG маркер изглежда така:
Необходими атрибути на IMG тагове
src = "/ път / към / image.jpg"
Единственият атрибут, който ви е необходим, за да получите изображение, което да се показва на уеб страница, е src атрибут. Този атрибут идентифицира името и местоположението на файла с изображение, който ще се показва.
alt = "Описание на изображението"
За да напишете валидни XHTML и HTML4, височина атрибут също се изисква. Този атрибут се използва за предоставяне на невизуални браузъри с текст, който описва изображението. Браузърите показват алтернативния текст по различни начини. Някои го показват като изскачащ прозорец, когато поставите мишката върху изображението, други го показват в свойства, когато щракнете с десния бутон върху изображението, а някои изобщо не го показват.
Използвай алтернативен текст за да се дадат допълнителни подробности за изображението, които не са подходящи или важни за текста на уеб страницата. Но не забравяйте, че в екранните четци и други текстови браузъри текстът ще се чете в редица с останалата част от текста на страницата. За да избегнете объркване, използвайте описателен алтернативен текст, който казва (например) „За уеб дизайна и HTML“, вместо просто „лого“.
The височина текстът е от съществено значение и за SEO (оптимизация за търсачки). Ботовете, които търсачките, като Google, използват за изследване на съдържанието на сайтовете, не могат да "виждат" изображения. Те разчитат на височина текст, за да определите какво има на страницата.
В HTML5, височина атрибут не винаги се изисква, защото можете да използвате надпис за да добавите още описание към него. Можете също да използвате този атрибут, за да посочите идентификатор, който съдържа пълно описание:
aria-describyby = "Описание на изображението"
Алтернативен текст също не се изисква, ако изображението е чисто декоративно, например графика в горната част на уеб страница или икони. Но ако не сте сигурни, включете алтернативен текст за всеки случай.
Атрибути за оразмеряване
ширина = "500"и.
височина = "500"В зависимост от вашия дизайн, като използвате. височина и. ширина
По принцип ще искате размерът на изображението да бъде зададен във вашия CSS. По-често това не е резултат от размерите на родителския контейнер на изображението. Този подход позволява най-голяма гъвкавост при адаптиране към различни размери на екрана. Все пак има случаи, в които може да искате да посочите размерите на изображението като HTML атрибути.
Други полезни атрибути на IMG
title = "Описателно име на изображението"Атрибутът е глобален атрибут, който може да се приложи към всеки. HTML елемент. Освен това. заглавие
Повечето браузъри поддържат заглавие атрибут, но те го правят по различни начини. Някои показват текста като изскачащ прозорец, докато други го показват на информационни екрани, когато потребителят щракне с десния бутон върху изображението. Можете да използвате заглавие атрибут, за да напишете допълнителна информация за изображението, но не разчитайте тази информация да бъде скрита или видими. Определено не трябва да използвате това, за да скриете ключови думи за търсачките. Понастоящем тази практика се наказва от повечето търсачки.
usemap = ""и.
ismap = ""Тези два атрибута задават клиентска страна () и сървърна страна (ISMAP) карти с изображения
longdesc = "По-подробно описание на вашето изображение"The. longdesc
Оттеглени и остарели IMG атрибути
Няколко атрибута вече са остарели в HTML5 или остарели в HTML4. За най-добрия HTML, трябва да намерите други решения, вместо да използвате тези атрибути.
граница = "3"
align = "left"Този атрибут ви позволява да поставите изображение в текста и да накарате текста да тече около него. Можете да подравните изображение надясно или наляво. Той е остарял в полза на. float CSS свойство
hspcace = "10"и.
vspace = "10"The. hspace и. vspace атрибутите добавят празно пространство хоризонтално ( hspace) и вертикално ( vspace
lowsrc = "/ път / към / lowres.jpg"The. lowsrc attribute осигурява алтернативно изображение, когато вашият източник на изображения е толкова голям, че се изтегля изключително бавно. Например може да имате изображение, което е 500KB, което искате да покажете на вашата уеб страница, но 500KB ще отнеме много време за изтегляне. Така създавате много по-малко копие на изображението, може би в черно-бяло или просто изключително оптимизирано, и го поставяте в. lowsrc
The lowsrc атрибутът беше добавен към Netscape Navigator 2.0 към маркера. Той беше част от DOM ниво 1, но след това беше премахнат от DOM ниво 2. Поддръжката на браузъра е схематична за този атрибут, въпреки че много сайтове твърдят, че се поддържа от всички съвременни браузъри. Той не е остарял в HTML4 или остарял в HTML5, защото никога не е бил официална част от нито една от спецификациите.
Избягвайте да използвате този атрибут и вместо това оптимизирайте изображенията си, така че да се зареждат бързо. Скоростта на зареждане на страниците е критична част от добрия уеб дизайн и големите изображения забавят страниците изключително много - дори ако използвате lowsrc атрибут.