Katsaus HTML5: n uusiin elementteihin
Vuodesta 1999, jolloin HTML 4.01: stä tuli standardi, verkko ja sen käyttö ovat muuttuneet huomattavasti. W3C on päättänyt muuttaa HTML: n perussyntaksin normaaleista yleistetyistä merkintäkieleistä (SGML) XML: ksi, ja myös täysin erilaisista merkintäkielistä, kuten Scalable Vector Graphics (SVG), XForms ja MathML. Tällä hetkellä jotkut HTML 4.01 -komponentit ovat vanhentuneita, niitä ei koskaan käytetä tai niitä ei käytetä odotetusti. Jokainen osa HTML5: n komponenteista siirretään tai muokataan uudelleen. HTML5 on sisällyttänyt uusia elementtejä esityksen havainnollistamiseksi, digitaalisen sisällön näyttämiseksi, parannetun sivun asettelun ja yleisen toiminnallisuuden sekä useita uusia käyttöliittymiä vastaamaan nykypäivän Internet-vaatimuksia.
HTML5: ssä on useita uusia elementtejä, jotka tarjoavat tiettyjä lisäominaisuuksia halutun ja vuorovaikutteisen sivuston kehittämiseksi. Voimme luoda koodisi nopeasti ja tehokkaasti tällaisten komponenttien avulla. Rakenteen puutteen vuoksi monia hyvin muotoiltuja HTML-dokumentteja on vaikeampi käsitellä kuin niiden on oltava. Arvioimalla otsikkoasteikot, meidän on selvitettävä, mihin segmenttivaikutukset ovat menossa. Div-elementti tunnistaa sivupalkit, alatunnisteet, otsikot, navigointivalikot ja tärkeimmät sisältöosat.
10 parasta uutta HTML5-elementtiä
HTML5 tarjoaa uusia elementtejä, joilla parannetaan asiakirjan asettelua.
1.
Elementti määrittää sivun osan, joka sisältää erillisen rakenteen asiakirjassa, osiossa tai verkkosivustossa ja jota suositellaan levitettäväksi tai käytettäväksi. Tämä voi olla ryhmäviestinä päiväkirja tai päivittäinen paperiraportti, lähetys online-uutiskirjeelle, asiakkaan lähettämä huomautus tai mikä tahansa muu aineeton esine.
Esimerkki:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
lähtö:
- Tallenna yllä oleva tiedosto tiedostoon, jonka tunniste on .html.
- Suorita html-tiedosto selaimessa ja saat tulosteen alla olevan kuvan mukaisesti.
2.
Elementti ilmaisee yksittäisen sisällön paljon luokituksina, karttoina, kuvina, koodiartikkeleina ja monina muina.
Esimerkki:
Figure Element
EDUCBA on johtava taitoihin perustuvan koulutuksen tarjoaja, joka vastaa 500 000 jäsenen tarpeisiin yli 40 maassa.
lähtö:
Yllä oleva koodi tuottaa tulosteen alla olevan kuvan mukaisesti,
3.
Elementtiä käytetään kuvan kuvauksen lisäämiseen.
Esimerkki:
Figure Caption Element
EDUCBA on johtava taitoihin perustuvan koulutuksen tarjoaja, joka vastaa 500 000 jäsenen tarpeisiin yli 40 maassa.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
lähtö:
Yllä oleva koodi näyttää tuloksen alla olevan kuvan mukaisesti,
4.
Elementtiä käytetään määrittämään asiakirjan tai sivun osan otsikko. Voit määrittää useamman kuin yhden otsikon yhdessä asiakirjassa.
Esimerkki:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Asiakirjan sisältö menee tänne …
lähtö:
Yllä oleva koodi näyttää tuloksen alla olevan kuvan mukaisesti,
5.
Elementtiä käytetään määrittelemään tiedot, kuten tekijän tiedot, tekijänoikeustiedot, yhteystiedot, linkit niihin liittyviin asiakirjoihin, sivustokartta ja monet muut.
Esimerkki:
Footer Element
Tekijänoikeudet © 2019 www.educba.com
Yhteyshenkilö:
lähtö:
Yllä oleva koodi näyttää tuloksen alla olevan kuvan mukaisesti,
6.
Elementtiä käytetään asiakirjan tärkeimpien eli tärkeiden tietojen näyttämiseen.
Esimerkki:
Main Element
Otsikkotiedot
Tärkeimmät tiedot
EDUCBA
EDUCBA on johtava taitoihin perustuvan koulutuksen tarjoaja …
Alatunnisteen tiedot
lähtö:
Yllä oleva koodi tuottaa tulosteen alla olevan kuvan mukaisesti,
7.
Elementtiä käytetään korostamaan tai merkitsemään teksti taustavärillä, joka houkuttelee käyttäjää tietyn asiakirjan tekstin kohdalla.
Esimerkki:
Mark Element
EDUCBA on johtava taitoihin perustuvan koulutuksen tarjoaja, joka vastaa 500 000 jäsenen tarpeisiin yli 40 maassa.
lähtö:
Yllä oleva koodi näyttää tuloksen alla olevan kuvan mukaisesti,
8.
Elementtiä käytetään sivun navigointilinkkien määrittämiseen. Nämä linkit tarjoavat yhteydet muille asiakirjan sivuille.
Esimerkki:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
lähtö:
Yllä oleva koodi tuottaa tulosteen alla olevan kuvan mukaisesti,
9.
Elementtiä käytetään asiakirjan erillisen osan tai tietyn alueen määrittelemiseen.
Esimerkki:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
Pääotsikon sisältö näytetään täällä …
Ensimmäinen osa
Ensimmäisen osan sisältö näytetään …
Toinen osa
Toisen osan sisältö tulee näkyviin …
lähtö:
Yllä oleva koodi näyttää tuloksen alla olevan kuvan mukaisesti,
10.
Tunniste on osa tunnistetta, joka tarjoaa tekstin, joka voidaan näyttää tai piilottaa, kun käyttäjä napsauttaa otsikkoa.
Esimerkki:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Se on johtava taitoihin perustuvan koulutuksen tarjoaja, joka vastaa 500 000 jäsenen tarpeisiin yli 40 maassa.
lähtö:
Kun suoritat yllä olevan koodin, tulos näyttää seuraavan kuvan,
Napsauta kuvan osoittamalla tavalla otsikkoa, niin se näyttää piilotetun tekstin alla olevan kuvan mukaisesti,
johtopäätös
Toistaiseksi olemme nähneet, kuinka uudet HTML5-elementit ovat hyödyllisiä eri tehtävissä verkkosivuston luomisessa. Nämä uudet elementit lukevat asiakirjan tarkemmin ja standardinmukaisemmin ja kehittävät monimutkaisempia ja tehokkaampia verkkosovelluksia. Uudet HTML5-elementit tarjoavat joitain lisäominaisuuksia vuorovaikutteisten verkkosivustojen luomiseksi.
Suositellut artikkelit
Tämä on opas Html5: n uusiin elementteihin. Tässä keskustellaan Html5: n kymmenestä uusimmasta elementistä asiakirjan asettelun parantamiseksi. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- Värien korjaus jälkitehosteissa
- Html: n kuusi suosituinta versiota
- Html5 vs. Html4
- XHTML vs. HTML5
- Mikä on Bridge?
- HTML5-tunnisteet | HTML5: n 4 suosituinta tunnistetta