Как да добавите атрибут към HTML етикет

click fraud protection

Езикът HTML включва редица елементи. Те включват често използвани компоненти на уебсайта като абзаци, заглавия, връзки и изображения. Съществуват и редица по-нови елементи, въведени с HTML5, включително заглавката, навигацията, долния колонтитул и други. Всички тези HTML елементи се използват, за да създадат структурата на даден документ и да му дадат значение. За да добавите още повече значение към елементите, можете да им придадете атрибути.

Основен HTML отварящ таг започва със знака <.>. Например началният маркер на абзаца ще бъде написан по следния начин:

За да добавите атрибут към вашия HTML таг, първо поставяте интервал след името на маркера (в този случай това е "p"). След това ще добавите името на атрибута, което искате да използвате, последвано от знак за равенство. И накрая, стойността на атрибута ще бъде поставена в кавички. Например:


Етикетите могат да имат множество атрибути. Бихте отделили всеки атрибут от останалите с интервал.


Елементи с задължителни атрибути

Някои HTML елементи всъщност изискват атрибути, ако искате те да работят по предназначение. Елементът на изображението и елементът на връзката са два примера за това.

instagram viewer

The елемент на изображението изисква атрибут "src". Този атрибут казва на браузъра кое изображение искате да използвате на това място. Стойността на атрибута ще бъде файлов път до изображението. Например:

Логото на нашата компания

Ще забележите, че към този елемент сме добавили още един атрибут, атрибутът „alt“ или алтернативен текст. Това технически не е задължителен атрибут за изображения, но е най-добрата практика винаги да включвате това съдържание за достъпност. Текстът, изброен в стойността на атрибута alt е това, което ще се покаже, ако изображението не успява да се зареди по някаква причина.

Друг елемент, който изисква специфични атрибути, е котвата или маркера на връзката. Този елемент трябва да включва атрибута "href", който означава "хипертекстова препратка." Това е изискан начин да се каже "където тази връзка трябва да отиде. "Точно както елементът на изображението трябва да знае кое изображение да се зареди, тагът на връзката трябва да знае къде трябва да се. Ето как може да изглежда маркер за връзка:


Тази връзка сега ще доведе човек до уебсайта, посочен в стойността на атрибут. В този случай това е основната страница на Dotdash.

Атрибути като CSS куки

Друго използване на атрибутите е, когато те се използват като "куки" за CSS стилове. Тъй като уеб стандартите диктуват, че трябва да държите структурата на вашата страница (HTML) отделно от нейните стилове (CSS), използвате тези куки за атрибути в CSS, за да диктувате как ще се показва структурираната страница в мрежата браузър. Например, можете да имате тази маркировка във вашия HTML документ.


Ако искате това разделение да има цвят на фона черен (# 000) и размер на шрифта 1.5em, бихте добавили това към вашия CSS:

.известен {background-color: # 000; размер на шрифта: 1.5em;}

Атрибутът на класа „Featured“ действа като кука, която използваме в CSS, за да приложим стилове към тази област. Тук бихме могли да използваме и атрибут ID, ако искаме. И класовете, и идентификаторите са универсални атрибути, което означава, че те могат да бъдат добавени към всеки елемент. И двамата могат да бъдат насочени със специфични CSS стилове, за да определят визуалния външен вид на този елемент.

По отношение на Javascript

И накрая, използването на атрибути на определени HTML елементи също е нещо, което можете да използвате в Javascript. Ако имате скрипт, който търси елемент със специфичен атрибут ID, това е поредната употреба на тази обща част от езика HTML.

instagram story viewer