HTML5-standardi valmistui ja julkaistiin vuonna 2014, ja sen pitäisi olla HTML: n, kun ensimmäinen versio avattiin kaikkia niitä vuosia sitten. HTML 2.0 oli ensimmäinen todellinen 'standardi', joka julkaistiin aina vuonna 1995. Kaksi vuotta myöhemmin HTML 3 julkaistiin. Kaksi vuotta myöhemmin, HTML 4.01 esiteltiin, ja se on siitä lähtien ollut Internetin työhevonen.
HTML5: n ensimmäinen ”työluonnos” esiteltiin jo vuonna 2008, ja selaimen tuki tuolloin oli yllättävän laaja. Tänään tiedämme HTML5: n, joka eroaa suuresti aikaisemman HTML: stä, ja keskustelemme tässä vain siitä, mitä viimeisin standardi muutti julkaisunsa myötä. HTML5: n julkaisemisesta lähtien se on hyväksytty laajasti, ja kaikki sen tärkeimmät selaimet tukevat sen kaikkia ominaisuuksia ja ominaisuuksia. Siellä on vielä muutama hikka, mutta HTML5 on yleistynyt hyvin nykyaikaisen verkkokokemuksen kanssa.
Verkkosuunnittelijana voi olla joko vanha ammattilainen, joka on hallinnut vanhempia standardeja, tai aloittelija, joka utelias kiinnostuneena seuraamaan uusien standardien kehitystä sivussa. Joko niin, sinun on lopulta aloitettava siirtyminen HTML5: ään.
HTML Vs HTML5 Infographic
Ensimmäinen askel HTML5: ään siirtymiseen tai oppimiseen on ymmärtää ero vanhemman ja uusimman standardin välillä. Tässä on joitain keskeisiä eroja HTML: n ja HTML5: n välillä:
-
HTML5 on elävä kieli
HTML5 on elävä kieli, keskeneräinen työ. On hämmästyttävää nähdä, mitä HTML5 voi tehdä, mutta on myös tärkeää tietää, että HTML5 ei ole täysin vakioitu versio, kuten HTML4, joka on yli kymmenen vuotta vanha ja asetettu standardi, jota ei voi muuttaa.
Jos olet HTML5: ssä, sinun on tehtävä joitain päivityksiä. Attribuutit ja elementit lisätään ja muutetaan säännöllisesti joka vuosi. Tämä riippuu myös siitä, kuinka paljon käytät rikkaita elementtejä, mutta se on ehdottomasti yksi riskeistä, kun käytät juoksevaa, muuttuvaa kieltä, kuten HTML5.
-
HTML5 on yksinkertaisempi
Vaikka HTML5: llä on riskejä, kuten jatkuvat päivitykset, muutosten ja päivitysten seuraaminen on yleensä helppoa yksinkertaisen syntaksin vuoksi HTML4: ään verrattuna. Esimerkiksi, sinulla on hyvin yksinkertainen ilmoitus sivun alussa asettaaksesi se HTML5-sivuksi:
Yksinkertainen Doctype-ilmoitus on yksi HTML-syntaksissa tehdyistä yksinkertaistuksista, joka on yhteensopiva kaikkien HTML4-versioiden kanssa ja aina takaisin XHTML1: ään. HTML5 ei kuitenkaan ole yhteensopiva SGML: n kanssa.
Suositellut kurssit
- Ilmainen Python-ohjelmointikoulutus
- Ilmaisen ohjelmistotestauksen sertifiointikurssi
- Ilmaiset Java-ohjelmointikurssit
- Suorita PERL-kurssi
-
Uusi elementti
HTML5 sisältää useita uusia elementtejä ja eliminoi useita (joita käsittelemme jonkin aikaa), mutta yksi sen tärkeimmistä lisäelementeistä on, joka on vaikuttanut huomattavasti Adobe Flashin käyttöön verkkosivustoissa. Vaikka Flash on edelleen useiden verkkosivustojen käytössä, HTML5 on otettu käyttöön monien keskuudessa, ja monet ihmiset ajattelevat, että se tekee Flashista vanhentuneen lopulta. Vain aika päättää siitä; siihen asti HTML5: n kaskadielementti on osoittautunut hyväksi vaihtoehdoksi Flashille.
Elementtiä voidaan käyttää piirtämään grafiikoita eri muodoilla ja väreillä komentosarjojen, yleensä JavaScriptin, avulla. Elementti on yksinkertaisesti kontti grafiikkaa varten; sinun on käytettävä skriptiä grafiikan määrittelemiseen. Oletuksena kangas on suorakaiteen muotoinen alue, jolla ei ole sisältöä tai reunoja. Markkinat ovat niin:
Kankaan koon määrittämiseksi on tärkeää määrittää id-attribuutti sekä leveys ja korkeus. Voit lisätä tyylimääritteen rajaamiseksi.
Voit käyttää myös JavaScriptiä, kuten seuraava esimerkki:
var c = document.getElementById (“myCanvas”);
var ctx = c.getContext (“2d”);
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
Uusi ja Elements
Toinen suuri lisä HTML5: n mukana ovat uudet ja elementit, jotka osoittavat uuden web-anatomian. Näillä uusilla tunnisteilla ei ole enää tarvetta tunnistaa kahta elementtiä tunnisteella.
Eritelmät määrittelevät otsikkoelementin edustavan ryhmää "navigointi" tai "johtava" apuvälineitä. Sellaisenaan elementtiä voidaan käyttää määrittelemään johdanto sivun osaan tai koko sivulle. Tässä on koodinpätkä, joka käyttää otsikkoelementtiä.
otsikko
Tekijä kirjoitettu Web 2.0: een
Tekstin runko
HTML5-eritelmissä viitataan jalkaelementtiin edustamaan 'alatunnistetta lähimmälle esi-isänsä leikkaussisällölle tai leikkausjuurielementille' ja sisältävät yleensä osiota koskevia tietoja, kuten tekijän nimi, tekijänoikeustiedot, linkit asiakirjoihin ja niin edelleen.
Loogisesti, alatunniste on sijoitettu verkkosivun alaosaan. Mutta se voidaan sijoittaa myös sivun osan loppuun. Tässä on esimerkki koodauksesta, joka käyttää alatunniste-elementtiä:
Sisällön otsikko
Tekijä kirjoitettu Web 2.0: een
Tekstin runko.
Tunnisteet: Komentorivi, Kompassi, CSS, Sass, Terminaali
10 tykkäystä
Täällä alatunniste sisältää postitagit ja viestin 'Facebook tykkää'.
-
The ja elementit
Nyt, jos käyisit läpi yllä olevat esimerkit, olisit huomannut vielä muutamia uusia elementtejä, kuten. Tämän elementin ja elementin avulla voit merkitä asettelun tietyt osiot ja ovat erittäin hyödyllisiä hakukoneiden optimoinnissa. Artikkeli-elementti on määritelty edustamaan verkkosivun itsenäistä komponenttia, jotta sitä voidaan käyttää itsenäisesti uudelleenkäytettävänä tai jaettavana. Tämä voi olla sanomalehti, foorumin viesti, lehtiartikkeli, blogin kirjoitus tai muu.
Artikkelikomponentilla on yleensä oma otsikko otsikkoelementissä ja ehkä jopa alatunniste, kuten yllä olevassa esimerkissä näit. Voit ajatella elementtiä vain blogimerkintänä tai itsenäisenä sisällönpaikkana; hankala osa on itsenäisyyden tunnistaminen. Yksinkertaisesti sanottuna riippumaton sisältöosa on sellainen, jolla on itsessään järkeä.
Hyvä tapa tietää, onko sisällön osa itsenäistä, on kysyä, onko sillä järkeä RSS-syötteessä. Blogiartikkeleilla ja staattisilla sivuilla on järkeä, ja joillakin sivustoilla on kommenttisyötteitä. Mutta artikkelin kappaleella ei olisi mitään järkeä erillään muusta sisällöstä. Tässä on koodinpätkä alatunnisteella ja julkaisutunnisteilla.
Sisällön otsikko
Julkaistu: 2016-02-24
Tekstin runko
Creative Commons Attribution-ShareAlike -lisenssi
W3C-eritelmien mukainen osaelementti, joka edustaa sovelluksen tai asiakirjan 'yleistä osaa'. Se voidaan sekoittaa tunnisteeseen, joten tyhjennä sekaannus nyt. Leikkaustunnistetta käytetään, kun sen sisältö on ryhmitelty erillään muusta sivusta yhdellä teemalla, ja kun sitä olisi pidettävä merkintänä sivun ääriviivat. Div-elementti on kuitenkin määritelty 'yleiseksi säilöksi', mikä tarkoittaa, että se ei ole erillinen pääsivulta, lukuun ottamatta omaa otsikkoa, kieltä ja luokan määritteitä.
-
Uudet ja elementit
HTML5: n uudet ja elementit ovat osa Interactive Elements -määrityksiä, mutta ovat kehittäjien vähiten puhuttuja elementtejä. Koska verkko on muuttunut oikeammin linkitetyiksi sivuiksi ja asiakirjoiksi, nämä elementit ovat tervetullut lisäys verkkojen suurempaan interaktiivisuuteen.
Elementtiä ei pidä sekoittaa elementtiin, joka on määritelty HTML-navigointitunnisteeksi, joka edustaa sivun navigointilohkoa. Se sisältää yleensä linkkejä, joiden avulla käyttäjät voivat siirtyä sivun osien läpi tai toiselle sivulle. Toisaalta valikkotunniste edustaa valikkokomentoja yksinkertaisuudeksi työpöytä- ja mobiilisovelluksissa. Tässä on esimerkki toiminnassa olevasta elementistä:
Hei maailma
Samalla elementti on toinen tapa järjestää kuvia ja tekstiä. Sitä käytetään yhdessä elementin kanssa kuvien, kaavioiden ja valokuvien merkitsemiseen. Alla on lyhyt koodinpätkä, joka sisältää molemmat elementit toiminnassa.
-
Uudet ja elementit
Nämä ovat kaksi suurta lisäystä HTML5-standardiin. Äänitunniste, kuten videotunniste, antaa kehittäjille mahdollisuuden upottaa musiikkia ja ääntä verkkosivuilleen. Toisin kuin edellisessä standardissa, et rajoitu midi-musiikin lisäämiseen, vaikka käytettyjen tiedostojen tyypille on edelleen joitain rajoituksia. Useimmat Webkit-selaimet tukevat tavallisia MP3-tiedostoja, mutta muut tukevat vain OGG-muotoa. Hyvä uutinen on, että tiedostomuuntajia on tonnia, ja voit toimittaa äänitiedostosta vain kaksi versiota. oikea versio noudetaan automaattisesti.
Voit käyttää äänitunnistetta kuten mitä tahansa muuta elementtiä. Tässä on esimerkki katkelma:
Äänitunnisteessa on myös joukko määritteitä lisäohjauksille, mukaan lukien tapahtumattribuutit, ja tapahtumiin kuuluvat ikkunatapahtumat, lomaketapahtumat, mediatapahtumat ja hiiretapahtumat. Videoelementillä on myös joukko sisältömääritteitä, mukaan lukien SRC, globaalit määritteet, silmukka, hallinta, esikuorma ja juliste. SRC-, loop-, automaattitoisto- ja ohjausmääritteet ovat melko itsestään selviäviä ja samoja kaikille mediaelementeille, kun taas globaalit attribuutit ovat yhteisiä kaikille elementeille. Ne sisältävät dir, piilotetut, pikavalikon ja paljon muuta.
Muutamia muita multimediaominaisuuksia ja elementtejä, jotka toimitetaan HTML5: n mukana, on esimerkiksi raitaelementti, joka tarjoaa tekstielementit videoelementille.
-
Uudet muodot
HTML5 tulee nyt muodon ja elementtien kanssa. Jos et aio käyttää useita taulukoita sivulla, voit myös poistaa määritteen ja katsoa tehdyt muutokset ennen jatkamista.
-
Ei enää ja elementtejä
Tämä tarkoittaa, että kaikki ominaisuudet, joiden avulla kehittäjät voivat luoda täydellisesti varustetun, sävytyn taulukon, kuten reunus, bgcolor, kohdistus, korkeus, säännöt ja muut. Kaikki nämä määritteet korvataan CSS: llä.
-
Ei enää, ja
Tämä on hieno niille kehittäjille, jotka ovat työskennelleet HTML: n alkuaikoina. Kehyssetti, kehys ja noframes-määritteet on poistettu kokonaan yhdessä muiden kanssa, kuten vilkku, basefont ja muut. Sinun on hallittava käyttämättä taulukoita asetteluun. Pöydät ovat edelleen osa HTML5: tä, mutta niitä ei ole enää tarkoitettu pikseleille. Eritelmissä sanotaan, että taulukoita ei pidä käyttää asettelun apuvälineinä ja sivun asettelun hallitsemiseksi.
johtopäätös
Kuten selvästi huomaat, HTML5: ään on tehty paljon muutoksia, ja sitä on käytettävä varoen ja varovaisesti. Sinun on myös päivitettävä tietosi kielestä, koska se muuttuu ajan myötä ja saa lisää päivityksiä. Sinun on lopetettava niiden elementtien käyttö, jotka HTML5 on poistanut itsestään, ja käytettävä uusia HTML5-elementtejä, jotka ehdottomasti pysyvät, kuten otsikko- tai alatunnisteita.
Mitä edellä olet nähnyt, on vain yksinkertaistettu versio siitä, kuinka monta muutosta HTML5 on tehnyt sen käynnistämisen yhteydessä. Mutta olkaamme rehellisiä täällä; HTML5: n käyttöönotossa ei ole mitään yksinkertaista tai hidasta, ja uusi standardi lisää paljon ominaisuuksia, jotka ovat ratkaisevan tärkeitä nykyaikaisen käyttökokemuksen kannalta. Sinun on pysyttävä uudella kielellä ja opittava myös CSS, jolla on aiempaa suurempi rooli.
Hyvä asia näissä muutoksissa on se, että vaikka ne ovat suuria, ne ovat parempaan suuntaan, ja kaikki täällä mukana olevat sidosryhmät ymmärtävät tämän. Selaimet ovat tehokkaampia, kun ne liikkuvat kohti pilviä, ja pystyvät käsittelemään enemmän itse. Ajaxin kaltaisissa asioissa, videoiden ja äänien upottamisessa ja niin edelleen, on paljon helpompaa koodata suoraviivaisella menetelmällä ja antaa selaimen ottaa käyttöön raskaat tehtävät. Esimerkiksi uusiin rakenneosiin, kuten kuva, alatunniste, yhteenveto ja osa, viitataan kaikki asiakirjan rakenteeseen ja renderointi jätetään selaimen tehtäväksi.
Aiheeseen liittyvät artikkelit:-
Tässä on artikkeleita, joiden avulla saat lisätietoja HTML vs. HTML5: stä, joten käy vain linkin läpi.
- HTML ja XML
- HTML5 vs. Flash 9 suosituinta eroa (infografikoilla)
- HTML vs. XHTML
- HTML5 vs. Flash
- Hämmästyttäviä eroja HTML5 vs. JavaScript
- 10 mahtavaa hyödyllistä vinkkiä Python-ohjelmointiin (temppuja)