HTML5 - Aanmaken van documenten en attributen

HTML5 - Aanmaken van documenten en attributen

Dit is het minst interessante deel, maar het is zonder twijfel een van de meest kritische. Elk document HTML gebruikt ten minste een deel van deze elementen en soms allemaal, dus het kan geen kwaad dat we weten hoe we ze op de juiste manier kunnen gebruiken voor het maken van documenten HTML5 correct en algemeen.
Documenttype-elementen
Laten we beginnen met de elementen van type document. Dit zijn de blokken die ons document vormen HTML en stelt een initiële context in voor de browser.
Het doctype-element
Het element doctype het is uniek in zijn categorie. Het is een goede gewoonte om elk document te starten HTML die we maken met een element van type doctype. Dit is het element dat de browser vertelt waarmee het te maken zal hebben HTML.
De meeste browsers zullen onze inhoud nog steeds correct weergeven als we de . weglaten doctype, maar het is een slechte gewoonte om erop te vertrouwen dat de browser zich op deze manier gedraagt.
De juiste syntaxis voor het toepassen van een element van het type doctype is de volgende:
Het html-element
Dit element wordt meestal het root-element genoemd en geeft het begin van de HTML in ons document aan.
De syntaxis is als volgt:


Inhoud en elementen hier

Het hoofdelement
Het element hoofd Het bevat alle metadata voor het document. In HTML, de metadata voorziet de browser van informatie over de inhoud en opmaak in het document, maar daarnaast kunnen we scripts en verwijzingen naar externe bronnen zoals stylesheets opnemen CSS.
De syntaxis is als volgt in het document:



Hallo


Het lichaamselement
Dit element bevat de inhoud van een document HTML, is het tegenovergestelde van het head-element dat de metadata en informatie van het document inkapselt. Het element lichaam het volgt altijd het head-element, wat betekent dat het het tweede kind is in de structuur van het root-html-element.
Laten we de syntaxis ervan bekijken:

Voorbeeld

ik hou van appels en sinaasappelen.

Elementen van type metadata
Met de elementen van het type metadata kunnen we informatie over het document verstrekken HTML. Ze zijn op zichzelf niet inhoud, maar geven wel informatie over de inhoud die erop volgt. Elementen van het type metadata worden toegevoegd aan het head-element.
Een titel instellen voor ons document
Het element titel stel een titel of naam in voor ons document. Browsers geven de inhoud van dit element meestal boven aan het venster of tabblad weer.
Laten we eens kijken hoe we het aan onze structuur toevoegen:

Voorbeeld

ik hou van appels en sinaasappelen.

De basis leggen voor relatieve URL's
Het basiselement fixeert a URL base, in welke relatieve links, in het document HTML zal worden opgelost. Een relatieve link is er een die het protocol, de host en de poort van de URL weglaat en wordt vergeleken met een andere URL. Het basiselement specificeert ook hoe links worden geopend wanneer een gebruiker erop klikt en hoe de browser handelt nadat een formulier is ingevoerd.
Nadat we de essentiële elementen voor het document hebben gezien, kunnen we alleen de rest van de elementen voltooien die voor de metadata werken en zo een document bouwen HTML correct is en die door elke browser op de beste manier kan worden geïnterpreteerd.
attributen

• dir

Attribuut dir specificeert de richting van de tekst in een element. De ondersteunde waarden ervoor zijn:

• ltr (tekst van links naar rechts)
• rtl (tekst van rechts naar links)

Laten we een eenvoudig voorbeeld van de toepassing ervan bekijken:

Voorbeeld

dir = "rtl"> Dit is van rechts naar links

dir = "ltr">Dit is van links naar rechts

• contextmenu

Met dit attribuut kunnen we de context van de elementen voor de menu's definiëren. Deze verschijnen op het scherm wanneer de gebruiker ze als het ware afvuurt, bijvoorbeeld wanneer we met de rechtermuisknop op een element klikken.

• sleepbaar

Attribuut sleepbaar maakt deel uit van HTML5-ondersteuning voor slepen, laten vallen en wordt gebruikt om aan te geven wanneer een element kan worden gesleept.

• afgeefpunt

Attribuut afgeefpunt maakt deel uit van HTML5-ondersteuning voor slepen, laten vallen y is de tegenhanger van het versleepbare attribuut dat hierboven werd uitgelegd.

• verborgen

Attribuut verborgen Het is een Booleaans attribuut dat aangeeft dat een element niet relevant is en daarom niet visueel aanwezig zal zijn in het document. Browsers interpreteren dit kenmerk op een manier die het item voor het zicht van de gebruiker verbergt. Laten we er een voorbeeld van zien:

Voorbeeld
Schakelaar



verborgen>

Yam	Stad
Adam Freeman	Londen
Joe Smith	New York
Anne Jones	Parijs

In dit voorbeeld definiëren we een tabel die een tr-element bevat dat een rij vertegenwoordigt waarin het verborgen attribuut aanwezig is. Daarnaast definiëren we een knop die, wanneer ingedrukt, de Javascript-functie aanroept toggleVerborgen waarmee het verborgen kenmerk wordt verwijderd.

• Gaan

Een van de bekendste kenmerken is: Gaan, waarmee u een unieke identifier aan een element kunt toewijzen. Deze identifiers worden vaak gebruikt om een ​​element op te maken of een element te selecteren met Javascript. Laten we eens kijken naar een voorbeeld van hoe we het id-attribuut gebruiken om een ​​element op te maken.

Voorbeeld

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

• spellingscontrole

Attribuut spellingscontrole wordt gebruikt om aan te geven of de browser de syntaxis van bepaalde inhoud moet controleren. Het gebruik van dit attribuut heeft alleen zin wanneer het wordt toegepast op een element dat de gebruiker kan bewerken.
Laten we een voorbeeld bekijken:

Voorbeeld
spellingcontrole = "waar"> Dit is een verkeerd gespelde tekst

• stijl

Attribuut stijl stelt ons in staat om een ​​CSS-stijl direct in een element te definiëren, we zien:

Voorbeeld
style = "achtergrond: grijs; kleur: wit; opvulling: 10px">
Bezoek de Apress-site

• tabindex

Met dit attribuut kunnen we de volgorde van de brandpunten van de elementen bepalen wanneer we ze openen via de tabelsleutel.
Voorbeeld
Jam: tabindex = "1"/>

Stad: tabindex = "- 1"/>

Land: tabindex = "2"/>

tabindex = "3"/>

We hebben alles kunnen leren over attributen en hoe deze kunnen worden toegepast op elementen in ons HTML-document. Dit om de functionaliteit uit te breiden op een manier die zich aanpast aan de behoeften van onze website.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven