Johdatus HTML5-semanttisiin elementteihin

Seuraava artikkeli tarjoaa sinulle erilaisia ​​semanttisia elementtejä html5: ssä. Aloitetaan semantiikan ymmärtämisellä. Semantiikka on kyse erityyppisistä tunnisteista, joiden toiminnot kuvaavat ja suorittavat saman toiminnon kuin tunnisteensa nimi. Tunnisteen toiminnallisuus ymmärrettäisiin helposti sen nimellä; joka on käyttäjän ymmärrettävässä nimessä / muodossa. Suurin osa HTML: n elementeistä on yleensä semanttisia elementtejä.

Semanttisten elementtien edut HTML5: ssä

semanttisten elementtien edut ovat seuraavat:

  • Helppo koodin ymmärtäminen.
  • Huolto voidaan tehdä nopeasti ja asianmukaisesti.
  • Minkään tunnisteen kuvausta ei tarvitse lisätä.

Erilaisia ​​semanttisia elementtejä HTML5: ssä

Mennään nyt HTML5: n semanttisiin elementteihin.

1.

Tämä tunniste antaa meille käsityksen siitä, että tämän tunnisteen tiedot ovat erityisesti samanlaista sisältöä varten. Se riippuu erityyppisistä artikkeleista, joita meillä yleensä on. Se voi olla blogi, foorumit, sanomalehtien sarakeartikkelit jne.

Koodi:



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

lähtö:

2.

Tämä tunniste on tarkoitettu toimittamaan osittaisia ​​tietoja kokonaistiedoista. Tietäessäsi sekä artikkeli- että osiotunnisteiden käyttöä, näitä tunnisteita voidaan käyttää kunkin tunnisteen sisällä. Eli ositunnistetta voidaan käyttää artikkelikoodin sisällä ja päinvastoin.

Koodi:


The section here is about:

Oppiminen ja harjoittelu

lähtö:

3.

Tämä tunniste antaa kaikki otsikkotiedot. Tätä otsikkotunnistetta käytetään kaikki tiedot, jotka haluamme sijoittaa otsikkomuotoon. Ja tätä tunnistetta voidaan käyttää useita kertoja koko HTML-komentosarjassa. Katsotaanpa pieni esimerkki siitä.

Koodi:



This is header #1



This is header #1



This is header #1

Ensimmäinen

seuraava …

Tämä on otsikko # 2


Toinen

lähtö:

4.

Tämä on HTML-komentosarjan alatunniste-osa. Yleensä näemme kaikki tekijänoikeustiedot ja pienen osan, joka löytyy kaikista tarjouksista, kuten ”ehtoja sovelletaan” kaikkiin tarjouksiin. Joten nämä asiat määritellään alatunnisteen alla.

Koodi:


Kehon sisällä ja alatunnisteen yläpuolella

Sisäpuolella alatunniste.



Toinen alatunniste

Ehdot ovat voimassa

lähtö:

5.

Tämä tunniste antaa meille navigointielementit. Minkä tahansa HTML-dokumentin komentosarjojen URL-osoite, jossa yleensä haluamme navigoida sivulta toiselle sivulle tämän tunnisteen avulla. Kaikki tämän tunnisteen avulla annetut tiedot ovat saatavana hyperlinkkeinä. Nämä hyperlinkit voivat olla hyödyllisiä navigoidessaan osiosta toiseen. Pieni esimerkki on määritelty seuraavasti:

Koodi:


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

lähtö:

Napsauta harjoittelun aikana näitä linkkejä ja tarkista, kuinka hyperlinkin väri muuttuu napsautettaessa.

6.

Tämä on tunniste, jota käytetään tietojen näyttämiseen HTML-dokumentimme sivuilla. Monista verkkosivustoista löytyy sivupalkissa olevaa sisältöä, joka näytetään tällä sivumerkillä. Tämän sisällön tulisi olla yhdenmukainen asiakirjassa olevien muiden tietojen kanssa. Katsotaanpa pieni esimerkki siitä.

Koodi:


Kuinka sivutunnistetta käytetään

Sisällä sivutunniste


Sisältö sivuun tunniste

lähtö:

Tarkkaa sisältöä ei voida määritellä kokonaan samalla tavalla, se voidaan dokumentoida ja ymmärtää vain selvästi koko HTML-sivua käytettäessä.

7.

Tämä tunniste määrittelee, että aiomme liittää kuvan. Tätä tunnistetta voidaan käyttää määrittämään kuvan lähde ja näyttämään gif tai kuva.

Koodi:





Kuten edellä mainittiin, tällä tavoin voimme määritellä kuvion. Kuvatagin sisällä voimme määrittää kuvankäskymme lähdetagilla. Tämän kuvamerkin sisällä voimme vuorostaan ​​käyttää kuvatekstitystunnistetta.

8.

Tätä tunnistetta käytetään kuvatekstin tarjoaman kuvan alle. Sitä voidaan käyttää kuvamerkin sisällä. Tämän käyttö voidaan nähdä alla olevassa esimerkissä.




This is description of the image attached.

Voit yrittää suorittaa saman antamalla kuvan lähteen ja tarkistaa, miten lähtö näytetään.

9.

Tämä tunniste määrittelee kaikki HTML-sivuston määritteet ja täydellisen sisällön. Se sisältää kaiken ainutlaatuisen sisällön. Tärkeä huomioitava asia tässä tunnisteessa on, että tätä tunnistetta voidaan käyttää vain kerran koko sivun luomisessa. Huomaamme, että muita tunnisteita voidaan käyttää useammin kuin kerran verkkosivun luomisessa, mutta tämä päätunniste on yksi aikakäytön tunniste.

Koodi:



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

Lukeminen auttaisi ymmärtämään erilaisia ​​aiheita



harjoitellaan


