Domača » Kodiranje » 10 novih funkcij HTML 5.1 in kako jih uporabljati

    10 novih funkcij HTML 5.1 in kako jih uporabljati

    Specifikacija HTML je dobila a večji remont pred nekaj tedni, ko je W3C objavil svoje novo priporočilo za HTML 5.1 novembra 2016. V svojem nedavnem blogu je W3C imenoval novo glavno izdajo zlati standard, kot HTML 5.1 nam priskrbi nove načine, kako lahko uporabljamo HTML za ustvarjanje bolj prilagodljivih spletnih izkušenj.

    V tem članku si bomo ogledali nove funkcije, ki jih lahko uporabite brez dotikanja JavaScripta, Toda izboljšave ozadja JavaScript so prav tako izjemne, kot lahko vidite v uradni dnevnik sprememb.

    Upoštevajte, da trenutno vsi brskalniki ne podpirajo vseh teh funkcij, zato ne pozabite preverite podporo brskalnika preden jih uporabite v proizvodnji. Če vas zanima nadaljnji razvoj standarda HTML, lahko si ogledate tudi delovni osnutek HTML-ja 5.2.

    1. Določite več virov slike za odzivno oblikovanje

    V HTML 5.1 lahko uporabite z oznako srcset atribut odzivna izbira slik mogoče. The predstavlja oznako posoda za slike ki omogoča razvijalcem razglasi drugačne slikovne vire za prilagoditev na. \ t UAvelikost zaslona, ​​gostota zaslona, ​​vrsta zaslona in drugi parametri, uporabljeni v. \ t odzivno oblikovanje.

    The sama oznaka ne prikazuje ničesar, deluje samo kot kontekst za več virov slike. Morate prijaviti privzeti vir slike kot vrednost. \ t src atribut. \ t in oznako alternativnih virov slike pojdite v srcset atributi. \ t in elementov.

    Primer kode:

    2. Prikažite ali skrijte dodatne informacije

    Z

    in lahko dodajte razširjene informacije vsebino. Dodatne informacije privzeto ni prikazan, če pa so uporabniki zainteresirani, jih lahko pogledate. V vaši kodi bi morali postavite oznako znotraj
    . Po lahko dodajte dodatne informacije želite skriti.

    Primer kode:

     
     
    Obvestilo o napaki
     
     Tega videoposnetka ni bilo mogoče dokončati. 
     
    Ime datoteke:
    yourfile.mp4
     
    Velikost datoteke:
    100 MB
     
    Trajanje:
    00:05:27

    Tako izgleda primer kode v Firefox 50.0.2:

    3. Dodajte funkcionalnost v kontekstni meni brskalnika

    Z element in njegovo type = "context" atribut, lahko dodajte funkcijo po meri do v priročnem meniju brskalnika. Dodeliti morate kot podrejeni element

    oznaka. The id od element enako vrednost kot. \ t kontekstni meni atribut elementa, h kateremu želimo dodati kontekstni meni (ki je

    The tag lahko imajo tri različne vrste, »potrditveno polje«, "ukaz" (na katero morate dodati dejanje z JavaScriptom) in radio. V kontekstni meni lahko dodate več kot eno postavko menija, ne glede na to brskalnika za to funkcijo je še ne zelo dobro. Chrome 54 ga ne podpira, Firefox 50 pa omogoča samo en dodatni kontekstni meni. Spodaj lahko vidite, kako primer deluje v Firefox 50.

    4. Glave in noge gnezda

    HTML 5.1 vam omogoča glave in noge gnezda če je vsaka raven vsebovane v razdelku. Spodnja opomba je posnetek zaslona dokumentov W3C in svetuje razvijalcem o pravilnem načinu gnezdenja glave in noge..

    Ta funkcija je lahko uporabna, če želite dodati izdelane so glave do elementov semantičnega razdelitve, kot naprimer

    in
    . Spodnji primer ustvari stransko vrstico v glavi