Atribúty HTML Naučte sa atribúty HTML s príkladmi

Obsah:

Anonim

Atribúty HTML

Atribúty HTML je možné povedať ako špeciálne slová, ktoré sa používajú vo vnútri úvodných značiek a sú zodpovedné za riadenie správania prvku. Sú modifikátorom typu elementu HTML. Tento modifikátor môže vykonávať dve úlohy. Môže buď zmeniť predvolenú funkčnosť prvku, alebo môže poskytnúť funkčnosť ľubovoľnému prvku, ktorý bez nich nemôže správne fungovať. Syntakticky sa do začiatočnej značky HTML pridá atribút. Existujú rôzne typy atribútov, ktoré boli identifikované. Patria sem požadované atribúty, voliteľné atribúty, štandardné atribúty a atribúty udalostí. Požadované atribúty sú atribúty, ktoré potrebuje konkrétny typ prvku, aby funkcia fungovala správne. Voliteľný atribút sa môže použiť na zmenu predvolenej funkčnosti typu prvku. Štandardné atribúty sú podporované veľkým počtom typov prvkov a atribúty udalostí môžu byť použité na spôsobenie typov prvkov, ktoré môžu špecifikovať skripty, ktoré sa spúšťajú za určitých okolností. Atribúty sa zvyčajne objavujú ako páry názov-hodnota a sú oddelené znakom '=' (rovnaké znamienko). Zapisujú sa do začiatočnej značky prvku za názvom prvku.

Rôzne atribúty HTML

Pozrime sa na rôzne atribúty HTML a na to, ako fungujú podrobne.

Základné atribúty

Hlavne sa používajú štyri základné atribúty. Sú to tieto mená:

  • ID: Tento atribút HTML sa dá ľahko použiť na jedinečnú identifikáciu prvku, ktorý sa nachádza na stránke HTML. ID užívateľa sa môže použiť buď vtedy, keď prvok nesie atribút id ako jedinečný identifikátor, ktorý umožňuje identifikáciu prvku a jeho obsahu, alebo sa použije, ak sú na webovej stránke dva prvky, ktoré majú rovnaké meno. Atribút ID môže pomôcť pri ľahkej identifikácii rozdielu medzi prvkami, ktoré majú rovnaké meno.
  • Atribút názvu: Tento atribút vykonáva prácu pri navrhovaní názvu pre konkrétny prvok. Závisí to od operátora, ako sa bude správať, a hoci sa zvyčajne nezobrazí ako popis, vždy keď kurzor prejde na prvok alebo ak ho musí zobraziť, keď sa prvok načíta. Používa sa tiež na vysvetlenie prvku, ktorý nad ňou umiestňuje kurzor myši. Správanie sa môže líšiť v závislosti od rôznych prvkov a vo všeobecnosti sa jeho hodnota zobrazuje pri načítaní alebo umiestnení kurzora myši naň.
  • Atribút triedy: Priradenie tohto atribútu sa vykonáva s prvkom šablóny štýlov. Užívateľ musí špecifikovať triedu prvku. Viac informácií o tomto atribúte sa dozviete, keď sa učíte Kaskádový štýl. Hodnotou tu môže byť aj zoznam názvov tried oddelených medzerami. Napríklad: class = “className1 className2 className3”
  • Atribút štýlu: Tento atribút vám umožňuje určiť pravidlá kaskádových štýlov v ľubovoľnom prvku. Poskytuje HTML elementom rôzne efekty kaskádových štýlov, napríklad zväčšovanie veľkosti písma. Môže tiež zmeniť rodinu písiem a sfarbenie.

Po základných atribútoch máme niektoré atribúty internacionalizácie. Sú to nižšie:

Atribút internacionalizácie

  • Dir: Atribút dir vám pomáha pri určovaní smeru, v ktorom by mal text nasledovať. Tento atribút zvyčajne môže mať dve hodnoty. Môže ísť o LTR a RTL. LTR znamená zľava doprava a je to predvolená hodnota, zatiaľ čo RTL znamená zľava doprava. Ak sa tento atribút použije v značke, určuje, ako by mal byť text reprezentovaný v celom dokumente. Môže sa tiež použiť na ovládanie smeru textu iba z obsahu značky.
  • Atribút Lang: Tento atribút pomáha pri predstavovaní hlavného jazyka, ktorý sa používa v dokumente. Tento atribút sa môže uchovávať v HTML, takže je spätne kompatibilný s predchádzajúcimi verziami HTML. Môže byť tiež nahradený atribútom XML: lang v nových dokumentoch XHTML. Hodnoty atribútov lang sú štandardom ISO-639 a majú dvojmiestne jazykové kódy. Vyhlásenie jazyka je dôležité pre prístup k aplikácii a rôznym vyhľadávacím nástrojom.
  • Atribút XML-Lang: Tento atribút má nahradiť atribút lang. Hodnota atribútu XML-lang musí mať kód krajiny, ako už bolo uvedené.

