Johdanto HTML5-tunnisteisiin

Me kaikki tiedämme HTML: n vakio lyhenteen; mikä on HyperText Markup Language. Joten HTML5 on viimeisin ja uusi HTML-versio. Kun tuotetta on kehitetty, ilmeisesti HTML-versiosta olisi monia versioita, joiden varrella olisi paljon uusia kehityksiä. Joten HTML5: llä on uusia ominaisuuksia ja käyttäytymistapoja. Tämä HTML5-tunniste ei ole enää ohjelmointikieli, mutta se on merkintäkieli. Mikä on merkintäkieli? Elementtimääritelmien määritteleminen dokumentin tunnisteiden avulla on merkintäkieli. Joten nyt tutkitaan yksityiskohtaisemmin, kuinka voimme määritellä tunnisteet ja luoda verkkosivun.

Tunnisteet HTML5

Tunniste on eritelmä sisällön näyttämiseen. Yleensä olisi aloitus- ja lopetunniste. Ja on myös muutamia tunnisteita, jotka eivät vaadi lopputunnistetta; Kuten
mikä tarkoittaa rivin katkeamista, joka näyttää tiedot kyseisen tunnisteen vieressä seuraavalta riviltä. Katsotaan tässä joitain HTML5: n uusista elementeistä.

HTML5: ssä voimme yleensä jakaa tunnisteet kahteen luokkaan.

  • Semanttiset elementit: Harvoja esimerkkejä näistä elementeistä ovat;, , jne.
  • Ei-semanttiset elementit: Esimerkkejä tästä ovat;, jne.

Jäljempänä keskustellaan tageista, jotka otetaan hiljattain käyttöön yksinomaan HTML5-versioissa. Ne ovat erityyppisiä tunnisteita, jotka kaikki voidaan luokitella.

1. Rakenteelliset tunnisteet

Alla on tyyppisiä rakenteellisia tunnisteita esimerkein:

a. Artikkeli: Tämä on tunniste, jota käytetään enimmäkseen pääntunnisteen tapaan. Käytetään pääasiassa lomakkeissa, blogeissa, uutistarinoissa ja kaikissa esimerkkeinä.

Koodi:

Ensimmäinen


Tervetuloa takaisin

lähtö:

b. Syrjään: Jotain samanlaista kuin normaalit tunnisteet, jotka suhteuttavat sisällön ympäröivään sisältöön, kuten artikkelin sivupalkki. Ja tämä tunniste olisi järkevä vain käytettäessä yli 8: n IE-versiota.

C. Tiedot: Tätä tunnistetta käytetään tarjoamaan käyttäjälle lisätietoja. Tämä voi olla vuorovaikutteinen alusta, joka voi piilottaa tai näyttää yksityiskohdat. Voimme nähdä tämän välilehden käytön tiivistelmätagin alla.

d. Otsikko: Tämä tunniste liittyy otsikkoosaan ja sisältää otsikkotiedot. Siinä on oltava sekä aloitus- että lopetustunnisteet.

Koodi:

Iloiset tunnit


Aamu | Iltapäivä | Ilta

lähtö:

e. hgroup: Tätä tunnistetta käytetään kuvaamaan otsikkoryhmää . Katsotaanpa esimerkkiä.

Koodi:

Tarkistetaan tämän h1: n koko


Tarkistetaan tämän H2: n koko


Tarkistetaan tämän h3: n koko


Tarkistetaan tämän h4: n koko


Tarkistetaan tämän h5: n koko

lähtö:

f. Alatunniste: Tämä tunniste on se, joka on asetettava sivun loppuun. Se käsittelee jotain tekijänoikeuksia, historiaan liittyviä tietoja tai tietoja. Katsokaamme alla pieni esimerkki.

Koodi:

Tekijänoikeudet | Tule pian takaisin

Ole hyvä ja tilaa heille lisää oppimissisältöä

lähtö:

g. nav: Tämä tagi on tarkoitettu osana kaikkia navigointilinkejä.

Koodi:

  • EDUCBA-kotisivu
  • Tietoja EDUCBA: sta
  • Kurssit EDUCBAssa

lähtö:

Tarkista napsauttamalla linkkejä, kun kirjoitat koodisi harjoitellessasi.

h. Jakso: Kuten nimi jo osoittaa, tämä tunniste määrittelee koodin osan, kuten runko, otsikko, alatunniste jne. Tässä tarvitaan sekä alku- että lopputunnisteet. Katsokaamme alla pieni esimerkki:

Koodi:

Tervetuloa


Nähdään pian


Kiitos.

lähtö:

i. Yhteenveto: Tätä tunnistetta käytetään rinnan tietovälilehden kanssa. Tiedot-tunnisteessa meillä on tämä yhteenvetotunniste käsitteiden yhteenvetoa varten. Alla oleva esimerkki:

Koodi:



How is this Summary tag defined?

