Mājas lapa » Kodēšana » 10 jaunās HTML 5.1 iezīmes un to izmantošana IRL

    10 jaunās HTML 5.1 iezīmes un to izmantošana IRL

    HTML specifikācija ieguva a lielā mērā pirms pāris nedēļām, kad W3C publicēja savu jaunais HTML 5.1 ieteikums 2016. gada novembrī. Nesenajā bloga ziņojumā W3C saņēma jauno lielo versiju zelta standarts, kā HTML 5.1 sniedz mums jaunus veidus, kā mēs varam izmantot HTML, lai radītu elastīgākas tīmekļa pieredzes.

    Šajā rakstā mēs apskatīsim tās jaunās funkcijas, kuras jūs varat izmantot nepieskaroties JavaScript, tomēr arī JavaScript fona uzlabojumi ir ievērojami, kā to var redzēt oficiālais maiņas žurnāls.

    Ņemiet vērā, ka pašlaik ne visas pārlūkprogrammas atbalsta visas šīs funkcijas, tāpēc neaizmirstiet pārbaudiet pārlūka atbalstu pirms tos izmantojat ražošanā. Ja jūs interesē HTML standarta turpmāka izstrāde, jūs varat apskatīt arī HTML 5.2 darba projektu.

    1. Definējiet vairākus attēlu resursus atsaucīgam dizainam

    HTML 5.1 var izmantot kopā ar srcset atribūts atsaucīga attēla izvēle iespējams. The atzīme ir attēla konteiners kas ļauj izstrādātājiem deklarēt dažādus attēla resursus lai pielāgotos UAskata loga izmērs, ekrāna pikseļu blīvums, ekrāna veids un citi parametri, kas izmantoti. \ t atsaucīgs dizains.

    The pati atzīme neko nerāda, tā darbojas tikai kā vairāku attēlu resursu kontekstā. Jums ir jādeklarē noklusējuma attēla resurss kā src atribūts un alternatīvus attēlu resursus iet iekšā srcset atribūti un elementiem.

    Kodu piemērs:

    2. Parādīt vai slēpt papildu informāciju

    Ar

    un tagus pievienot paplašinātu informāciju uz saturu. Papildu informācija netiek parādīts pēc noklusējuma, bet, ja lietotāji ir ieinteresēti, viņi ir iespēja apskatīt. Jūsu kodā ir paredzēts novietojiet iekšpusē
    . Pēc tam, kad jūs varat pievienojiet papildu informāciju jūs vēlaties paslēpt.

    Kodu piemērs:

     
     
    Kļūdas ziņojums
     
     Mēs nevarējām pabeigt šī videoklipa lejupielādi. 
     
    Faila nosaukums:
    yourfile.mp4
     
    Faila lielums:
    100 MB
     
    Ilgums:
    00:05:27

    Šādā veidā šis koda piemērs izskatās Firefox 50.0.2:

    3. Pievienojiet pārlūkprogrammas konteksta izvēlnei funkcionalitāti

    Ar elements un tā type = "konteksts" atribūtu pievienot pielāgotu funkcionalitāti uz pārlūkprogrammas konteksta izvēlne. Jums ir jāpiešķir kā bērna elements

    tag. The ID no elementam ir tāda pati vērtība kā konteksta izvēlne atribūts elementu, kuram mēs vēlamies pievienot konteksta izvēlni (kas ir

    The tag var ir trīs dažādi veidi, "izvēles rūtiņa", "komanda" (kurai jums ir nepieciešams pievienot darbību ar JavaScript), un radio. Konteksta izvēlnei ir iespējams pievienot vairāk nekā vienu izvēlnes vienumu, tomēr pārlūka atbalsts šai funkcijai ir vēl nav ļoti labs. Chrome 54 neatbalsta to, un Firefox 50 atļauj tikai vienu papildu konteksta izvēlni. Zemāk jūs varat redzēt, kā koda piemērs darbojas Firefox 50.

    4. Nestandarta galvenes un kājenes

    HTML 5.1 ļauj ligzdu galvenes un kājenes ja katrs līmenis ir ietverta sadaļas saturā. Zemāk esošā piezīme ir ekrānuzņēmums no W3C dokumentiem un sniedz padomus izstrādātājiem par pareizu augšdaļas un kājenes ligzdošanas veidu.

    Šī funkcija var būt noderīga, ja vēlaties pievienot izstrādāti virsraksti semantiskiem sekciju elementiem, piemēram,

    un
    . Tālāk redzamais koda piemērs rada sānu joslu galvenes iekšpusē