Atributy HTML - Naučte se atributy HTML s příklady

Obsah:

Anonim

Atributy HTML

Atributy HTML lze říci jako speciální slova, která se používají uvnitř úvodních značek a jsou zodpovědná za řízení chování prvku. Jsou modifikátory typu prvků HTML. Tento modifikátor může provádět dvě úlohy. Může buď změnit výchozí funkčnost prvku, nebo může poskytnout funkčnost libovolnému prvku, který bez nich nemůže správně fungovat. Syntakticky je atribut přidán do počáteční značky HTML. Byly identifikovány různé typy atributů. Mezi ně patří povinné atributy, volitelné atributy, standardní atributy a atributy událostí. Požadované atributy jsou ty, které jsou vyžadovány konkrétním typem prvku, aby funkce fungovala správně. Volitelný atribut lze použít k úpravě výchozí funkce typu prvku. Standardní atributy jsou podporovány velkým počtem typů prvků a atributy událostí lze použít k tomu, aby způsobily typy prvků, které mohou specifikovat skripty, které se spouštějí za určitých okolností. Atributy se obvykle zobrazují jako páry název-hodnota a jsou odděleny '=' (rovná se znaménko). Jsou zapsány do počáteční značky prvku za názvem prvku.

Různé atributy HTML

Podívejme se na různé atributy HTML a jak fungují podrobně.

Základní atributy

Hlavně se používají čtyři hlavní atributy. K jejich jmenování patří:

  • ID: Tento atribut HTML lze snadno použít k jedinečné identifikaci prvku, který je přítomen na stránce HTML. ID uživatele lze použít buď, když prvek nese atribut id jako jedinečný identifikátor, který umožňuje identifikovat prvek a jeho obsah, nebo se používá, když jsou na webové stránce dva prvky, které mají stejné jméno. Atribut ID může pomoci při snadné identifikaci rozdílu mezi prvky, které mají stejný název.
  • Atribut Title: Tento atribut provádí práci při navrhování názvu pro konkrétní prvek. Záleží na nosiči, jak se bude chovat, ačkoli se obvykle nezobrazí jako popis, kdykoli kurzor přejde na prvek nebo pokud jej musí zobrazit, když se prvek načítá. Používá se také k vysvětlení prvku, který na něj umístí kurzor myši. Chování se může u různých prvků lišit a obecně se jeho hodnota zobrazuje při načítání nebo při najetí kurzorem myši na něj.
  • Atribut třídy: Asociace tohoto atributu se provádí s prvkem šablony stylů. Uživatel musí určit třídu prvku. Více se o tomto atributu dozvíte při učení se kaskádových stylů. Hodnota zde může být také seznam názvů tříd oddělených mezerami. Například: class = “className1 className2 className3”
  • Atribut stylu: Tento atribut umožňuje určit pravidla kaskádových stylů v libovolném prvku. Může HTML elementům poskytnout různé efekty kaskádových stylů, jako je zvětšení velikosti písma. Může také změnit rodinu písem a zbarvení.

Po základních atributech máme některé internacionalizační atributy. Jsou to níže:

Atribut internacionalizace

  • Dir: Atribut dir vám pomůže při určování směru, kterým by měl text procházet prohlížeč. Tento atribut může obvykle nabrat dvě hodnoty. Mohou to být LTR a RTL. LTR znamená zleva doprava a toto je výchozí hodnota, zatímco RTL znamená zprava doleva. Pokud je tento atribut použit ve značce, určuje, jak by měl být text reprezentován v celém dokumentu. Může být také použit k ovládání směru textu pouze z obsahu značky.
  • Atribut Lang: Tento atribut pomáhá ukázat hlavní jazyk používaný v dokumentu. Tento atribut lze zachovat v HTML, takže je zpětně kompatibilní s předchozími verzemi HTML. Může být také nahrazen atributem XML: lang v nových dokumentech XHTML. Hodnoty atributů lang jsou standardem ISO-639 a mají dvoumístné jazykové kódy. Prohlášení o jazyce je důležité pro přístup k aplikaci a různým vyhledávacím strojům.
  • Atribut XML-Lang: Tento atribut má nahradit atribut lang. Hodnota atributu XML-lang musí mít kód země, jak bylo uvedeno výše.

Kromě těchto existuje mnoho obecných atributů, které jsou popsány níže.

Obecný atribut

  • Zarovnat atribut: Tento atribut je užitečný, když chcete mít k dispozici některé prvky své stránky. Zarovnání můžete změnit doleva, doprava nebo do středu stránky. Výchozí zarovnání pro všechny prvky je nastaveno doleva. To lze změnit pomocí tohoto atributu zarovnání.
  • Atribut Src: Pokud uživatel potřebuje vložit obrázek do webové stránky, musíme použít tag s atributem src. Můžeme zadat adresu obrázku jako hodnotu atributu uvnitř uvozovky. Atribut src můžete použít níže, chcete-li na webovou stránku vložit obrázek.


src Attribute


  • Atribut Alt: Tento atribut se používá jako alternativní značka, kterou lze použít k zobrazení něčeho, pokud je primární atribut, kterým je tag, který nedokáže zobrazit původní hodnotu, která je k němu přiřazena. To může popisovat obrázek vývojáři, který jej používá na konci kódování. Pokud selže hlavní snímek, lze k zobrazení použít alternativní snímek.
  • Atribut Šířka a Výška: Tento atribut lze použít k úpravě výšky a šířky obrázku.

Example:

Width and Height


<

  • Atribut Href: Tento atribut se používá, když uživatel chce nasměrovat konkrétní odkaz na libovolnou adresu. Tento atribut se používá společně se značkou. Když je odkaz umístěn v atributu href, kam má být nasměrován, je propojen s textem zobrazeným ve značce. Když uživatel klikne na tento text, bude přesměrován na adresu odkazu. Výchozí možnost otevřít tuto stránku na stejné kartě. Pokud využijete cílový atribut, můžete nastavit jeho hodnotu na _blank. To přesměruje na jinou kartu nebo jiné okno na základě konfigurace prohlížeče.

Atribut dat

HTML také poskytuje vlastní atributy dat, které vám pomohou přidat informace, které se vás týkají, do značek HTML. Nejsou specifické pro HTML5 a lze je použít na všechny prvky HTML. Atribut data - * nám pomáhá při přizpůsobování vlastních atributů vlastních dat, může ukládat data soukromě na stránku nebo do aplikace.

Pro přizpůsobení jsou data rozdělena do dvou částí:

  1. Název atributu: Měl by mít alespoň jeden znak a neměl by obsahovat velká písmena. Toto jméno lze také předponovat pomocí 'data-'.
  2. Hodnota atributu: Hodnota atributu může být libovolný řetězec.