Napsauttamalla näyttöön tulevan Yhteenveto-kysymyksen vieressä olevaa nuolta

Näyttötagin jälkeiset tiedot näytetään näin.

lähtö:

Laajentamalla nyt tiivistelmätagin tietoja saamme alla olevan.

2. Muodosta tunnisteet

Tässä on erityyppiset lomaketunnisteet, jotka selitetään alla esimerkkeinä:

a. Datalisti: Tätä tunnistetta käytetään kuten avattavaa valikkoa, jolla on ennalta määritetyt arvot käyttäjän valitsemaksi. Katsokaamme seuraava pieni esimerkki:

Koodi:

Kirjoita suosikkiselaimesi nimi:

lähtö:

Pudotusvalikko aukeaa, kun hiiri viedään hiiren päälle.

b. Keygen: Tämä on tarkoitettu salausta varten. Se on tarkoitettu salatun avaimen luomiseen datan siirtämiseksi salatussa muodossa. Tälle elementille vain aloitustunniste riittää / vaaditaan eikä lopputunniste ole pakollinen.

C. Mittari: Tämä tunniste antaisi meille tietyn alueen mitatun datan.

Koodi:


25 out of 100

Tämä on 25 100: sta

70%

Tämä on 70%: n alue

lähtö:

3. Tunnisteiden alustaminen

Alla on tyyppisiä muotoilutunnisteita ja esimerkkejä:

a. BDI: Tämä on kaksisuuntainen eristäminen. Kuten nimi jo viittaa, tätä tunnistetta voidaan käyttää erottamaan osa tekstistä ja antamaan sille erilaisia ​​tyylejä kuin muun tekstin tyyli.

b. Merkki: Tämä tagi voi auttaa meitä korostamaan tiettyä tekstiä.

Koodi:

Näin voit merkitä tai korostaa tekstiä.

lähtö:

C. Tulos: Koska nimi jo osoittaa meille, se antaa tuloksen kaikista laskelmista.

Koodi:



+
=

lähtö:

Varmista, että huomaat oninput-muotoominaisuuden. Kun olet syöttänyt määrite 'x' -arvon, tulos tulee näkyviin.

d. Edistyminen: Tämä tunniste antaa meille tietyn tehtävän etenemisen.

Koodi:

Tämä etenemispalkki on valmis 80%

lähtö:

e. Rp: Tätä käytetään, kun rubiinitageja ei tueta.

f. Rt: Sitä käytetään merkinnällä ruby. Tätä käytetään pääasiassa ääntämisessä sekä japanin että kiinan kielillä.

g. Ruby: Tätä tunnistetta käytetään rt- ja rp-tunnisteiden kanssa, joissa kahden kielen, kiinan ja japanin, merkinnät lausutaan.

h. Wbr: Tämä tunniste on sanalle break. Sitä käytetään pääasiassa tarkistamaan, kuinka sana murtuu, kun ikkunan koon kokoa muutetaan.

4. Sulautetut sisältötunnisteet

Tässä on upotetun sisällön tunnistetyypit, jotka selitetään alla esimerkkeinä:

a. Ääni: Kuten nimi jo viittaa, tämä tunniste auttaisi meitä sisällyttämään äänitiedostot HTML-asiakirjaan.

b. Kangas: Määrittää paikan verkkosivulla, jossa on grafiikoita tai muotoja tai kuvaajia tai jotka voidaan määritellä. Tässä on esimerkki.

Koodi:



window.onload = function()(
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
);

lähtö:

C. Dialogi: Tämä tunniste antaa meille oletusruudun varsinkin jos haluaisimme, että ruudussa olisi tietoja.

Koodi:

Yrität täällä valintaikkunaa Miten valintaikkuna tulee esiin?

lähtö:

d. Upota: Tätä tunnistetta voidaan käyttää minkä tahansa ulkoisen tiedoston pääsyyn HTML-tiedostoon. Meillä voi olla vain aloitustunniste, eikä lopputunniste ole tässä pakollinen. Tässä tunnisteessa voidaan käyttää erilaisia ​​määritteitä; leveys, korkeus, src ja tyyppi.

e. Kuva ja kaavio: Tämä, kuten jo nimessä, voi sisällyttää kuvat ja antaa kuvalle kuvatekstin.

f. Lähde: Tämä tagi voi toteuttaa useita ääni- ja videotiedostoja antamalla tiedostojen sijainnin tätä lähdetagia käyttämällä.

g. Aika: Tämä tunniste, kuten nimi jo ilmoittaa, on tunniste ajan osoittamiseen. Ja huomaa, että tämä tunniste ei ole toiminnallinen Internet Explorer 8: n ja sitä uudempien versioiden tapauksessa.

h. Video: Tunnisteen nimen avulla voimme tietysti saada tietää missä tätä tunnistetta käytetään. Meillä on tämä tunniste videotiedostojen määrittämiseen. Näiden ääni- / videotunnisteiden sisällä määrittelemme lähdekoodit määrittelemällä tiedostot ja niiden sijainnit.

HTML5-tunnisteiden syöttöelementit

Tässä on joitain syöttöelementtejä, joita käytämme HTML5-tunnisteissa:

1. Sähköposti: Tämä on yksi HTML5: n syöttöelementeistä. Tämä elementti ottaa syötteeksi vain sähköpostiosoitteet.

2. Numero: Tämä syöttöelementti hyväksyy vain numeron.

3. Alue: Kuten nimi jo selittää, tämä tunniste sisältää joukon numeroita.

4. URL: Tämä syöttötunniste hyväksyy URL-osoitteen syöttökentän. Tässä syöttötyypissä voimme syöttää vain URL-osoitteen.

5. Paikkamerkki: Tämä on yksi syötetyypin määritteistä, kuten teksti tai tekstialue tai mikä tahansa numero. Tämä paikanpitäjän arvo näyttää tulona annettavan arvon.

Koodi:


Enter Date of birth : placeholder = "dd/mm/yyyy"/>

lähtö:

6. Autofocus: Tämä ominaisuus keskittyy automaattisesti tiettyyn kenttään, jossa tämä elementti on ilmoitettu syöttötunnisteen sisällä. Tätä ominaisuutta tukevat vain Chromen, Safarin ja Mozillan uusimmat versiot. Syntaksi on kuin:


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

lähtö:

7.: Tämä on yksi perustunnisteista, jotka auttavat selainta ymmärtämään sen HTML-version version, johon ohjelmaa kirjoitetaan. Tämän tunnisteen ilmoitus on kirjoitettava ennen HTML-tunnistetta.

8.: Tämä metatunniste kuvaa HTML-asiakirjan kuvausta. Se sisältää kirjoittajan nimen, päivämäärän ja muutokset jne.

Tässä HTML5: ssä meillä on jopa mahdollisuus saada laitteen sijainti paikalleen. On olemassa erilaisia ​​menetelmiä, jotka voivat olla hyödyllisiä tämän sijaintimerkinnän helpottamisessa. HTML5: ssä on saatavana myös erilaisia ​​fontteja ja värejä. Alla on muutama tunniste, jotka on poistettu HTML-käytöstä tästä HTML5-versiosta.

Lyhenne, sovelma, iso, oh, kirjasin, kehyssarja, keskusta, tt (TeleType-teksti), basefont, keskipiste, lakko, kehys, u (alleviivattu teksti), isindex, kehykset jne. Muutamia poistettuja attribuutteja on alla:

Kohdista, bgcolor, solujen lisäys, solujen erottelu, reunus, linkki, muoto, merkistö, arkisto, koodipohja, laajuus, alink, vlink, linkki, tausta, reunus, tyhjennä, vieritys, koko, leveys jne.

9.: Tätä tunnistetta käytetään sisällön näyttämiseen, jos JavaScriptin käyttö on poistettu käytöstä. Mitä tahansa tämän tunnisteen sisälle kirjoitettua sisältöä voidaan käyttää sisällön sijasta missä tahansa javascriptiä käytetään. Harjoituksena voit yrittää suorittaa erilaisia ​​tunnisteita, joista ei ole esimerkkejä.

johtopäätös

Joten, kyllä, HTML5: llä on perustunnisteet ja viitteet. HTML5: n alkuperäinen versio julkaistiin 28. lokakuuta 2014. Olemme nähneet erilaisia ​​uusia tageja, jotka otettiin käyttöön ja jotka olivat käyneet läpi muutaman HTML5-määritteen. Loppujen lopuksi olimme jopa todenneet, että uusien elementtien käyttöönoton lisäksi myös joitain läsnä olleita elementtejä ja ominaisuuksia oli rajoitettu käytettäväksi tämän uuden HTML5-julkaisun kautta.

Oli monia määritteitä, jotka annettiin esimerkeillä, ja joissakin vain tiedot ja määritteen tai elementtien tarkoitus. Kokeile harjoittaa kaikkia näitä eri elementtejä ja ominaisuuksia ja jatka oppimista.

Suositellut artikkelit

Tämä on opas HTML5-tunnisteisiin. Tässä keskustellaan yksityiskohtaisesti neljästä tärkeimmästä HTML5-tunnisteesta ja sen syöttöelementeistä sekä esimerkkeistä ja koodin toteutuksesta. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja-

  1. HTML-tapahtumat
  2. HTML-asettelu
  3. HTML-kehykset
  4. HTML-taulukkotunnisteet
  5. JavaScript-tapahtumat | Eri JavaScript-tapahtumien toteutus
  6. Eri tyyppiset metatunnisteet HTML-muodossa
  7. Kuinka HTML-tekstin muotoilu toimii?
  8. Erilaisia ​​semanttisia elementtejä HTML5: ssä

Luokka:

Web-kehitystyökalut