Opiskelun kanssa harjoittelu on välttämätöntä oppimiseksi

lähtö:

10.

Tämä tunniste on tarkoitettu tietyn sisällön tai datan korostamiseen. Toisin sanoen tämä tunniste on hyödyllinen tietojen merkitsemiseen. Katsotaanpa tästä pieni esimerkki tästä:

Koodi:


Tässä koko tekstissä, jonka nyt kirjoitan, haluan merkitä tämän tekstin

lähtö:

11.

Tämä tunniste sisältää lisätietoja, joiden avulla käyttäjät voivat piilottaa haluamansa tiedot. Tämän tunnisteen avulla käyttäjät voivat avata / sulkea kaiken tarvitsemansa sisällön. Jos haluamme, että tunniste paljastaa sen yksityiskohdat itse alussa, niin attribuuttia ”avoin” voidaan käyttää.

Alla on pieni esimerkki samasta:

Koodi:



Näytetäänkö tämä?

lähtö:

Mikä olisi tulos, jos emme käyttäisi avointa attribuuttia?



Näytetäänkö tämä?

Lähtö 1:

Lähtö 2:

12.

Tätä tunnistetta käytetään yksityiskohdatunnisteessa. Tiedot-tunnisteessa meillä voi olla yhteenvetotunniste, joka määrittelee verkkosivun tai HTML-asiakirjan koko yhteenvedon. Tärkeää huomata tässä, että yhteenvetotunniste on ensimmäinen lapsitunniste, jonka on oltava yksityiskohdatunnisteen alla. Löydämme pieni esimerkki alla:

Koodi:



Have written this inside summary tag which is inside details tag

Tämä teksti kuuluu vain yksityiskohdatunnisteeseen

Nämä tekstitiedot kirjoitetaan yksityiskohdatunnisteen valmistumisen jälkeen

Lähtö 1:

Yllä olevassa tuotossa olimme korostaneet nuolen, kun saamme ulostulomme 2 laajentaessamme sitä.

Lähtö 2:

Tämä tunniste ei ehkä anna mitään eroa

13.

Tämä tunniste määrittelee päivämäärän / kellonajan sellaisessa muodossa, että käyttäjät ymmärtävät sen helposti. Huomaa kuitenkin, että tämä tunniste ei välttämättä anna meille muutettua tulosta monissa selaimissa.

Koodi:


Tällä hetkellä kello on 11:00 illalla.

lähtö:

14.

Kuten nimi jo viittaa, tämä tunniste on kaiken sisällön kirjoittamiseen laatikkoon. Tällä tunnisteella tulisi olla avoin määrite valintaikkunan näyttämiseksi, kun lähdekoodi on suoritettu. Löydä alla oleva esimerkki:



Täällä kirjoitetut tiedot näytetään valintaikkunassa

lähtö:

15.

Tämä tunniste antaa tietyn tehtävän etenemisen graafisessa esityksessä. Meillä täällä on oltava enimmäismäärä, jota edistystä on edustettava. Tämä tunniste koostuu pääasiassa kahdesta määritteestä. Max ja arvo ovat kaksi määrittäjää. Max edustaa kokonaismäärää, joka on suoritettava, ja Arvo antaa meille prosenttimäärän, joka on valmis, suhteessa enimmäismäärän arvoon. Seuraava esimerkki:

Koodi:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

lähtö:

16.

Tämä tunniste on mitattava. Tätä voidaan hyödyntää myös kyselyn tai levytilan käytön tilaa varten. Tässä tunnisteessa on käytettävä muutamia määritteitä. Attribuutit ovat max, min ja arvo. Niiden käytön perusteella voimme varmasti selvittää niiden tarkoituksen ja käytön.

Koodi:


EDCUBA


EDCUBA


EDCUBA

Mittarin käyttö

Asun 6 kerroksisessa asunnossa 2. kerroksessa:
2/6

lähtö:

17.

Tämä on tunniste, joka on otettu käyttöön videotiedostojen lisäämiseksi HTML-sivulle. Kunnes tämä tunniste otettiin käyttöön, kehittäjät käyttivät laajennuksia videotiedostojen tuomiseen HTL-sivun sisältöön. On olemassa muutamia määritteitä, joita voidaan käyttää tunnisteen kanssa. Automaattinen toisto, esiasennus ja mykistetty ovat joitakin näistä.

Koodi:







Tarvitsemme vain lähdetagin, jotta lähde saadaan mistä meidän on ladattava videosisältö sivuillemme.

18.

Tämä tunniste on tarkoitettu äänitiedostojen lisäämiseen HTML-sivulle. Käyttö ja lähdetagi olisivat samat kuin videotunnisteessa. Kokeile harjoituksena kaikkia semanttisia elementtejä ja luo e HTML 5 -version verkkosivusto oppiaksesi paremmin ja nopeammin.

johtopäätös

Tässä artikkelissa on saatu nähdä monia semanttisia elementtejä ja niiden käyttöä HTML5: ssä. Yksi tärkeä huomioitava asia on, että Internet Explorerin versiot, jotka ovat suurempia kuin 9 ja kromiversiot, jotka tukevat monia näistä tunnisteista, kannattaa siis oppia ja harjoitella paremmin ymmärtääksesi tunnisteiden käyttöä HTML 5: ssä.

Suositellut artikkelit

Tämä on opas HTML5: n semanttisiin elementteihin. Tässä keskustellaan HTML5: n johdannosta ja semanttisista elementeistä sekä koodin toteutuksesta. Voit myös tarkastella seuraavaa artikkelia saadaksesi lisätietoja -

  1. 10 parasta uutta HTML5-elementtiä
  2. HTML5-tunnisteet
  3. HTML5-verkkotyöntekijät
  4. Erityyppiset HTML-tapahtumat