Syntaxe atributu dat je následující:

  • Gitanjali
  • Vlastnost atributu DOM

    K získání objektů NamedNodeMap by měly být použity vlastnosti atributů v HTML DOM. Vrátí skupinu atributů uzlů. NamedNodeMap také představuje kolekci atributových objektů a lze k nim přistupovat pomocí indexového čísla. Toto číslo indexu začíná na 0.

    Syntaxe pro použití je: node.attributes

    Vrácená hodnota je NamedNodeMap objekty, které jsou přítomny ve sbírce uzlů. Pokud uživatel používá aplikaci Internet Explorer 8 nebo některou z dřívějších verzí, vrátí vlastnost atributy všechny možné atributy pro jakýkoli prvek, což může mít za následek více hodnot, než se očeká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ální atributy

    HTML také poskytuje globální atributy, které lze použít s jakýmkoli prvkem HTML. Atributy jsou níže.

    • Accesskey: Určuje klávesovou zkratku pro aktivaci nebo zaměření na jakýkoli prvek.
    • Přeložit: Pokud je tento atribut použit, určuje, zda má být obsah prvku přeložen nebo ne.
    • Třída: Určuje jeden nebo více názvů tříd pro prvek.
    • Název: Tento atribut určuje další informace o prvku.
    • Contenteditable: S cílem určit, zda je obsah upravitelný nebo ne, lze tento atribut použít.
    • Tabindex: Určuje pořadí tabulátorů prvku.
    • Dir: Určuje směr textu pro jakýkoli obsah prvku.
    • Kontrola pravopisu: Uživatel může výslovně určit, zda musí zkontrolovat pravopis a gramatiku zkontrolovat či nikoli.
    • Výsuvný: Určuje, zda má být prvek tažný nebo ne.
    • Dropzone: Určuje, zda budou přetažená data zkopírována, přesunuta nebo propojena, když bude zrušena.

    Atributy události

    HTML má schopnost spustit akce, když se odehrají některé události. Atributy události mohou být následující.

    Onload: Spouští se po dokončení načítání stránky.

    Onmessage: Toto lze říci jako skript, který se spustí při spuštění zprávy.

    Onstorage: Toto je skript, který se má spustit při aktualizaci oblasti webového úložiště.

    Onerror: Tento skript se spustí, když dojde k chybě.

    Onpagehide: Tento skript lze použít, když uživatel může opustit stránku.

    Atributy události formuláře

    Tyto události jsou spouštěny akcemi uvnitř formuláře HTML.

    Onblur: Spouští se, jakmile prvek ztratí fokus.

    Onchange: Spouští se, jakmile se změní hodnota prvku.

    Oncontextmenu: Spustí se při spuštění kontextové nabídky.

    Onfocus: Aktivuje se, jakmile je prvek zaostřen.

    Oninput: Skript musí být spuštěn, když prvek obdrží vstup.

    Onsearch: Spustí se, když uživatel něco napíše do vyhledávacího pole.

    Oninvalid: Spustí se, když je zadaný prvek neplatný.

    Atributy klíčových událostí

    Onkeydown: Spouští se při stisknutí tlačítka.

    onkeypress: Spustí se při stisknutí tlačítka.

    Onkeyup: Spustí se, když uživatel uvolní klíč.

    Atributy události myši

    Onclick: Spustí se, když myš klikne na prvek.

    Onmousemove: Toto je aktivováno, když se ukazatel myši pohybuje, když je nad elementem.

    Onmouseip: Spouští se, když je tlačítko myši uvolněno přes prvek.

    Onwheel: Aktivuje se, když se kolečko myši převaluje nahoru nebo dolů přes prvek

    Přetáhněte atributy události

    Ondrag: Toto se spustí, když je prvek přetažen.

    Ondragleave: Skript je spuštěn, když element opustí platný cíl přetažení.

    Ondrop: Spouští se, když je přetažený prvek upuštěn

    Onscroll: Skript je spuštěn při posouvání posuvníku prvku.

    Závěr - Atributy HTML

    HTML je nejstarší technologie, která se používá k vytváření různých webových aplikací. Časem se HTML postupně vyvíjelo a poskytuje spoustu funkcí pro přítomné prvky. Poskytuje širokou škálu atributů, které pomáhají zvyšovat efektivitu aplikace. Patří sem základní atributy, které jsou základní, nejčastěji používané. Poskytuje také atributy internacionalizace, které umožňují změny jazyků. Atribut data pomáhá při ukládání dat a přizpůsobuje je tak, jak si to uživatel přeje. Se všemi těmito, má také globální atributy, které lze použít s jakýmkoli prvkem a kdekoli. Má také atributy události, které se spouštějí, když se vyskytne jakákoli událost. Díky tomu je webová aplikace nebo webová stránka velmi interaktivní. HTML se díky všem těmto funkcím stále ukazuje ve hře vývoje webových aplikací. Díky nim atribut stylu, který lze použít s CSS, činí použití krásnějším a atraktivnějším. Využijte všechny přítomné atributy a snadno vytvořte úžasnou webovou aplikaci podle svého výběru.

    Doporučené články

    Toto byl průvodce atributy HTML. Zde jsme diskutovali o koncepcích a různých atributech HTML. Další informace naleznete také v následujících článcích -

    1. Co je to HTML jednoduše?
    2. Naučte se, jak HTML funguje
    3. Co je to XML?
    4. Nejlepší styly seznamu HTML
    5. Porovnání HTML vs XML