HTML5 - atrybuty
Jak wyjaśniono w poprzednim rozdziale, elementy mogą zawierać atrybuty używane do ustawiania różnych właściwości elementu.
Niektóre atrybuty są definiowane globalnie i mogą być używane w dowolnym elemencie, podczas gdy inne są definiowane tylko dla określonych elementów. Wszystkie atrybuty mają nazwę i wartość i wyglądają tak, jak pokazano poniżej w przykładzie.
Poniżej znajduje się przykład atrybutów HTML5, który ilustruje, jak oznaczyć element div atrybutem o nazwie class, używając wartości „przykład” -
<div class = "example">...</div>Atrybuty można określić tylko w start tags i nigdy nie może być używane w end tags.
W atrybutach HTML5 nie jest rozróżniana wielkość liter i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest trzymanie się małych liter.
Atrybuty standardowe
Wymienione poniżej atrybuty są obsługiwane przez prawie wszystkie tagi HTML 5.
| Atrybut | Opcje | Funkcjonować |
|---|---|---|
| klucz dostępu | Określony przez użytkownika | Określa skrót klawiaturowy umożliwiający dostęp do elementu. |
| wyrównać | prawo, lewo, środek | Poziomo wyrównuje etykiety |
| tło | URL | Umieszcza obraz tła za elementem |
| bgcolor | wartości numeryczne, szesnastkowe, RGB | Umieszcza kolor tła za elementem |
| klasa | Określony przez użytkownika | Klasyfikuje element do użycia z kaskadowymi arkuszami stylów. |
| Zadowolony | prawda fałsz | Określa, czy użytkownik może edytować zawartość elementu, czy nie. |
| menu kontekstowe | Identyfikator menu | Określa menu kontekstowe elementu. |
| data-XXXX | Określony przez użytkownika | Atrybuty niestandardowe. Autorzy dokumentu HTML mogą definiować własne atrybuty. Musi zaczynać się od „data-”. |
| przeciągalny | prawda, fałsz, auto | Określa, czy użytkownik może przeciągać element. |
| wysokość | Wartość numeryczna | Określa wysokość tabel, obrazów lub komórek tabeli. |
| ukryty | ukryty | Określa, czy element powinien być widoczny, czy nie. |
| ID | Określony przez użytkownika | Nazywa element do użycia z kaskadowymi arkuszami stylów. |
| pozycja | Lista elementów | Służy do grupowania elementów. |
| itemprop | Lista rzeczy | Służy do grupowania przedmiotów. |
| sprawdzanie pisowni | prawda fałsz | Określa, czy element musi mieć sprawdzoną pisownię lub gramatykę. |
| styl | Arkusz stylów CSS | Określa wbudowany styl elementu. |
| Przedmiot | Identyfikator zdefiniowany przez użytkownika | Określa odpowiedni element elementu. |
| tabindex | Numer karty | Określa kolejność tabulacji elementu. |
| tytuł | Określony przez użytkownika | Tytuł „Pop-up” dla Twoich elementów. |
| valign | góra, środek, dół | Ustawia tagi w pionie w elemencie HTML. |
| szerokość | Wartość numeryczna | Określa szerokość tabel, obrazów lub komórek tabeli. |
Aby uzyskać pełną listę tagów HTML5 i powiązanych atrybutów, sprawdź nasze odniesienie do tagów HTML5 .
Atrybuty niestandardowe
Nowością wprowadzoną w HTML 5 jest dodanie niestandardowych atrybutów danych.
Niestandardowy atrybut danych zaczyna się od data-i zostanie nazwany na podstawie Twoich wymagań. Oto prosty przykład -
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>Powyższy kod będzie całkowicie poprawny HTML5 z dwóch atrybutów niestandardowych nazwie datasubject i danych poziomie . Możesz uzyskać wartości tych atrybutów za pomocą API JavaScript lub CSS w podobny sposób, jak w przypadku standardowych atrybutów.