Atrybuty HTML

Atrybuty HTML można wymawiać jako słowa specjalne, które są używane w znacznikach otwierających i są odpowiedzialne za kontrolowanie zachowania elementu. Są modyfikatorem typu elementu HTML. Ten modyfikator może wykonać dwa zadania. Może albo modyfikować domyślną funkcjonalność elementu, albo może zapewniać funkcjonalność dowolnemu elementowi, który bez nich nie będzie działał poprawnie. Składniowo atrybut jest dodawany do znacznika początkowego HTML. Istnieją różne rodzaje atrybutów, które zostały zidentyfikowane. Obejmują one wymagane atrybuty, atrybuty opcjonalne, atrybuty standardowe i atrybuty zdarzeń. Wymagane atrybuty to te, które są potrzebne dla określonego typu elementu, aby funkcja działała poprawnie. Opcjonalnego atrybutu można użyć do zmodyfikowania domyślnej funkcjonalności typu elementu. Standardowe atrybuty są obsługiwane przez dużą liczbę typów elementów, a atrybutów zdarzeń można używać do wywoływania typów elementów, które mogą określać skrypty uruchamiane w określonych okolicznościach. Atrybuty zwykle pojawiają się jako pary nazwa-wartość i są oddzielone znakiem „=” (znak równości). Są one zapisywane w znaczniku początkowym elementu po nazwie elementu.

Różne atrybuty HTML

Przyjrzyjmy się różnym atrybutom HTML i ich szczegółowej pracy.

Podstawowe atrybuty

Istnieją cztery podstawowe atrybuty, które są najczęściej używane. Nazwij je w następujący sposób:

  • Identyfikator: tego atrybutu HTML można łatwo użyć do jednoznacznej identyfikacji elementu znajdującego się na stronie HTML. Identyfikatora użytkownika można użyć, gdy element nosi atrybut id jako unikalny identyfikator, który umożliwia identyfikację elementu i jego zawartości, lub jest on używany, gdy istnieją dwa elementy o tej samej nazwie na stronie internetowej. Atrybut ID może pomóc w łatwej identyfikacji różnicy między elementami o tej samej nazwie.
  • Atrybut tytułu: ten atrybut ma na celu nadanie sugerowanego tytułu dla określonego elementu. To zależy od przewoźnika, jak się zachowa i chociaż zwykle nie jest wyświetlane jako podpowiedź, ilekroć kursor znajdzie się nad elementem lub czy musi go wyświetlać podczas ładowania elementu. Służy również do wyjaśnienia elementu najechania myszką nad nim. Zachowanie może się różnić w zależności od elementu i generalnie jego wartość jest wyświetlana podczas ładowania lub najechania kursorem myszy nad nią.
  • Atrybut klasy: skojarzenie tego atrybutu odbywa się z elementem arkusza stylów. Użytkownik musi określić klasę elementu. Więcej informacji na temat tego atrybutu można uzyskać podczas nauki arkusza stylów kaskadowych. Wartością tutaj może być również rozdzielona spacjami lista nazw klas. Na przykład: class = „className1 className2 className3”
  • Atrybut stylu: Ten atrybut umożliwia określenie reguł kaskadowego arkusza stylów w dowolnym elemencie. Może zapewniać różne efekty arkusza stylu kaskadowego do elementów HTML, takie jak zwiększanie rozmiaru czcionki. Może również zmienić rodzinę czcionek i kolorystykę.

Po atrybutach podstawowych mamy pewne atrybuty internacjonalizacji. Są jak poniżej:

Atrybut internacjonalizacji

  • Dir: Atrybut dir pomaga wskazać przeglądarce, w którym kierunku powinien podążać tekst. Ten atrybut zwykle może przyjmować dwie wartości. Mogą to być LTR i RTL. LTR oznacza od lewej do prawej i jest to wartość domyślna, a RTL oznacza od prawej do lewej. Gdy ten atrybut jest używany w znaczniku, określa on, w jaki sposób tekst powinien być reprezentowany w całym dokumencie. Można go również użyć do sterowania kierunkiem tekstu na podstawie samej zawartości znacznika.
  • Atrybut Lang: ten atrybut pomaga pokazać główny język używany w dokumencie. Ten atrybut można przechowywać w formacie HTML, aby był wstecznie zgodny z wcześniejszymi wersjami HTML. Można go również zastąpić atrybutem XML: lang w nowych dokumentach XHTML. Wartości atrybutów lang są zgodne z normą ISO-639 i mają dwuznakowe kody języka. Zadeklarowanie języka jest ważne, aby uzyskać dostęp do aplikacji i różnych wyszukiwarek.
  • Atrybut XML-Lang: Ten atrybut ma zastępować atrybut lang. Wartość atrybutu XML-lang musi mieć kod kraju, jak wspomniano wcześniej.

Oprócz nich istnieje wiele ogólnych atrybutów opisanych poniżej.

Ogólny atrybut

  • Wyrównaj atrybut: ten atrybut jest przydatny, gdy chcesz mieć do dyspozycji niektóre elementy strony. Możesz zmienić wyrównanie do lewej, prawej lub do środka strony. Domyślne wyrównanie dla wszystkich elementów jest ustawione w lewo. Można to zmienić za pomocą tego atrybutu wyrównania.
  • Atrybut Src: Jeśli użytkownik musi wstawić obraz na stronę internetową, musimy użyć tag z atrybutem src. Możemy podać adres obrazu jako wartość atrybutu w podwójnym cudzysłowie. Możesz użyć atrybutu src jak poniżej, aby dołączyć obraz na stronie internetowej.


src Attribute


  • Alt Attribute: Ten atrybut jest używany jako alternatywny tag, którego można użyć do pokazania czegoś, jeśli głównym atrybutem jest znacznik, który nie wyświetla oryginalnej wartości, która jest do niego przypisana. Może to opisać obraz deweloperowi, który używa go na końcu kodowania. Jeśli główny obraz ulegnie awarii, do wyświetlenia można użyć alternatywnego obrazu.
  • Atrybut Szerokość i Wysokość: Tego atrybutu można użyć do dostosowania wysokości i szerokości obrazu.

Example:

Width and Height


<

  • Atrybut Href: ten atrybut jest używany, gdy użytkownik chce przekierować do określonego łącza do dowolnego adresu. Ten atrybut jest używany wraz ze znacznikiem. Kiedy link zostanie umieszczony w atrybucie href w miejscu, w którym ma być przekierowany, jest powiązany z tekstem wyświetlanym w tagu. Gdy użytkownik kliknie ten tekst, zostanie przekierowany na adres łącza. Domyślna opcja otwarcia tej strony na tej samej karcie. Jeśli użyjesz atrybutu target, możesz ustawić jego wartość na _blank. Spowoduje to przekierowanie do innej karty lub innego okna w zależności od konfiguracji przeglądarki.

Atrybut danych

HTML zapewnia także niestandardowe atrybuty danych, które pomagają dodawać informacje związane z tobą w tagach HTML. Nie są one specyficzne dla HTML5 i mogą być używane we wszystkich elementach HTML. Atrybut data - * pomaga nam w dostosowywaniu własnych niestandardowych atrybutów danych, może przechowywać dane prywatnie na stronie lub w aplikacji.

W celu dostosowania dane są podzielone na dwie części:

  1. Nazwa atrybutu: powinna mieć co najmniej jeden znak i nie powinna zawierać wielkich liter. Nazwę tę można również poprzedzić za pomocą „data-”.
  2. Wartość atrybutu: wartością atrybutu może być dowolny ciąg.

Składnia atrybutu danych jest następująca:

  • Gitanjali

    • Właściwość atrybutu DOM

    Aby uzyskać obiekty NamedNodeMap, należy użyć właściwości atrybutu w HTML DOM. Zwróci grupę atrybutów węzła. NamedNodeMap reprezentuje również kolekcję obiektów atrybutów i można uzyskać do niej dostęp po numerze indeksu. Ten numer indeksu zaczyna się od 0.

    Składnia, która tego używa, to: node.attributes

    Zwracana wartość to obiekty NamedNodeMap, które są obecne w kolekcji węzłów. Jeśli użytkownik korzysta z przeglądarki Internet Explorer 8 lub dowolnej z wcześniejszych wersji, właściwość atrybuty zwróci wszystkie możliwe atrybuty dla dowolnego elementu, co może skutkować uzyskaniem większej liczby wartości niż oczekiwano.

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Globalne atrybuty

    HTML zapewnia także globalne atrybuty, których można używać z dowolnym elementem HTML. Atrybuty są jak poniżej.

    • Klucz dostępu: określa klawisz skrótu do aktywacji lub skupienia się na dowolnym elemencie.
    • Tłumacz: Jeśli ten atrybut jest używany, określa, czy zawartość elementu ma zostać przetłumaczona, czy nie.
    • Klasa: Określa jedną lub więcej nazw klas dla elementu.
    • Tytuł: ten atrybut określa dodatkowe informacje o elemencie.
    • Contenteditable: Aby określić, czy treść jest edytowalna, czy nie, można użyć tego atrybutu.
    • Tabindex: określa kolejność tabulacji elementu.
    • Reżyser: Określa kierunek tekstu dla dowolnej zawartości elementu.
    • Sprawdzanie pisowni: Użytkownik może wyraźnie określić, czy musi sprawdzać pisownię i gramatykę, czy nie.
    • Przeciągalne: określa, czy element powinien być przeciągany, czy nie.
    • Dropzone: określa, czy przeciągane dane są kopiowane, przenoszone lub łączone po upuszczeniu.

    Atrybuty zdarzenia

    HTML ma możliwość wyzwalania akcji, gdy mają miejsce pewne zdarzenia. Atrybuty zdarzenia mogą wyglądać jak poniżej.

    Onload: Uruchamia się po zakończeniu ładowania strony.

    Onmessage: Można to powiedzieć jako skrypt uruchamiany po uruchomieniu komunikatu.

    Onstorage: Jest to skrypt uruchamiany po aktualizacji obszaru pamięci internetowej.

    Onerror: ten skrypt jest uruchamiany, gdy wystąpi błąd.

    Onpagehide: tego skryptu można użyć, gdy użytkownik może opuścić stronę.

    Utwórz atrybuty zdarzenia

    Te zdarzenia są wywoływane przez działania wewnątrz formularza HTML.

    Onblur: Uruchamia się, gdy tylko element straci skupienie.

    Onchange: Jest uruchamiany, gdy tylko zmienia się wartość elementu.

    Menu kontekstowe: Uruchamia się po uruchomieniu menu kontekstowego.

    Onfocus: Jest uruchamiany, gdy tylko element zostanie zogniskowany.

    Oninput: skrypt musi zostać uruchomiony, gdy element otrzyma dane wejściowe.

    Wyszukiwanie: Jest uruchamiane, gdy użytkownik napisze coś w polu wyszukiwania.

    Oninvalid: Jest wyzwalany, gdy wprowadzony element jest nieprawidłowy.

    Kluczowe atrybuty zdarzeń

    Onkeydown: Uruchamia się po naciśnięciu klawisza.

    onkeypress: Uruchamia się po naciśnięciu klawisza.

    Onkeyup: Jest uruchamiany, gdy użytkownik zwolni klucz.

    Atrybuty zdarzenia myszy

    Onclick: Uruchamia się, gdy mysz kliknie element.

    Onmousemove: Jest uruchamiany, gdy wskaźnik myszy porusza się, gdy znajduje się nad elementem.

    Onmouseip: Uruchamia się, gdy przycisk myszy zostanie zwolniony z elementu.

    Koło: Jest uruchamiane, gdy kółko myszy przesuwa się w górę lub w dół nad elementem

    Przeciągnij atrybuty zdarzenia

    Ondrag: Uruchamia się, gdy element jest przeciągany.

    Ondragleave: Skrypt jest uruchamiany, gdy element opuszcza prawidłowy cel upuszczenia.

    Ondrop: Jest uruchamiany, gdy przeciągany element jest upuszczany

    Onscroll: skrypt jest uruchamiany podczas przewijania paska przewijania elementu.

    Wniosek - atrybuty HTML

    HTML jest najstarszą technologią używaną do tworzenia różnych aplikacji internetowych. Z czasem HTML ewoluował stopniowo i zapewnia wiele funkcji dla obecnych elementów. Zapewnia szeroką gamę atrybutów, które pomagają zwiększyć efektywność aplikacji. Należą do nich podstawowe atrybuty, które są najczęściej używane. Zapewnia także atrybuty internacjonalizacji, które umożliwiają zmiany języków. Atrybut data pomaga przechowywać dane i dostosowywać je tak, jak chce użytkownik. Dzięki tym wszystkim ma również globalne atrybuty, których można używać z dowolnym elementem i dowolnym miejscu. Ma także atrybuty zdarzenia, które są wyzwalane, gdy ma miejsce dowolne zdarzenie. W rezultacie aplikacja lub strona internetowa są bardzo interaktywne. HTML ze względu na wszystkie te funkcje okazuje się być wciąż w grze w tworzeniu aplikacji internetowych. Dzięki nim atrybut stylu, którego można używać z CSS, czyni go piękniejszym i atrakcyjniejszym w użyciu. Wykorzystaj więc wszystkie obecne atrybuty i miej w łatwy sposób niesamowitą aplikację internetową do wyboru.

    Polecane artykuły

    To był przewodnik po atrybutach HTML. Omówiliśmy tutaj Pojęcia i różne atrybuty HTML. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -

    1. Co to jest HTML w prostych słowach?
    2. Dowiedz się, jak działa HTML
    3. Co to jest XML?
    4. Najlepsze style list HTML
    5. Porównanie HTML a XML

    Kategoria:

    Narzędzia programistyczne