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.

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

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 -

  1. Värien korjaus jälkitehosteissa
  2. Html: n kuusi suosituinta versiota
  3. Html5 vs. Html4
  4. XHTML vs. HTML5
  5. Mikä on Bridge?
  6. HTML5-tunnisteet | HTML5: n 4 suosituinta tunnistetta

Luokka:

Web-kehitystyökalut