HTML5 - Skapa dokument och attribut

HTML5 - Skapa dokument och attribut

Detta är den minst intressanta delen, men utan tvekan är den en av de mest kritiska. Varje dokument HTML använder åtminstone en del av dessa element och ibland alla, så det skadar inte att vi vet hur vi använder dem på lämpligt sätt för att skapa dokument HTML5 korrekt och allmänt.
Dokumenttypselement
Låt oss börja med typelementen dokumentera. Det här är blocken som formar vårt dokument HTML och anger ett första sammanhang för webbläsaren.
Doctype -elementet
Elementet doctype det är unikt i sin kategori. Det är bra att starta varje dokument HTML som vi skapar med ett element av typ doctype. Detta är elementet som berättar för webbläsaren att den kommer att hantera HTML.
De flesta webbläsare kommer fortfarande att visa vårt innehåll korrekt om vi utelämnar doctype, men det är dåligt att lita på att webbläsaren beter sig på detta sätt.
Rätt syntax för att tillämpa ett element av typ doctype är nästa:
HTML -elementet
Detta element kallas mestadels rotelementet och det indikerar början på HTML i vårt dokument.
Syntaxen är följande:


Innehåll och element här

Huvudelementet
Elementet huvud Den innehåller alla metadata för dokumentet. I HTML, metadata ger webbläsaren information om innehållet och markeringen i dokumentet, men dessutom kan vi inkludera skript och referenser till externa resurser, till exempel stilark CSS.
Syntaxen är följande i dokumentet:



Hallå


Kroppselementet
Detta element inkapslar innehållet i ett dokument HTML, är motsatsen till huvudelementet som inkapslar metadata och information om dokumentet. Elementet kropp det följer alltid huvudelementet, vilket betyder att det är det andra barnet i strukturen för root -html -elementet.
Låt oss se dess syntax:

Exempel

jag gillar äpplen och apelsiner.

Element av typmetadata
Metadatatypselementen tillåter oss att tillhandahålla information om dokumentet HTML. De är inte själva nöjda men ger information om innehållet som kommer att följa dem. Element av typmetadata läggs till i huvudelementet.
Ange en titel på vårt dokument
Elementet titel ange en titel eller ett namn på vårt dokument. Webbläsare visar vanligtvis innehållet i detta element högst upp i fönstret eller fliken.
Låt oss se hur vi lägger till det i vår struktur:

Exempel

jag gillar äpplen och apelsiner.

Ange grunden för relativa webbadresser
Baselementet fixar a Url bas, i vilken vilka relativa länkar, som finns i dokumentet HTML kommer att lösas. En relativ länk är en som utelämnar protokollet, värden och porten för URL: en och utvärderas mot en annan URL. Baselementet anger också hur länkar öppnas när en användare klickar på dem och hur webbläsaren fungerar efter att ett formulär har angetts.
Efter att ha sett de väsentliga elementen för dokumentet kan vi bara slutföra med resten av de element som fungerar för metadata och därmed bygga ett dokument HTML korrekt och det kan tolkas av alla webbläsare på bästa sätt.
Attribut

• dir

Attribut dir anger riktningen för texten i ett element. De värden som stöds för det är:

• ltr (text från vänster till höger)
• rtl (text från höger till vänster)

Låt oss se ett enkelt exempel på dess tillämpning:

Exempel

dir = "rtl"> Detta är höger-till-vänster

dir = "ltr">Detta är från vänster till höger

• innehållsmeny

Detta attribut låter oss definiera sammanhanget för elementen för menyerna. Dessa visas på skärmen när användaren avfyrar dem så att säga, till exempel när vi högerklickar på ett element.

• dragbar

Attribut dragbar är en del av HTML5 -stöd för dra och släpp och används för att indikera när ett element kan dras.

• dropzone

Attribut dropzone är en del av HTML5 -stöd för dra och släpp y är motsvarigheten till dragbar attribut som förklarades ovan.

• dold

Attribut dold Det är ett booleskt attribut som indikerar att ett element inte är relevant, därför kommer det inte att visas visuellt i dokumentet. Webbläsare tolkar detta attribut på ett sätt som döljer objektet från användarens vy. Låt oss se ett exempel på det:

Exempel
Växla



dold>

Jams	Stad
Adam Freeman	London
Joe Smith	New York
Anne jones	Paris

I det här exemplet definierar vi en tabell som innehåller ett tr -element som representerar en rad där det dolda attributet finns. Dessutom definierar vi en knapp som när den trycks in aktiverar Javascript -funktionen toggleHidden som tar bort det dolda attributet.

• gå

Ett av de mest kända attributen är gå, som låter dig tilldela ett element en unik identifierare. Dessa identifierare används vanligtvis för att styla ett element eller välja ett element med Javascript. Låt oss titta på ett exempel på hur vi använder id -attributet för att utforma ett element.

Exempel

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

• stavnings kontroll

Attribut stavnings kontroll används för att ange om webbläsaren ska kontrollera syntaxen för något innehåll. Användningen av detta attribut är bara meningsfull när det tillämpas på ett element som användaren kan redigera.
Låt oss se ett exempel:

Exempel
stavningskontroll = "sant"> Det här är felstavad text

• stil

Attribut stil tillåter oss att definiera en CSS -stil direkt i ett element, ser vi:

Exempel
style = "bakgrund: grå; färg: vit; vaddering: 10px">
Besök Apress -webbplatsen

• tabindex

Detta attribut tillåter oss att styra ordningen på elementens fokus när vi kommer åt dem via tabellnyckeln.
Exempel
Jams: tabindex = "1"/>

Stad: tabindex = "- 1"/>

Land: tabindex = "2"/>

tabindex = "3"/>

Vi har kunnat lära oss allt om attribut och hur de kan tillämpas på element i vårt HTML -dokument. Detta för att utöka dess funktionalitet på ett sätt som anpassar sig till behoven på vår webbplats.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng