Sissejuhatus HTML5 siltidesse

Me kõik teame HTML-i standardset lühendit; mis on hüperteksti märgistuskeel. Niisiis, HTML5 on HTML-i uusim ja uus versioon. Kui toode on välja töötatud, oleks ilmselgelt olemas palju HTML-i versioone koos paljude uute arendustega. Niisiis, HTML5-l on uued atribuudid ja käitumisviisid. See HTML5-silt ei ole enam programmeerimiskeel, kuid see on märgistuskeel. Mis on juurdehindluskeel? Elementide atribuutide määratlemine dokumendis siltide abil on märgistuskeel. Nüüd uurime üksikasjalikumalt, kuidas saaksime silte määratleda ja veebilehte luua.

HTML5 sildid

Silt on sisu kuvamise spetsifikatsioon. Üldiselt oleks olemas algus- ja lõppsilt. Ja on ka vähe silte, mis ei vaja lõppsilti; nagu
mis tähendab rea katkemist, mis kuvab järgmisel sildil selle sildi kõrval olevad andmed. Vaatame siin mõnda uut HTML5 elementi.

HTML5-s saame sildid üldiselt jagada kahte kategooriasse.

  • Semantilised elemendid: nende elementide kohta on vähe näiteid;, , jne.
  • Mitte-semantilised elemendid: näited siin on;, jne.

Allpool käsitletakse silte, mis on hiljuti kasutusele võetud ainult HTML5 versioonides. Need on erinevat tüüpi sildid, mida kõiki saab liigitada.

1. Struktuurimärgised

Allpool on toodud struktuurisildi tüübid koos näidetega:

a. Artikkel: See on silt, mida kasutatakse enamasti sarnaselt peasildiga. Kasutatakse peamiselt vormides, ajaveebides, uudistes ja kõigis näidetes.

Kood:

Esimene


Tere tulemast tagasi

Väljund:

b. Kõrvalt: midagi sarnast meie tavaliste siltidega, mis seoksid sisu ümbritseva sisuga, nagu artikli külgriba. Ja see silt oleks mõttekas ainult siis, kui kasutate IE versiooni üle 8.

c. Üksikasjad: seda silti kasutatakse kasutajale täiendavate andmete edastamiseks. See võib olla interaktiivne platvorm, mis võib üksikasju peita või näidata. Selle vahekaardi kasutamist näeme kokkuvõtte sildi alt.

d. Päis: see silt on seotud päise osaga ja sisaldab pealkirja teavet. Sellel peavad olema nii algus- kui ka lõpumärgendid.

Kood:

Õnnelikud tunnid


Hommik | Pärastlõuna | Õhtu

väljund:

e. hgroup: seda silti kasutatakse päiste rühma kirjeldamiseks. Vaatame näites.

Kood:

Kontrollime selle h1 suurust


Kontrollime selle h2 suurust


Kontrollime selle h3 suurust


Kontrollime selle h4 suurust


Kontrollime selle h5 suurust

Väljund:

f. Jalus: see silt on see, mis tuleb paigutada lehe lõppu. See tegeleb näiteks autoriõiguse, ajalooteabe või andmetega. Vaatame allpool väikest näidet.

Kood:

Autoriõigused | Tule varsti tagasi

Lisateabe saamiseks palume end tellida

Väljund:

g. nav: see silt on mõeldud kõigi navigeerimise linkide jaotise pakkumiseks.

Kood:

  • EDUCBA kodu
  • EDUCBA kohta
  • Kursused EDUCBA

Väljund:

Kontrollige, klõpsates linkidel, kui olete treeningu ajal oma koodi kirjutanud.

h. Jaotis: Kuna nimi juba tähistab, määratleb see silt koodi selle osa, nagu korpus, päis, jalus jne. Siin on vajalikud nii algus- kui ka lõpp-sildid. Vaatame allpool väikest näidet:

Kood:

Tere tulemast


Varsti näeme


Aitäh.

Väljund:

i. Kokkuvõte: seda silti kasutatakse paralleelselt üksikasjade vahekaardiga. Üksikasjaliku sildi all on meil see kokkuvõtlik silt mõistete kokkuvõtmiseks. Allpool toodud näide:

Kood:



How is this Summary tag defined?

Klõpsuga noolele kokkuvõtliku küsimuse kõrval, mis mul kuvati

Kuvasildi järel olevad andmed kuvatakse niimoodi.

Väljund:

Nüüd laiendades kokkuvõtvate siltide andmeid, saame allpool.

2. Vormi sildid

Siin on erinevad vormimärgendite tüübid, mida allpool selgitatakse näidetega:

a. Datalist: seda silti kasutatakse rippmenüüna, millel on kasutaja poolt eelnevalt määratletud väärtused. Vaatame allpool toodud väikest näidet:

Kood:

Sisestage oma lemmikbrauseri nimi:

Väljund:

Kui hiir hõljutatakse, hüppab rippmenüü üles.

b. Keygen: see on mõeldud krüptimiseks. See on mõeldud krüptitud võtme genereerimiseks andmete edastamiseks krüptitud vormingus. Selle elemendi jaoks piisab / on kohustuslik ainult algusmärgend ja lõppsilt pole kohustuslik.

c. Mõõtur: see silt annab meile võimaluse mõõta andmeid, mis on antud vahemikus.

Kood:


25 out of 100

See on 25 juhtu 100st

70%

See on vahemik 70%

Väljund:

3. Siltide vormindamine

Allpool on vormingusiltide tüübid koos näidetega:

a. BDI: See on kahesuunaline isoleerimine. Nagu nimigi juba vihjab, saab seda silti kasutada tekstiosa eraldamiseks ja sellele erineva stiili määramiseks.

b. Mark: see silt aitab meil konkreetset teksti esile tõsta.

Kood:

Nii saate teksti märgistada või esile tõsta.

Väljund:

c. Väljund: kuna nimi meile juba näitab, annab see mis tahes arvutuse tulemuse.

Kood:



+
=

Väljund:

Veenduge, et märkate sisendi sisulist vormi atribuuti. Kui olete atribuudi 'x' väärtuse sisestanud, kuvatakse väljund.

d. Edusammud: see silt annab meile konkreetse ülesande edenemise.

Kood:

See edenemisriba on 80% valmis

Väljund:

e. Rp: seda kasutatakse siis, kui rubiini silte ei toetata.

f. Rt: seda kasutatakse sildiga rubiin. Enamasti kasutatakse seda häälduses nii jaapani kui ka hiina keeles.

g. Rubiin: seda märgendit kasutatakse rrt- ja rp-märgenditega, kus hääldatakse märkused kahe hiina ja jaapani keele kohta.

h. Wbr: see silt on sõna break jaoks. Seda kasutatakse peamiselt akna suuruse muutmisel sõna purunemise kontrollimiseks.

4. Manustatud sisumärgendid

Allpool on näidetena toodud manustatud sisumärgendite tüübid:

a. Heli: nagu nimigi juba viitab, aitaks see silt meil hõlmata helifaile HTML-dokumenti.

b. Lõuend: määratleb veebilehel koha, kus on graafikat või kujundeid või graafikuid või mida saab määratleda. Siin on näide.

Kood:



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

Väljund:

c. Dialoog: see silt annab meile vaikimisi kasti, eriti kui me tahaksime, et kastis oleks andmeid.

Kood:

Proovige siin dialoogi Kuidas dialoogiboks ilmub?

Väljund:

d. Manustamine: seda silti saab kasutada mis tahes välise faili HTML-faili sisenemiseks. Meil võib olla ainult stardimärgend ja lõppsilt pole siin kohustuslik. Selle sildiga saab kasutada erinevaid atribuute; laius, kõrgus, src ja tüüp.

e. Joonis ja joonis: see võib juba oma nime lisada pilte ja anda sellele pildile pealdise.

f. Allikas: see märgend saab rakendada mitu heli- ja videofaili, määrates failide asukoha seda lähteteksti kasutades.

g. Aeg: see silt, nagu nimi juba teatab, on silt aja kuvamiseks. Ja pange tähele, et see silt pole Internet Exploreri versiooni 8 ja uuemate versioonide korral funktsionaalne.

h. Video: sildi nimega saame ilmselt teada, kus seda silti kasutatakse. Videofailide täpsustamiseks on meil see silt. Selles heli- või videosildis määratleme failide ja nende asukohtade täpsustamisel lähtekoodid.

HTML5-siltide sisestuselemendid

Siin on mõned sisestuselemendid, mida kasutame HTML5-siltides:

1. E-post: see on üks HTML5 sisestuselemente. See element võtab sisendina ainult e-posti aadressid.

2. Number: see sisend element aktsepteerib ainult numbrit.

3. Vahemik: Nagu nimest juba selgub, sisaldab see silt numbrite vahemikku.

4. URL: see sisestussilt võtab vastu URL-i sisestusvälja. Selle sisestusviisi korral saame sisestada ainult URL-i.

5. Kohatäide: see on üks sisestustüübi atribuutidest nagu tekst või tekstiala või mis tahes arv. See kohahoidja väärtus näitab sisendina esitatavat väärtust.

Kood:


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

Väljund:

6. Autofookus: see atribuut keskendub automaatselt kindlale väljale, kus see element on sisestussildis deklareeritud. Seda atribuuti toetavad ainult Chrome'i, Safari ja Mozilla uusimad versioonid. Süntaks on selline:


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

Väljund:

7.: See on üks peamisi silte, mis aitaks brauseril mõista selle HTML-i versiooni, milles programm kirjutatakse. Selle sildi deklaratsioon tuleb kirjutada HTML-i ette.

8.: see metamärk kirjeldab HTML-dokumendi kirjeldust. See sisaldab autori nime, kuupäeva ja muudatusi jne.

Selles HTML5-s on meil isegi võimalus saada seadme geograafiline asukoht. Selle asukoha märgistamise lihtsustamiseks võib olla abi erinevatest meetoditest. HTML5-s on saadaval ka erinevaid fonte ja värve. Allpool on mõned sildid, mis eemaldatakse selle HTML5 versiooni HTML-i kasutamisest.

Lühend, aplett, suur, dir, font, raamikomplekt, kese, tt (TeleType'i tekst), basefont, keskel, streik, raam, u (allajoonitud tekst), isindex, noframes jne. Mõned eemaldatud atribuudid on allpool:

Joondamine, bgcolor, lahtripadistamine, lahtrite eraldamine, ääris, link, kuju, täring, arhiiv, koodbaas, ulatus, alink, vlink, link, taust, ääris, selge, kerimine, suurus, laius jne

9. Seda silti kasutatakse sisu kuvamiseks, kus JavaScripti kasutamine on keelatud. Igasugust selle sildi sisse kirjutatud sisu saab sisu asemel kasutada kõikjal, kus javascripti kasutatakse. Harjutusena võite proovida täita erinevaid silte, mille näiteid pole toodud.

Järeldus

Jah, jah, seal on HTML5 põhisildid ja viited. HTML5 algversioon ilmus 28. oktoobril 2014. Oleme näinud erinevaid uusi silte, mis on kasutusele võetud ja läbinud HTML5-s mõne atribuudi. Lõpuks olime isegi kajastanud, et mitte ainult uute elementide kasutuselevõttu ei viidud, vaid ka mõned olemasolevad elemendid ja atribuudid olid selle HTML5 uue väljalaske tõttu piiratud.

Seal oli palju atribuute, mis olid toodud näidetega, ja mõned ainult atribuudi või elementide andmete ja eesmärgiga. Proovige harjutada kõiki neid erinevaid elemente ja atribuute ning jätkake õppimist.

Soovitatavad artiklid

See on HTML5-siltide juhend. Siin käsitleme üksikasjalikult 4 parimat HTML5-silti ja selle sisestuselemente koos näidete ja koodi rakendamisega. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -

  1. HTML-i sündmused
  2. HTML-i paigutus
  3. HTML-raamid
  4. HTML-tabeli sildid
  5. JavaScripti sündmused | Erinevate JavaScripti sündmuste rakendamine
  6. HTML-i erinevat tüüpi metamärgendid
  7. Kuidas HTML-is teksti vormindamine töötab?
  8. HTML5 mitmesugused semantilised elemendid

Kategooria:

Veebiarenduse tööriistad