Sissejuhatus HTML5 semantilistesse elementidesse

Järgmine artikkel pakub teile html5 erinevaid semantilisi elemente. Alustame semantika mõistmisega. Semantika on seotud eri tüüpi siltidega, mille funktsionaalsus kujutaks ja täidaks sama funktsiooni nagu sildi nimi. Sildi funktsionaalsusest saab selle nime abil hõlpsasti aru; mis on kasutajale arusaadavas nime / vormingus. Enamik HTML-i elemente on üldiselt semantilised elemendid.

Semantiliste elementide eelised HTML5-s

semantiliste elementide eelised on järgmised:

  • Lihtne koodi mõistmine.
  • Hooldust saab teha kiiresti ja sobivalt.
  • Spetsiaalselt ühegi sildi jaoks pole vaja kirjeldust lisada.

HTML5 mitmesugused semantilised elemendid

Laskem nüüd käsitleda HTML5 semantilisi elemente.

1

See silt annab meile idee, et selle sildi andmed on spetsiaalselt sarnase sisu jaoks. See sõltub eri tüüpi artiklitest, mis meil ka üldiselt on. See võib olla ajaveeb, foorumid, ajalehtede veergude artiklid jne.

Kood:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Väljund:

2

Selle sildi eesmärk on koguandmete läbilõike sisu pakkumine. Teades nii artiklite kui ka jaotiste siltide kasutamist, saab neid silte kasutada iga sildi sees. See on jaotise silt, mida saab kasutada artikli sildi sees ja vastupidi.

Kood:


The section here is about:

Õppimine ja harjutamine

Väljund:

3

See silt annab kõik päise andmed. Selle päise sildi all kasutatakse kõiki andmeid, mida me tahame päise vormingusse paigutada. Ja seda silti saab terve HTML-i skriptimisel kasutada mitu korda. Vaatame selle kohta väikest näidet.

Kood:



This is header #1



This is header #1



This is header #1

Esimene

järgmine …

See on päis nr 2


Teine

Väljund:

4

See on meie HTML-skripti jaluse jaotis. Üldiselt näeme kõiki autoriõigusi puudutavaid andmeid ja väikest jaotist, mille leiame mis tahes pakkumiste alt, näiteks “kehtivad tingimused”. Nii et need asjad on määratletud jaluse sildi all.

Kood:


Kere sees ja jaluse silt ülal

Jaluse silt.


Veel üks jaluse silt


Tingimused kehtivad

Väljund:

5

See silt annab meile navigeerimiselemente. Mis tahes HTML-dokumendi skriptis sisalduv URL, kus me üldiselt tahame selle sildi abil ühelt lehelt teisele liikuda. Kõik selle sildi all esitatud andmed on saadaval hüperlinkidena. Need hüperlingid võivad olla kasulikud ühest jaotisest teise jaotises liikumisel. Väike näide on määratletud järgmiselt:

Kood:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Väljund:

Klõpsake harjutades neid linke ja kontrollige, kuidas hüperlingi värv klõpsamisel muutub.

6

See on silt, mida kasutatakse andmete kuvamiseks meie HTML-dokumendi külgedel. Paljudel veebisaitidel võime leida külgribal asuvat sisu, mida kuvatakse selle kõrvale sildi abil. See sisu peaks olema kooskõlas dokumendis sisalduvate muude andmetega. Vaatame selle kohta väikest näidet.

Kood:


Kuidas kõrvale sildi kasutatakse?


Seespool silt


Sisu sildi sees

Väljund:

Täpset sisu ei saa täpselt samal viisil täpsustada, seda saab kogu HTML-lehekülje kasutamise ajal dokumenteerida ja selgelt mõista.

7

See silt täpsustab, et lisame pildi. Seda silti saab kasutada pildi allika täpsustamiseks ja gif-i või pildi kuvamiseks.

Kood:





Nagu eespool mainitud, saame nii joonise silti määratleda. Joonisildi sees saame oma pildikäskluse täpsustada lähtetekstiga. Selle figuurisildi sees saame omakorda kasutada figuuride pealdist.

8

Seda silti kasutatakse pealdise andmiseks pakutavale kujutisele. Seda saab kasutada figuurisildi sees. Selle kasutamist võib näha alltoodud näites.




This is description of the image attached.

Võite proovida sama teostada, andes pildiallika ja kontrollides, kuidas väljundit kuvatakse.

9

See silt täpsustab kõik HTML-saidi atribuudid ja kogu sisu. See sisaldab kogu ainulaadset sisu. Selle konkreetse sildi juures on oluline tähele panna, et seda silti saab kogu lehe loomisel kasutada ainult üks kord. Leiame, et muid silte saab veebilehe loomisel kasutada rohkem kui üks kord, kuid see peamine märgend on ühekordne ajakasutuse märgend.

Kood:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

Lugemine aitaks mõista erinevaid teemasid



Harjutamine


Õppimisega on harjutamine õppimises kohustuslik

Väljund:

10.

See silt on konkreetse sisu või andmete esiletõstmiseks. Teisisõnu on see märgend abiks andmete märgistamisel. Vaatame allpool väikest näidet:

Kood:


Selles kogu tekstis, mida ma praegu kirjutan, tahan selle teksti ära märkida

Väljund:

11

See silt sisaldab täiendavaid üksikasju, mille abil kasutajad saavad soovi korral peita kõik üksikasjad. Selle sildi kaudu saavad kasutajad avada / sulgeda mis tahes sisu, mida nad vajavad. Kui soovime, et silt avaldaks selle üksikasjad alguses, siis võib kasutada atribuuti „avatud“.

Allpool on toodud väike näide samast:

Kood:



Kas seda kuvatakse?

Väljund:

Mis oleks väljund, kui me ei kasutaks avatud atribuuti?



Kas seda kuvatakse?

1. väljund:

2. väljund:

12.

Seda märgendit kasutatakse üksikasjade sildi sees. Üksikasjaliku sildi all võib olla kokkuvõttesilt, mis täpsustab kogu veebilehe või HTML-dokumendi kokkuvõtte. Oluline on siinkohal märkida, et kokkuvõttesilt on esimene lastesilt, mis peab detailide sildi alla jääma. Leidkem allpool väike näide:

Kood:



Have written this inside summary tag which is inside details tag

See tekst kuulub ainult üksikasjade sildi alla


Need tekstiandmed kirjutatakse pärast üksikasjade sildi täitmist

1. väljund:

Ülaltoodud väljundis tõstsime noole esile, kuna saame väljundi 2, kui seda laiendame.

2. väljund:

See silt ei pruugi eristada

13.

See silt määratleb kuupäeva / kellaaja sellises vormingus, et kasutajad saaksid seda hõlpsalt mõista. Kuid tuleb märkida, et see märgend ei pruugi paljudes brauserites meile väljundit muuta.

Kood:


Praegu on kell 11:00 öösel.

Väljund:

14.

Nagu nimigi juba vihjab, on see silt mõeldud kasti sisu kirjutamiseks. Sellel sildil peaks olema avatud atribuut dialoogiboksi kuvamiseks pärast lähtekoodi täitmist. Siit leiate näite:



Siia kirjutatud andmed kuvatakse dialoogiboksis

Väljund:

15.

See silt annab teatud ülesande edenemise graafilisel kujul. Siin peab olema maksimaalne arv, mille jaoks edusamme tuleb esindada. See silt koosneb peamiselt kahest atribuudist. Max ja väärtus on kaks atribuuti. Max tähistab koguarvestust, mis tuleb lõpule viia, ja Value annab meile protsendimäära, mis on lõppenud maksimaalse loendusväärtuse suhtes. Selle näide on allpool:

Kood:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Väljund:

16.

See silt on mõõtmiseks. Seda saab kasutada päringuga võetud ruumi jaoks või ka kettaruumi kasutamiseks. Selle sildiga tuleb kasutada mõnda atribuuti. Atribuudid on max, min ja value. Nende kasutamise põhjal saame kindlasti välja mõelda nende eesmärgi ja kasutuse.

Kood:


EDCUBA


EDCUBA


EDCUBA

Meter sildi kasutamine

6-korruselises korteris elan 2. korrusel:
2-st 6-st

Väljund:

17.

See on silt, mis on kasutusele videofailide lisamiseks meie HTML-lehele. Kuni selle sildi juurutamiseni kasutasid arendajad pistikprogramme videofailide tutvustamiseks HTL-i lehe sisusse. Siin on mõned atribuudid, mida saab koos sildiga kasutada. Mõned neist on automaatne esitamine, eellaadimine ja vaigistatud.

Kood:







Vajame lihtsalt allikasilti, et anda allikas sealt, kust peame videosisu oma lehele üles laadima.

18.

See silt on helifailide lisamiseks meie HTML-lehele. Kasutus ja allikasilt oleks samad, mis videosildil. Proovige paremini ja kiiremini õppimiseks kasutada kõiki semantilisi elemente ja luua e HTML 5 versiooni veebileht.

Järeldus

Selles artiklis peame nägema paljusid semantilisi elemente ja nende kasutamist HTML5-s. Üks oluline asi, mida siin tähele panna, on see, et paljusid neist siltidest toetavad Internet Exploreri versioonid, mis on suuremad kui 9, ja kroomitud versioonid, mis on suuremad kui 3. Niisiis, jätkake õppimist ja harjutamist, et HTML 5-te siltide kasutamisest paremini aru saada.

Soovitatavad artiklid

See on HTML5 semantiliste elementide juhend. Siin käsitleme HTML5 sissejuhatust ja erinevaid semantilisi elemente koos selle koodi rakendamisega. Lisateabe saamiseks võite vaadata ka järgmist artiklit -

  1. 10 parimat HTML5 uut elementi
  2. HTML5 sildid
  3. HTML5 veebitöötajad
  4. Erinevat tüüpi HTML-i sündmused

Kategooria: