HTML5 - Opprettelse av dokumenter og attributter

HTML5 - Opprettelse av dokumenter og attributter

Dette er den minst interessante delen, men uten tvil er den en av de mest kritiske. Hvert dokument HTML bruker minst en del av disse elementene og noen ganger alle, så det skader ikke at vi vet hvordan vi bruker dem riktig for å lage dokumenter HTML5 korrekt og generelt.
Dokumenttypeelementer
La oss starte med elementene av typen dokument. Dette er blokkene som former dokumentet vårt HTML og angir en innledende kontekst for nettleseren.
Doctype -elementet
Elementet doctype det er unikt i sin kategori. Det er god praksis å starte hvert dokument HTML som vi lager med et element av type doctype. Dette er elementet som forteller nettleseren at den vil håndtere HTML.
De fleste nettlesere vil fremdeles vise innholdet vårt riktig hvis vi utelater doctype, men det er dårlig praksis å stole på at nettleseren oppfører seg på denne måten.
Den riktige syntaksen for å bruke et element av type doctype er det neste:
HTML -elementet
Dette elementet kalles for det meste rotelementet, og det indikerer begynnelsen på HTML -en i dokumentet vårt.
Syntaksen er som følger:


Innhold og elementer her

Hodet element
Elementet hode Den inneholder alle metadataene for dokumentet. I HTML, gir metadata nettleseren informasjon om innholdet og merkingen i dokumentet, men i tillegg kan vi inkludere skript og referanser til eksterne ressurser som stilark CSS.
Syntaksen er som følger i dokumentet:



Hallo


Kroppselementet
Dette elementet innkapsler innholdet i et dokument HTML, er det motsatte av hodeelementet som omslutter metadata og informasjon om dokumentet. Elementet kropp det følger alltid hodeelementet, noe som betyr at det er det andre barnet i strukturen til rot -html -elementet.
La oss se syntaksen:

Eksempel

jeg liker epler og appelsiner.

Elementer av type metadata
Metadatatypelementene lar oss gi informasjon om dokumentet HTML. De er ikke innhold alene, men gir informasjon om innholdet som vil følge dem. Elementer av typen metadata legges til i hodeelementet.
Angi en tittel på dokumentet vårt
Elementet tittel angi en tittel eller et navn på dokumentet vårt. Nettlesere viser vanligvis innholdet i dette elementet øverst i vinduet eller kategorien.
La oss se hvordan vi legger det til strukturen vår:

Eksempel

jeg liker epler og appelsiner.

Angir grunnlaget for relative nettadresser
Basiselementet fikser a Url basis, der hvilke relative lenker, som finnes i dokumentet HTML vil bli løst. En relativ lenke er en som utelater protokollen, verten og porten til URL -adressen og evalueres mot en annen URL. Basiselementet spesifiserer også hvordan koblinger åpnes når en bruker klikker på dem og hvordan nettleseren fungerer etter at et skjema er lagt inn.
Etter å ha sett de essensielle elementene for dokumentet, kan vi bare fullføre med resten av elementene som fungerer for metadataene og dermed bygge et dokument HTML riktig, og det kan tolkes av hvilken som helst nettleser på den beste måten.
Attributter

• dir

Egenskap dir angir retningen til teksten i et element. Verdiene som støttes for det er:

• ltr (tekst fra venstre til høyre)
• rtl (tekst fra høyre til venstre)

La oss se et enkelt eksempel på applikasjonen:

Eksempel

dir = "rtl"> Dette er høyre til venstre

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

• kontekstmenyen

Dette attributtet lar oss definere konteksten til elementene for menyene. Disse vises på skjermen når brukeren skyter dem så å si, for eksempel når vi høyreklikker på et element.

• drabar

Egenskap drabar er en del av HTML5 -støtte for dra slipp og brukes til å indikere når et element kan dras.

• droppsone

Egenskap droppsone er en del av HTML5 -støtte for dra slipp y er motstykket til dragbar -attributtet som ble forklart ovenfor.

• skjult

Egenskap skjult Det er et boolsk attributt som indikerer at et element ikke er relevant, derfor vil det ikke være visuelt tilstede i dokumentet. Nettlesere tolker dette attributtet på en måte som skjuler elementet fra brukerens visning. La oss se et eksempel på det:

Eksempel
Veksle



skjult>

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

I dette eksemplet definerer vi en tabell som inneholder et tr -element som representerer en rad der det skjulte attributtet er tilstede. I tillegg definerer vi en knapp som trykker på Javascript -funksjonen når den trykkes toggleHidden som fjerner det skjulte attributtet.

• gå

En av de mest kjente egenskapene er gå, som lar deg tilordne en unik identifikator til et element. Disse identifikatorene brukes ofte til å style et element eller velge et element med Javascript. La oss se på et eksempel på hvordan vi bruker id -attributtet til å style et element.

Eksempel

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

• stavekontroll

Egenskap stavekontroll brukes til å angi om nettleseren skal kontrollere syntaksen til noe innhold. Bruken av dette attributtet er bare fornuftig når det brukes på et element som brukeren kan redigere.
La oss se et eksempel:

Eksempel
stavekontroll = "sant"> Dette er en feilstavet tekst

• stil

Egenskap stil lar oss definere en CSS -stil direkte i et element, ser vi:

Eksempel
style = "bakgrunn: grå; farge: hvit; polstring: 10px">
Besøk nettstedet Apress

• tabindeks

Denne egenskapen lar oss kontrollere rekkefølgen på elementene i elementene når vi får tilgang til dem via tabellnøkkelen.
Eksempel
Yam: tabindex = "1"/>

By: tabindex = "- 1"/>

Land: tabindex = "2"/>

tabindex = "3"/>

Vi har kunnet lære alt om attributter og hvordan de kan brukes på elementer i HTML -dokumentet vårt. Dette for å utvide funksjonaliteten på en måte som tilpasser seg behovene til nettstedet vårt.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng