HTML5 - Oprettelse af dokumenter og attributter

HTML5 - Oprettelse af dokumenter og attributter

Dette er den mindst interessante del, men uden tvivl en af ​​de mest kritiske. Hvert dokument HTML bruger i det mindste en del af disse elementer og nogle gange dem alle, så det skader ikke, at vi ved, hvordan vi bruger dem korrekt til at oprette dokumenter HTML5 korrekt og generelt.
Dokumenttype elementer
Lad os starte med elementerne af typen dokument. Dette er de blokke, der former vores dokument HTML og angiver en indledende kontekst for browseren.
Doctype -elementet
Elementet doctype det er unikt i sin kategori. Det er god praksis at starte hvert dokument HTML som vi skaber med et element af typen doctype. Dette er det element, der fortæller browseren, at det vil beskæftige sig med HTML.
De fleste browsere viser stadig vores indhold korrekt, hvis vi udelader doctype, men det er dårlig praksis at stole på, at browseren opfører sig på denne måde.
Den korrekte syntaks for at anvende et element af typen doctype er det næste:
HTML -elementet
Dette element kaldes for det meste rodelementet, og det angiver begyndelsen af ​​HTML i vores dokument.
Syntaksen er som følger:


Indhold og elementer her

Hovedelementet
Elementet hoved Den indeholder alle metadata for dokumentet. I HTML, metadata giver browseren oplysninger om indholdet og markup i dokumentet, men derudover kan vi inkludere scripts og referencer til eksterne ressourcer såsom typografiark CSS.
Syntaksen er som følger i dokumentet:



Hej


Kroppens element
Dette element indkapsler indholdet af et dokument HTML, er det modsatte af hovedelementet, der indkapsler metadata og information om dokumentet. Elementet legeme det følger altid hovedelementet, hvilket betyder, at det er det andet barn i strukturen af ​​root -html -elementet.
Lad os se dens syntaks:

Eksempel

jeg kan lide æbler og appelsiner.

Elementer af typen metadata
Metadatatypelementerne giver os mulighed for at give oplysninger om dokumentet HTML. De er ikke selv tilfredse, men giver oplysninger om det indhold, der vil følge dem. Elementer af typen metadata tilføjes til hovedelementet.
Indstilling af en titel til vores dokument
Elementet titel indstil en titel eller et navn til vores dokument. Browsere viser normalt indholdet af dette element øverst i vinduet eller fanen.
Lad os se, hvordan vi tilføjer det til vores struktur:

Eksempel

jeg kan lide æbler og appelsiner.

Indstilling af grundlaget for relative webadresser
Basiselementet retter a Url basis, i hvilken hvilke relative links der er indeholdt i dokumentet HTML vil blive løst. Et relativt link er et link, der udelader protokollen, værten og porten til URL'en og evalueres i forhold til en anden URL. Basiselementet angiver også, hvordan links åbnes, når en bruger klikker på dem, og hvordan browseren fungerer, efter at en formular er blevet indtastet.
Efter at have set de væsentlige elementer for dokumentet, kan vi kun gennemføre med resten af ​​de elementer, der fungerer for metadataene og dermed bygge et dokument HTML korrekt, og det kan fortolkes af enhver browser på den bedste måde.
Egenskaber

• dir

Attribut dir angiver retningen af ​​teksten i et element. De understøttede værdier for det er:

• ltr (tekst fra venstre mod højre)
• rtl (tekst fra højre til venstre)

Lad os se et enkelt eksempel på dets anvendelse:

Eksempel

dir = "rtl"> Dette er højre-til-venstre

dir = "ltr">Dette er fra venstre til højre

• kontekstmenu

Denne attribut giver os mulighed for at definere konteksten for elementerne til menuerne. Disse vises på skærmen, når brugeren så at sige affyrer dem, for eksempel når vi højreklikker på et element.

• trækkelig

Attribut trækkelig er en del af HTML5 support til drag Drop og bruges til at angive, hvornår et element kan trækkes.

• dropzone

Attribut dropzone er en del af HTML5 support til drag Drop y er modstykket til den trækbare attribut, der blev forklaret ovenfor.

• skjult

Attribut skjult Det er en boolsk attribut, der angiver, at et element ikke er relevant, derfor vil det ikke være visuelt til stede i dokumentet. Browsere fortolker denne attribut på en måde, der skjuler elementet fra brugerens visning. Lad os se et eksempel på det:

Eksempel
Skift



skjult>

Yam	By
Adam Freeman	London
Joe smith	New York
Anne jones	Paris

I dette eksempel definerer vi en tabel, der indeholder et tr -element, der repræsenterer en række, hvor den skjulte attribut er til stede. Derudover definerer vi en knap, der ved tryk på kalder Javascript -funktionen toggleHidden som fjerner den skjulte attribut.

• gå

En af de mest kendte egenskaber er gå, som giver dig mulighed for at tildele et element en unik identifikator. Disse identifikatorer bruges almindeligvis til at style et element eller vælge et element med Javascript. Lad os se på et eksempel på, hvordan vi bruger id -attributten til at style et element.

Eksempel

id = "w3clink"href =" http://w3c.org "> W3C websted

• stavekontrol

Attribut stavekontrol bruges til at angive, om browseren skal kontrollere syntaksen for noget indhold. Brugen af ​​denne attribut giver kun mening, når den anvendes på et element, som brugeren kan redigere.
Lad os se et eksempel:

Eksempel
stavekontrol = "sand"> Dette er en forkert stavet tekst

• stil

Attribut stil giver os mulighed for at definere en CSS -stil direkte i et element, ser vi:

Eksempel
style = "baggrund: grå; farve: hvid; polstring: 10px">
Besøg Apress -webstedet

• tabindeks

Denne attribut giver os mulighed for at kontrollere rækkefølgen af ​​elementernes fokus, når vi får adgang til dem via tabellenøglen.
Eksempel
Yam: tabindex = "1"/>

By: tabindex = "- 1"/>

Land: tabindex = "2"/>

tabindex = "3"/>

Vi har kunnet lære alt om attributter, og hvordan de kan anvendes på elementer i vores HTML -dokument. Dette for at udvide dets funktionalitet på en måde, der tilpasser sig vores websteds behov.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt