Laman » Pengekodan » 10 Ciri-ciri baru HTML 5.1 & Cara Penggunaan Mereka IRL

    10 Ciri-ciri baru HTML 5.1 & Cara Penggunaan Mereka IRL

    Spesifikasi HTML mendapat a baik pulih utama beberapa minggu yang lalu apabila W3C menerbitkannya cadangan HTML baru 5.1 pada November 2016. Dalam catatan blognya yang baru-baru ini, W3C menggelar siaran utama baru itu standard emas, sebagai HTML 5.1 memberikan kita cara baru bagaimana kita boleh menggunakan HTML untuk mencipta pengalaman web yang lebih fleksibel.

    Dalam artikel ini, kita akan melihat ciri baru yang anda boleh gunakan tanpa menyentuh JavaScript, namun penambahbaikan latar belakang JavaScript juga luar biasa, seperti yang anda boleh lihat di dalam log perubahan rasmi.

    Ambil perhatian bahawa pada masa ini tidak semua penyemak imbas menyokong semua ciri ini, jadi jangan lupa semak sokongan penyemak imbas sebelum anda menggunakannya dalam pengeluaran. Jika anda berminat dengan selanjutnya pembangunan standard HTML, anda boleh menyemak draf kerja HTML 5.2 juga.

    1. Tentukan pelbagai sumber imej untuk reka bentuk responsif

    Dalam HTML 5.1, anda boleh menggunakannya tag bersama dengan srcset atribut untuk membuat pemilihan imej responsif mungkin. The tag mewakili bekas imej yang membolehkan pemaju untuk mengisytiharkan sumber imej yang berbeza untuk menyesuaikan diri dengan UAsaiz viewport, ketumpatan piksel skrin, jenis skrin, dan parameter lain yang digunakan reka bentuk responsif.

    The tag sendiri tidak memaparkan apa-apa, ia hanya berfungsi sebagai konteks untuk pelbagai sumber imej. Anda perlu mengisytiharkan sumber imej lalai sebagai nilai src sifat dari tag, dan sumber imej alternatif masuk dalam srcset sifat - sifat dan unsur-unsur.

    Contoh kod:

    2. Tunjukkan atau sembunyikan maklumat tambahan

    Dengan

    dan tag, anda boleh tambah maklumat lanjutan kepada sekeping kandungan. Maklumat tambahan tidak ditunjukkan secara lalai, tetapi jika pengguna berminat, mereka mempunyai pilihan untuk melihat. Dalam kod anda, anda sepatutnya letakkan tag di dalamnya
    . Selepas tag anda boleh tambah maklumat tambahan anda mahu menyembunyikannya.

    Contoh kod:

     
     
    Mesej Ralat
     
     Kami tidak dapat menyelesaikan memuat turun video ini. 
     
    Nama fail:
    yourfile.mp4
     
    Saiz fail:
    100 MB
     
    Tempoh:
    00:05:27

    Inilah bagaimana contoh kod ini seperti di Firefox 50.0.2:

    3. Tambah fungsi ke menu konteks penyemak imbas

    Dengan unsur dan unsurnya type = "context" atribut, anda boleh tambah fungsi tersuai kepada menu konteks penyemak imbas. Anda perlu memberi sebagai elemen kanak-kanak

    tag. The ID daripada elemen perlu membawa nilai yang sama dengan contextmenu atribut elemen yang kita mahu tambah menu konteks (iaitu

    The tag boleh mempunyai tiga jenis yang berbeza, "kotak pilihan", "perintah" (yang mana anda perlu menambah tindakan dengan JavaScript), dan radio. Ada kemungkinan untuk menambah lebih daripada satu item menu ke menu konteks, namun sokongan penyemak imbas untuk ciri ini tidak begitu baik lagi. Chrome 54 tidak menyokongnya, dan Firefox 50 hanya membenarkan kehadiran satu menu konteks tambahan. Di bawah ini anda dapat melihat bagaimana contoh kod berfungsi dalam Firefox 50.

    4. Tajuk dan pelantar sarang

    HTML 5.1 membolehkan anda pengarang dan footer sarang jika setiap peringkat adalah terkandung dalam kandungan seksyen. Nota di bawah adalah tangkapan skrin dari dokumen W3C, dan menasihatkan pemaju tentang cara yang tepat untuk header dan footer bersarang.

    Ciri ini boleh berguna jika anda mahu menambah yang dikemukakan tajuk ke elemen seksyen semantik, seperti

    dan
    . Contoh kod di bawah mencipta sidebar di dalam tajuk, yang