HTML-attribut

HTML-attribut kan sägas som specialord som används i öppningstaggar och är ansvariga för att kontrollera ett elements beteende. De är en modifierare av HTML-elementtyp. Den här modifieraren kan göra två jobb. Det kan antingen ändra standardfunktionen för ett element eller det kan tillhandahålla funktionaliteten till alla element som inte kan fungera ordentligt utan dem. Syntaktiskt läggs ett attribut till HTML-starttaggen. Det finns olika typer av attribut som har identifierats. Dessa inkluderar nödvändiga attribut, valfria attribut, standardattribut och händelseattribut. Obligatoriska attribut är de som behövs av en viss elementtyp så att funktionen fungerar korrekt. Det valfria attributet kan användas för att ändra standardfunktionen för en elementtyp. Standardattributen stöds av ett stort antal elementtyper och händelseattribut kan användas för att orsaka elementtyper som kan specificera skript som körs under specifika omständigheter. Attributen visas vanligtvis som namnvärdepar och är separerade med '=' (lika tecken). De skrivs inom starttaggen för ett element efter elementets namn.

Olika HTML-attribut

Låt oss titta på olika HTML-attribut och hur de fungerar i detalj.

Kärnattribut

Det finns fyra kärnattribut som används huvudsakligen. För att namnge dessa är de följande:

  • ID: Detta attribut för HTML kan enkelt användas för att identifiera ett element som finns på en HTML-sida på ett unikt sätt. Användar-ID kan användas antingen när ett element har ett ID-attribut som en unik identifierare, vilket gör det möjligt att identifiera elementet och dess innehåll eller om det används när det finns två element som har samma namn på en webbsida. ID-attributet kan hjälpa till att enkelt identifiera skillnaden mellan elementen som har samma namn.
  • Titelattributet: Detta attribut gör arbetet med att ge en föreslagen titel för ett visst element. Det beror på transportören hur det kommer att bete sig och även om det vanligtvis inte visas som ett verktygstips när markören kommer över elementet eller om det måste visa det när elementet laddas. Det används också för att förklara ett element på att sväva musen över den. Beteendet kan skilja sig åt med olika element och i allmänhet visas dess värde vid inläsning eller vid muspekaren över den.
  • Klassattributet: associeringen av detta attribut görs med ett element i stilarket. Användaren måste ange klassen för elementet. Mer kan läsas om detta attribut när Cascading Style-ark lärs. Värdet här kan också vara en mellanseparerad lista med klassnamn. Till exempel: klass = “klassnamn1 klassnamn2 klassnamn3”
  • Styleattributet: Detta attribut låter dig ange reglerna för Cascading Style Sheet inom vilket element som helst. Det kan ge olika Cascading Style-effekter till HTML-elementen som att öka teckenstorleken. Det kan också ändra typsnitt och färgläggning.

Efter kärnattributen har vi några internationaliseringsattribut. De är som nedan:

Internationaliseringsattribut

  • Dir: Att-attributet hjälper dig att indikera till webbläsaren i vilken riktning en text ska följa. Detta attribut kan vanligtvis ta upp två värden. Dessa kan vara LTR och RTL. LTR betyder vänster till höger och detta är standardvärdet, medan RTL står för höger till vänster. När detta attribut används inom tagg avgör det hur en text ska representeras i hela dokumentet. Det kan också användas för att styra textens riktning från bara taggens innehåll.
  • Langattributet: Detta attribut hjälper till att visa upp huvudspråket som används i ett dokument. Detta attribut kan förvaras i HTML så att det är bakåtkompatibelt med tidigare versioner av HTML. Det kan också ersättas av XML: lang attribut i nya XHTML-dokument. Värdena för langattribut är ISO-639-standard och har två-tecken språkkoder. Att förklara ett språk är viktigt för att få åtkomst till applikationen och olika sökmotorer.
  • XML-Lang-attributet: Detta attribut är tänkt att ersätta lang-attributet. Värdet på attributet XML-lang måste ha landskoden som nämnts tidigare.

Utöver dessa finns det många generiska attribut som beskrivs nedan.

Generiskt attribut

  • Justera attribut: Detta attribut är användbart när du vill ha några delar av din sida till ditt förfogande. Du kan ändra justeringen till vänster, höger eller mitten av sidan. Standardinställningen för alla element är inställd på vänster. Detta kan ändras genom att använda detta justeringsattribut.
  • Src-attribut: Om en användare behöver infoga en bild på en webbsida måste vi använda tagg med src-attributet. Vi kan ange bildens adress som attributets värde i den dubbla offerten. Du kan använda src-attributet enligt nedan för att inkludera bilden på webbsidan.


src Attribute


  • Alt attribut: Detta attribut används som en alternativ tagg som kan användas för att visa något om det primära attributet som är tagg som inte visar det ursprungliga värdet som tilldelats det. Detta kan beskriva bilden till en utvecklare som använder den i slutet av kodningen. Om huvudbilden misslyckas kan den alternativa bilden användas för att visa.
  • Attribut för bredd och höjd: Detta attribut kan användas för att justera höjden och bredden på en bild.

Example:

Width and Height


<

  • Href-attributet: Detta attribut används när användaren vill rikta till en specifik länk till vilken adress som helst. Detta attribut används tillsammans med tagg. När länken placeras i href-attributet där den ska riktas, kopplas den till texten som visas i taggen. När användaren klickar på den här texten omdirigeras användaren till länkens adress. Standardalternativet för att öppna den här sidan på samma flik. Om du använder målattributet kan du ställa in dess värde på _blank. Detta kommer att omdirigera till en annan flik eller ett annat fönster baserat på din webbläsares konfiguration.

Dataattribut

HTML tillhandahåller också anpassade dataattribut som hjälper dig att lägga till information relaterad till dig i HTML-taggar. Dessa är inte specifika för HTML5 och kan användas på alla HTML-element. Data - * -attributet hjälper oss att anpassa våra egna anpassade dataattribut, det kan lagra informationen privat på sidan eller applikationen.

För att anpassa delas uppgifterna i två delar:

  1. Attributnamn: Det bör ha minst ett tecken långt och bör inte ha några stora bokstäver. Detta namn kan också förinställas med 'data-'.
  2. Attributvärde: Värdet för ett attribut kan vara vilken sträng som helst.

Syntaxen för dataattribut är som:

  • Gitanjali

    • DOM Attribut Egendom

    För att få NamedNodeMap-objekt ska attributegenskaperna i HTML DOM användas. Det kommer att returnera gruppen av nodattribut. NamedNodeMap representerar också samlingen av attributobjekt och det kan nås med indexnummer. Detta indexnummer börjar på 0.

    Syntaxen för att använda detta är: node.attribut

    Värdet som returneras är NamedNodeMap-objekt som finns i samlingen av noder. Om användaren använder Internet Explorer 8 eller någon av de tidigare versionerna kommer attributegenskapen att returnera alla möjliga attribut för något element och detta kan resultera i fler värden än väntat.

    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

    Globala attribut

    HTML tillhandahåller också globala attribut som kan användas med alla HTML-element. Attributen är som nedan.

    • Accesskey: Den anger en genvägsknapp för att aktivera eller fokusera på alla element.
    • Översätt: Om det här attributet används anger det om innehållet i elementet ska översättas eller inte.
    • Klass: Den anger ett eller flera klassnamn för ett element.
    • Titel: Det här attributet anger extra information om ett element.
    • Contiteditable: För att ange om innehållet är redigerbart eller inte kan detta attribut användas.
    • Tabindex: Den anger flikordning för ett element.
    • Dir: Den anger textriktningen för alla innehåll i ett element.
    • Stavekontroll: Användaren kan uttryckligen ange om de måste kontrollera stavningen och grammatiken kontrollerad eller inte.
    • Draggable: Den anger om ett element ska vara dragbar eller inte.
    • Dropzone: Den anger om den drakta informationen ska kopieras, flyttas eller länkas när de släpps.

    Eventattribut

    HTML har förmågan att utlösa åtgärder när vissa händelser äger rum. Händelsets attribut kan vara som nedan.

    Onload: Den tänds efter att sidan har laddats.

    Onmessage: Detta kan sägas som ett skript som körs när meddelandet utlöses.

    Onstorage: Detta är ett skript som ska köras när ett webblagringsområde uppdateras.

    Onerror: Detta skript körs när ett fel uppstår.

    Onpagehide: Det här skriptet kan användas när en användare kan navigera bort från en sida.

    Form Händelseattribut

    Dessa händelser utlöses av åtgärder i en HTML-form.

    Onblur: Det utlöses så snart elementet tappar fokus.

    Utbyte: Det utlöses så snart värdet på ett element ändras.

    Oncontextmenu: Detta körs när en snabbmeny utlöses.

    Fokus: Det utlöses så snart elementet får fokus.

    Oninput: Skriptet måste köras när elementet får en ingång.

    Onsearch: Detta utlöses när användaren skriver något i sökfältet.

    Oninvalid: Detta utlöses när ett element som anges är ogiltigt.

    Viktiga händelsegenskaper

    Onkeydown: Det utlöses när man trycker på en knapp.

    onkeypress: Detta utlöses när man trycker på en knapp.

    Onkeyup: Detta utlöses när en användare släpper en nyckel.

    Mushändelsegenskaper

    Onclick: Detta utlöses när musen klickar på ett element.

    Onmousemove: Detta avfyras när muspekaren rör sig medan den är över ett element.

    Onmouseip: Det utlöses när en musknapp släpps från över ett element.

    Hjul: Det utlöses när mushjulet rullar upp eller ner över ett element

    Dra händelseattribut

    Ondrag: Detta utlöses när ett element dras.

    Ondragleave: Skriptet körs när ett element lämnar ett giltigt droppmål.

    Ondrop: Det utlöses när det dragna elementet tappas

    Onscroll: Skriptet körs när ett elements rullningsfält rullas.

    Slutsats - HTML-attribut

    HTML är den äldsta tekniken som används för att skapa olika webbapplikationer. Med tiden har HTML utvecklats gradvis och ger många funktioner för de element som finns. Det tillhandahåller en mängd olika attribut som hjälper till att göra applikationen mer effektiv. Dessa inkluderar kärnattribut som är de grundläggande som används oftast. Det ger också internationaliseringsattribut som möjliggör språkändringar. Dataattributet hjälper till med att lagra data och anpassa det så som användaren vill att det ska vara. Med alla dessa har den också globala attribut som kan användas med alla element och var som helst. Den har också händelsegenskaper som utlöses när någon form av händelse äger rum. Som ett resultat gör det webbapplikationen eller webbsidan mycket interaktiv. HTML visar sig därför fortfarande vara med i utvecklingen av webbapplikationer på grund av alla dessa funktioner. Med dessa gör stilattributet som kan användas med CSS det vackrare och attraktivare att använda. Så använd alla attribut som finns och har en fantastisk webbapplikation som du väljer på ett enkelt sätt.

    Rekommenderade artiklar

    Detta har varit en guide till HTML-attribut. Här har vi diskuterat begrepp och olika attribut för HTML. Du kan också titta på följande artiklar för att lära dig mer -

    1. Vad är HTML i enkla termer?
    2. Lär dig hur HTML fungerar
    3. Vad är XML?
    4. Topp HTML-listor
    5. Jämförelser mellan HTML och XML

    Kategori:

    Verktyg för webbutveckling