Pagrindinis » Kodavimas » 10 naujų funkcijų HTML 5.1 ir kaip jas naudoti IRL

    10 naujų funkcijų HTML 5.1 ir kaip jas naudoti IRL

    HTML specifikacija gavo a didelis kapitalinis remontas prieš keletą savaičių, kai W3C paskelbė nauja HTML 5.1 rekomendacija 2016 m. lapkritį. Savo neseniai paskelbtame dienoraštyje „W3C“ pavadino naują didelį leidinį Auksinis standartas, kaip HTML 5.1 suteikia mums naujų būdų, kaip mes galime naudoti HTML, kad sukurtume lankstesnes žiniatinklio patirtį.

    Šiame straipsnyje mes peržiūrėsime savo naujas funkcijas, kurias galite naudoti nepaliesdami „JavaScript“, tačiau „JavaScript“ fono patobulinimai taip pat yra puikus, kaip matote oficialus keitimo žurnalas.

    Atminkite, kad šiuo metu ne visos naršyklės palaiko visas šias funkcijas, todėl nepamirškite patikrinkite naršyklės palaikymą prieš naudodami juos gamyboje. Jei Jus domina toliau tobulinti HTML standartą, taip pat galite patikrinti HTML 5.2 darbo projektą.

    1. Apibrėžkite kelis vaizdo resursus reaguojant į projektą

    HTML 5.1 galite naudoti žyma kartu su srcset atributas reaguoja į atvaizdą įmanoma. The žymė yra vaizdo talpykla tai leidžia kūrėjams deklaruoti skirtingus vaizdų išteklius siekiant prisitaikyti prie UAperžiūros srities dydis, ekrano pikselių tankis, ekrano tipas ir kiti parametrai, naudojami. \ t jautrus dizainas.

    The pati žymė nieko nerodo, ji veikia tik kaip kontekstą. Jums reikia paskelbti numatytasis vaizdo šaltinis kaip src atributas žyma, ir alternatyvių vaizdo išteklių eikite per srcset atributai ir elementus.

    Kodo pavyzdys:

    2. Rodyti arba slėpti papildomą informaciją

    Su

    ir žymas, galite pridėti išplėstinę informaciją į turinį. Papildoma informacija nėra rodomas pagal numatytuosius nustatymus, bet jei domina vartotojai, jie turite galimybę pažiūrėti. Jūsų kode turėtumėte įdėkite žyma viduje
    . Po to, kai žymą galite pridėkite papildomą informaciją norite paslėpti.

    Kodo pavyzdys:

     
     
    Klaidos pranešimas
     
     Negalėjome baigti šio vaizdo įrašo atsisiuntimo. 
     
    Failo pavadinimas:
    yourfile.mp4
     
    Failo dydis:
    100 MB
     
    Trukmė:
    00:05:27

    Taip šis kodo pavyzdys atrodo kaip „Firefox 50.0.2“:

    3. Pridėkite funkcionalumą naršyklės kontekstiniame meniu

    Su elementas ir jo type = "context" atributas, galite pridėti priskirtą funkcionalumą į kontekstinio meniu. Jums reikia priskirti kaip vaiko elementas

    žyma. The ID iš elementas turi būti turėti tokią pačią vertę kaip ir kontekst atributas elemento, į kurį norime įtraukti kontekstinį meniu (kuris yra

    The gali turi tris skirtingus tipus, "žymimasis langelis", „komanda“ (į kurį reikia įtraukti veiksmą su „JavaScript“), ir radijo. Į kontekstinį meniu galima įtraukti daugiau nei vieną meniu elementą, tačiau naršyklės palaikymas ši funkcija yra dar nėra labai gerai. „Chrome 54“ nepalaiko jo ir „Firefox 50“ leidžia tik vieną papildomą kontekstinį meniu. Žemiau galite pamatyti, kaip kodų pavyzdys veikia „Firefox 50“.

    4. Lizdų antraštės ir poraštės

    HTML 5.1 leidžia lizdų antraštės ir poraštės jei kiekvienas lygis yra suskirstymo turinyje. Žemiau pateikta pastaba yra W3C dokumentų kopija ir pataria kūrėjams apie teisingą antraštės ir poraštės formavimo būdą.

    Ši funkcija gali būti naudinga, jei norite pridėti parengtos antraštės, skirtos semantiniams skaidymo elementams, toks kaip

    ir
    . Toliau pateikiamas kodo pavyzdys sukuria šoninę juostą antraštės viduje