HTML5 - Crearea documentelor și a atributelor

HTML5 - Crearea documentelor și a atributelor

Aceasta este cea mai puțin interesantă parte, dar fără îndoială este una dintre cele mai critice. Fiecare document HTML folosește cel puțin o parte din aceste elemente și uneori pe toate, deci nu strică să știm cum să le folosim în mod adecvat pentru crearea documentelor HTML5 corectă și generală.
Elemente de tip document
Să începem cu elementele de tip document. Acestea sunt blocurile care modelează documentul nostru HTML și stabilește un context inițial pentru browser.
Elementul doctype
Elementul doctype este unic în categoria sa. Este o bună practică să porniți fiecare document HTML pe care le creăm cu un element de tip doctype. Acesta este elementul care îi spune browserului că va avea de-a face HTML.
Majoritatea browserelor vor afișa în continuare corect conținutul nostru dacă omitem doctype, dar este o practică proastă să ai încredere în browserul care se comportă în acest fel.
Sintaxa corectă pentru aplicarea unui element de tip doctype este următorul:
Elementul html
Acest element este numit în principal elementul rădăcină și indică începutul codului HTML din documentul nostru.
Sintaxa este următoarea:


Conținut și elemente aici

Elementul cap
Elementul cap Conține toate metadatele pentru document. În HTML, metadatele oferă browserului informații despre conținutul și marcajul din document, dar în plus putem include scripturi și referințe la resurse externe, cum ar fi foile de stil CSS.
Sintaxa este următoarea în document:



Buna ziua


Elementul corpului
Acest element încapsulează conținutul unui document HTML, este opusul elementului head care încapsulează metadatele și informațiile documentului. Elementul corp urmează întotdeauna elementul head, ceea ce înseamnă că este al doilea copil din structura elementului html rădăcină.
Să-i vedem sintaxa:

Exemplu

imi place mere și portocale.

Elemente de metadate de tip
Elementele de tip metadate ne permit să furnizăm informații despre document HTML. Nu sunt mulțumiți singuri, dar oferă informații despre conținutul care le va urma. Elementele de metadate de tip sunt adăugate elementului head.
Setarea unui titlu pentru documentul nostru
Elementul titlu setați un titlu sau un nume la documentul nostru. Browserele afișează de obicei conținutul acestui element în partea de sus a ferestrei sau a filei.
Să vedem cum îl adăugăm la structura noastră:

Exemplu

imi place mere și portocale.

Setarea bazei pentru adresele URL relative
Elementul de bază fixează a Url bază, în care ce legături relative, conținute în document HTML va fi rezolvat. O legătură relativă este una care omite protocolul, gazda și portul adresei URL și este evaluată în raport cu o altă adresă URL. Elementul de bază specifică, de asemenea, modul în care sunt deschise legăturile atunci când un utilizator face clic pe ele și cum acționează browserul după introducerea unui formular.
După ce am văzut elementele esențiale pentru document, nu putem completa decât cu restul elementelor care funcționează pentru metadate și, astfel, să construim un document HTML corect și care poate fi interpretat de orice browser în cel mai bun mod.
Atribute

• dir

Atribut dir specifică direcția textului conținut într-un element. Valorile acceptate pentru aceasta sunt:

• ltr (text de la stânga la dreapta)
• rtl (text de la dreapta la stânga)

Să vedem un exemplu simplu de aplicare a acestuia:

Exemplu

dir = "rtl"> Aceasta este de la dreapta la stânga

dir = "ltr">Aceasta este de la stânga la dreapta

• meniul contextual

Acest atribut ne permite să definim contextul elementelor pentru meniuri. Acestea apar pe ecran atunci când utilizatorul le declanșează, ca să spunem așa, de exemplu, când facem clic dreapta pe un element.

• glisabil

Atribut glisabil face parte din suportul HTML5 pentru trage si lasa și este folosit pentru a indica când un element poate fi tras.

• dropzone

Atribut dropzone face parte din suportul HTML5 pentru trage si lasa y este contrapartida atributului glisabil care a fost explicat mai sus.

• ascuns

Atribut ascuns Este un atribut boolean care indică faptul că un element nu este relevant, prin urmare nu va fi prezent vizual în document. Browserele interpretează acest atribut într-un mod care ascunde elementul din vizualizarea utilizatorului. Să vedem un exemplu:

Exemplu
Comutare



ascuns>

Yam	Oraș
Adam Freeman	Londra
Joe Smith	New York
Anne Jones	Paris

În acest exemplu definim un tabel care conține un element tr care reprezintă un rând în care este prezent atributul ascuns. În plus, definim un buton care, atunci când este apăsat, invocă funcția Javascript toggleHidden care elimină atributul ascuns.

• merge

Unul dintre cele mai cunoscute atribute este merge, care vă permite să atribuiți un identificator unic unui element. Acești identificatori sunt utilizați în mod obișnuit pentru a stiliza un element sau pentru a selecta un element cu Javascript. Să vedem un exemplu al modului în care folosim atributul id pentru a stiliza un element.

Exemplu

id = "w3clink"href =" http://w3c.org "> site-ul web W3C

• verificare a ortografiei

Atribut verificare a ortografiei este folosit pentru a specifica dacă browserul ar trebui să verifice sintaxa unui anumit conținut. Utilizarea acestui atribut are sens numai atunci când este aplicat unui element pe care utilizatorul îl poate edita.
Să vedem un exemplu:

Exemplu
verificare ortografică = "adevărat"> Acesta este un text greșit de scris

• stil

Atribut stil ne permite să definim un stil CSS direct într-un element, vedem:

Exemplu
style = "background: gray; color: white; padding: 10px">
Accesați site-ul Apress

• tabindex

Acest atribut ne permite să controlăm ordinea focarelor elementelor atunci când le accesăm prin intermediul tastei tabulare.
Exemplu
Yam: tabindex = "1"/>

Oraș: tabindex = "- 1"/>

Țară: tabindex = "2"/>

tabindex = "3"/>

Am putut afla totul despre atribute și cum pot fi aplicate elementelor din documentul nostru HTML. Acest lucru pentru a-și extinde funcționalitatea într-un mod care se adaptează la nevoile site-ului nostru web.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv