tag-ul a fost introdus cu HTML5 cu ceva timp în urmă, deși este posibil să nu fiți familiarizați cu ceea ce face sau cu cât poate fi folosit în multe situații diferite. În acest tutorial, veți afla diferența dintre și alte etichete comparabile și cum puteți să-l utilizați pentru a îmbunătăți modul în care grupați articolele în marcajul dvs..
Acesta este un tutorial de nivel începător, dar va servi, de asemenea, ca o reînnoire utilă pentru alții.
Utilizări tipice pentru
Să vedem mai întâi ce trebuie să spună doctorul HTML5 în această privință:
Elementul figura reprezintă o unitate de conținut, opțional cu o legendă, care este autonomă, care este de obicei menționată ca o singură unitate din fluxul principal al documentului și care poate fi mutată departe de fluxul principal al documentului fără care afectează semnificația documentului. -Richard Clark
Asa ca figura Elementul specifică conținutul autonom, cum ar fi ilustrațiile și fotografiile. Aceasta înseamnă că veți folosi întotdeauna figura eticheta pentru a găzdui altceva.
O concepție greșită în mod obișnuit este aceea figura pot fi folosite numai pentru imagini. De fapt, acesta poate fi folosit pentru a grupa orice număr de lucruri diferite, inclusiv, dar fără a se limita la, imagini, video, audio și blocuri de cod.
Definirea structurii paginii
figura este o rădăcină de secționare, ceea ce înseamnă că îi izolează efectiv conținutul de structura strămoșilor săi. Orice este în interiorul figurii nu contribuie la conturul documentului în afara acestuia. Se comportă ca un element structural al paginii și poate, prin urmare, să conțină propriile titluri, începând cu un și lucrează în jos prin ierarhie , și așa mai departe, dar acest lucru nu are legătură cu ierarhia din afară:
Ierarhia din figură nu are nicio influență asupra conturului strămoșilor săi
Elemente precum acest lucru sunt adesea folosite pentru a introduce conținut extern în document, ca de exemplu un citat. este un alt exemplu de element rădăcină.
Imagini
Iată un exemplu tipic despre modul în care figura eticheta poate fi utilizată pentru a afișa o imagine.
Acum, s-ar putea să vă gândiți, "De ce să vă deranjez să îmi împachetez eticheta img în marcajul suplimentar?" Aceasta este o întrebare corectă, dar începe să aibă sens când îți dai seama că a pot conține mai mult de un element copil, cum ar fi o legendă.
Există, de asemenea, o etichetă pentru o subtitrare, sau mai degrabă, figcaption. Luând în considerare acest lucru, veți putea să îl utilizați în modul următor.
Ce faci? Sunt o legendă!
Imagini multiple
Folosind doar o serie de img elementele de afișare a imaginilor funcționează bine, deși fiecare imagine individuală ar fi autonomă ca propriul bloc de cod, complet necondiționat cu oricare alta. În cazul în care imaginile împart o relație de un fel figura vine la salvare. Aceste trei imagini sunt legate și împărtășesc un rezumat unic în figcaption.
Trei imagini diferite, grupate împreună ca o figură, și fiind inscripționate cu figcaption.
Utilizarea pentru blocurile de coduri
figura elementul de talent pentru gruparea elementelor cu tematică obișnuită nu se termină aici. Poate doriți să grupați un cod inline, împreună cu o subtitrare, într-un tutorial, de exemplu, pe care îl puteți folosi figura și figcaption în modul următor:
Viața este bună, a spus HTML5 la XHTML.
În acest bloc de coduri, vedem HTML5 vorbind cu XHTML.
figura pot fi utilizate în acest fel cu cod, pre, și mămăligă, făcând ușor gruparea blocurilor de coduri.
Înfășurarea în sus
Asta e! Ați învățat cum să utilizați figura element, împreună cu figcaption și alte elemente pentru a grupa mai multe elemente împreună. Cum folosiți figura element în acest moment? Va schimba asta ca urmare a citirii acestui sfat rapid? Spune-ne în comentarii!
Share
Accentsconagua
Ierarhia din figură nu are nicio influență asupra conturului strămoșilor săi