Okrem nich existuje mnoho generických atribútov, ktoré sú opísané nižšie.

Všeobecný atribút

  • Zarovnať atribút: Tento atribút je užitočný, keď chcete mať k dispozícii niektoré prvky svojej stránky. Zarovnanie môžete zmeniť doľava, doprava alebo do stredu stránky. Predvolené zarovnanie všetkých prvkov je nastavené doľava. Toto je možné zmeniť pomocou tohto atribútu zarovnania.
  • Atribút Src: Ak používateľ potrebuje vložiť obrázok do webovej stránky, musíme použiť značka s atribútom src. Adresu obrázka môžeme určiť ako hodnotu atribútu vo vnútri úvodzoviek. Atribút src môžete použiť na vloženie obrázka na webovú stránku, ako je uvedené nižšie.


src Attribute


  • Atribút Alt: Tento atribút sa používa ako alternatívna značka, ktorú je možné použiť na zobrazenie niečoho, ak je primárnym atribútom, ktorý je značka, ktorá nedokáže zobraziť pôvodnú hodnotu, ktorá je jej priradená. Toto môže opísať obraz vývojárovi, ktorý ho používa na konci kódovania. Ak hlavný obrázok zlyhá, na zobrazenie sa dá použiť alternatívny obrázok.
  • Atribút Width and Height: Tento atribút sa dá použiť na úpravu výšky a šírky obrázka.

Example:

Width and Height


<

  • Atribút Href: Tento atribút sa používa, keď používateľ chce smerovať na konkrétny odkaz na ľubovoľnú adresu. Tento atribút sa používa spolu so značkou. Ak je odkaz umiestnený v atribúte href, na ktorý má byť nasmerovaný, je prepojený s textom zobrazeným v značke. Keď používateľ klikne na tento text, bude presmerovaný na adresu odkazu. Predvolená možnosť otvoriť túto stránku na tej istej karte. Ak využívate cieľový atribút, môžete nastaviť jeho hodnotu na _blank. Týmto sa presmeruje na inú kartu alebo do iného okna na základe konfigurácie prehliadača.

Atribút údajov

HTML tiež poskytuje vlastné atribúty údajov, ktoré vám pomôžu pri pridávaní informácií týkajúcich sa vás do značiek HTML. Nie sú špecifické pre HTML5 a dajú sa použiť na všetky prvky HTML. Atribút data - * nám pomáha pri prispôsobovaní vlastných atribútov vlastných údajov, môže ich ukladať súkromne na stránku alebo do aplikácie.

Kvôli prispôsobeniu sú údaje rozdelené do dvoch častí:

  1. Názov atribútu: Mal by mať aspoň jeden znak a nemal by obsahovať veľké písmená. Tento názov je možné tiež zadať pomocou 'data-'.
  2. Hodnota atribútu: Hodnota atribútu môže byť ľubovoľný reťazec.

Syntax pre atribút údajov je takáto:

  • Gitanjali
  • Vlastnosť atribútu DOM

    Na získanie objektov NamedNodeMap by sa mali použiť vlastnosti atribútov v HTML DOM. Vráti skupinu atribútov uzlov. NamedNodeMap tiež predstavuje kolekciu objektov atribútov a je k nim prístupné pomocou indexového čísla. Toto číslo indexu začína na 0.

    Syntax, ktorá sa má použiť, je: node.attributes

    Vrátená hodnota je NamedNodeMap objekty, ktoré sú prítomné v kolekcii uzlov. Ak používateľ používa program Internet Explorer 8 alebo niektorú z predchádzajúcich verzií, vlastnosť atribúty vrátia všetky možné atribúty pre akýkoľvek prvok, čo môže mať za následok viac hodnôt, ako sa očakávalo.

    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

    Globálne atribúty

    HTML tiež poskytuje globálne atribúty, ktoré je možné použiť s akýmkoľvek prvkom HTML. Atribúty sú uvedené nižšie.

    • Accesskey: Určuje klávesovú skratku na aktiváciu alebo zameranie ktoréhokoľvek prvku.
    • Preložiť: Ak sa použije tento atribút, určuje, či sa má obsah prvku preložiť alebo nie.
    • Trieda: Určuje jeden alebo viac názvov tried pre prvok.
    • Názov: Tento atribút určuje ďalšie informácie o prvku.
    • Contenteditable: S cieľom určiť, či je obsah upraviteľný alebo nie, je možné tento atribút použiť.
    • Tabindex: Určuje poradie tabulácií prvku.
    • Adresár: Určuje smer textu pre akýkoľvek obsah prvku.
    • Kontrola pravopisu: Užívateľ môže výslovne určiť, či má alebo nemá skontrolovať pravopis a gramatiku.
    • Vyťahovateľný: Určuje, či má byť prvok vyťahovateľný alebo nie.
    • Dropzone: Určuje, či sa pretiahnuté údaje skopírujú, presunú alebo prepoja, keď sa vyhodia.

    Atribúty udalosti

    HTML má schopnosť spúšťať akcie, keď dôjde k niektorým udalostiam. Atribúty udalosti môžu byť uvedené nižšie.

    Onload: Spustí sa po dokončení načítania stránky.

    Onmessage: Toto možno povedať ako skript, ktorý sa spustí pri spustení správy.

    Onstorage: Toto je skript, ktorý sa má spustiť pri aktualizácii oblasti webového úložiska.

    Onerror: Tento skript sa spustí, keď sa vyskytne chyba.

    Onpagehide: Tento skript sa môže použiť, keď používateľ môže opustiť stránku.

    Atribúty udalosti formulára

    Tieto udalosti sú vyvolané akciami vo formulári HTML.

    Onblur: Spúšťa sa, keď element stratí zaostrenie.

    Onchange: Spustí sa, len čo sa zmení hodnota prvku.

    Oncontextmenu: Spustí sa pri spustení kontextovej ponuky.

    Onfocus: Aktivuje sa, len čo je prvok zaostrený.

    Oninput: Skript sa musí spustiť, keď element dostane vstup.

    Onsearch: Spustí sa, keď používateľ niečo napíše do vyhľadávacieho poľa.

    Oninvalid: Spustí sa, keď je zadaný prvok neplatný.

    Kľúčové atribúty udalosti

    Onkeydown: Aktivuje sa pri stlačení klávesu.

    onkeypress: Spustí sa po stlačení klávesu.

    Onkeyup: Spustí sa, keď užívateľ uvoľní kľúč.

    Atribúty udalosti myši

    Onclick: Spustí sa, keď myš klikne na prvok.

    Onmousemove: Spustí sa, keď sa kurzor myši pohybuje, keď je nad prvkom.

    Onmouseip: Aktivuje sa, keď sa tlačidlo myši uvoľní z elementu.

    Onwheel: Aktivuje sa, keď sa koliesko myši pohybuje nad alebo nadol nad prvkom

    Presuňte atribúty udalosti

    Ondrag: Spustí sa to, keď sa prvok pretiahne.

    Ondragleave: Skript sa spustí, keď element opustí platný cieľ.

    Ondrop: Spúšťa sa, keď je pretiahnutý prvok vynechaný

    Onscroll: Skript sa spustí, keď sa posúva posúvacia lišta prvku.

    Záver - Atribúty HTML

    HTML je najstaršia technológia, ktorá sa používa na vytváranie rôznych webových aplikácií. Časom sa HTML postupne vyvíjalo a poskytuje množstvo funkcií pre prítomné prvky. Poskytuje širokú škálu atribútov, ktoré pomáhajú pri zefektívňovaní aplikácie. Patria sem základné atribúty, ktoré sú najčastejšie používané základné atribúty. Poskytuje tiež atribúty internacionalizácie, ktoré umožňujú zmeny jazykov. Atribút údajov pomáha pri ukladaní údajov a prispôsobuje ich tak, ako to chce užívateľ. Vďaka všetkým týmto má tiež globálne atribúty, ktoré je možné použiť s akýmkoľvek prvkom a kdekoľvek. Má tiež atribúty udalosti, ktoré sa spustia, keď dôjde k akejkoľvek udalosti. Vďaka tomu je webová aplikácia alebo webová stránka veľmi interaktívna. HTML sa tak vďaka všetkým týmto funkciám stále nachádza v hre vývoja webových aplikácií. Vďaka týmto atribútom štýl, ktorý sa dá použiť s CSS, je použitie krajšie a atraktívnejšie. Využite teda všetky prítomné atribúty a jednoduchým spôsobom vytvorte úžasnú webovú aplikáciu podľa vášho výberu.

    Odporúčané články

    Toto bola príručka pre atribúty HTML. Tu sme diskutovali o konceptoch a rôznych atribútoch HTML. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

    1. Čo je to HTML jednoduchým spôsobom?
    2. Naučte sa, ako funguje HTML
    3. Čo je to XML?
    4. Najlepšie štýly zoznamu HTML
    5. Porovnanie HTML verzus XML