HTML 5.1 Fitur Baru dan Contoh Aplikasi Fitur dan Aplikasi Baru

Seperti yang kita semua tahu, HTML5 milik Wanwei Network Alliance (W3C). Pada bulan November 2016, W3C memperbarui Standar Latihan Jangka Panjang HTML 5, yang merupakan pembaruan kecil pertama dalam 2 tahun. Banyak fitur fungsional HTML 5.1 yang diusulkan awalnya telah dihapus karena cacat desain dan kurangnya dukungan dari produsen browser.

Meskipun ada beberapa elemen dan peningkatan fungsi, itu dibawa ke HTML 5.1, itu masih merupakan pembaruan kecil. Beberapa elemen baru ini termasuk label gabungan.

W3C dan awal pengembangan HTML 5.2 Draft diharapkan akan dirilis pada akhir 2017. Yang ingin kami sajikan di sini adalah karakteristik fungsional baru dan peningkatan fungsi yang diperkenalkan dalam versi 5.1. Anda tidak perlu memindahkan JavaScript untuk menggunakan fitur -fitur ini. Tidak semua browser mendukung fitur -fitur ini, jadi Anda harus memeriksanya untuk memeriksa dukungan browser sebelum menerapkannya ke lingkungan produksi.

Kebanyakan orang yang menggunakan target = '_ blank' tidak tahu fakta yang menarik-label yang baru dibuka dapat mengubah window.opener.lokasi ke beberapa halaman penangkapan ikan jaringan. Ini akan mewakili Anda di halaman terbuka untuk melakukan beberapa kode JavaScript berbahaya. Karena pengguna percaya bahwa halaman pembuka aman, mereka tidak akan ragu.

Untuk sepenuhnya menghilangkan masalah ini, HTML 5.1 telah menstandarkan penggunaan properti rel = noopner yang distandarisasi dengan isolasi konteks browser. REL = NOOPERER dapat digunakan dalam tag <a> dan <eaged>.

 <A href =# target = _blank roth = noopner> tautan ingin membuat masalah lagi </a>

Tag <figcaption> mewakili judul atau legenda yang terkait dengan elemen <figur>, yang biasanya digunakan sebagai wadah untuk elemen visual seperti gambar, grafik, ilustrasi. Dalam versi HTML awal, <figCaption> hanya dapat digunakan sebagai sub -label <figur> pertama atau terakhir. Html5.1 telah melonggarkan batas ini, dan sekarang Anda dapat menggunakan <figcaption> di mana saja dalam wadah <figure>.

 <Artlicle> <h1> Judul berita hari ini/figur> <p> Ini adalah kenaikan harga bensin dalam dua bulan dan yang ketiga dalam kasus diesel dalam satu dua minggu

Spellcheck adalah atribut enumerasi yang dapat mengambil nilai string kosong, benar dan salah. Jika negara ditentukan untuk menjadi benar, itu berarti bahwa elemen akan menerima inspeksi ejaan dan tata bahasa.

Element.forcespellCheck () akan memaksa agen pengguna untuk melaporkan kesalahan ejaan dan tata bahasa yang terdeteksi pada elemen teks, bahkan jika pengguna tidak pernah memfokuskan input pada elemen.

 <p spellcheck = true> <label> Nama: <input ejaan = false id = textbox> </label> </p>

Versi baru HTML memungkinkan Anda membuat elemen <pection> kosong. Ini bisa berupa sub -elemen dari elemen <Ontgroup>, <Datalist> atau <Colly>. Anda akan menemukan bahwa fitur ini dapat membantu saat merancang tabel ramah pengguna unilateral.

Properti Variabel Boolean SoftfullScreen yang dikembangkan untuk bingkai memungkinkan Anda untuk mengontrol apakah konten dapat ditampilkan melalui layar dengan menggunakan metode RequestfullScreen (). Misalnya, kami menggunakan iframes yang tertanam di YouTube sebagai contoh. Anda perlu mengatur properti SpolfullScreen untuk memungkinkan pemain menampilkan video -full -screen.

 <Artadicle> <Header> <p> <img src =/usericons/16235> <b> fred flintstone </b> </p> <p> <a href =/post/30934 r = bookmark> 12:44 < /a> - <a href =#A.503439551> posting pribadi </a> </p> </header> <p> <p> Lihat video baru saya! >

Html5.1 memungkinkan Anda untuk menyematkan header dan footer di header lain. Anda dapat menambahkan header atau footer ke elemen kepala, jika berisi diri mereka dalam konten paragraf. Jika Anda ingin menambahkan elaborasi terperinci seperti <section> dan <cart Article> ke elemen paragraf semantik, fitur ini akan menjadi sangat berguna.

Dalam kode berikut, label <Artikel> berisi tag <teader>, yang memiliki tag <sanden> dengan tag <weader>.

 <Artader> <Header> <h2> Pelajaran: Cara Memasak Ayam </h2> <sander> <Header> <h2> Tentang Penulis: Tom Haank </h2> <a href =./Tomhank/> Hubungi dia! </a/p> </header> <p> Ahli apa pun selain memasak. Ke dalam kantong zip-top dengan ayam dan tutupnya

Versi baru HTML memungkinkan Anda untuk menambahkan gambar nol lebar. Fitur ini dapat digunakan saat gambar tidak perlu ditampilkan kepada pengguna. Jika elemen IMG memiliki kegunaan lain, itu bukan hanya gambar, misalnya, sebagai bagian dari layanan untuk menghitung jumlah tampilan halaman, gunakan 0 nilai dalam properti lebar dan tinggi. Untuk gambar lebar 0, disarankan untuk menggunakan atribut kosong.

 <Img src = theimageFile.jpg width = 0 tinggi = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>
 Metode ReportValidity () baru memungkinkan Anda untuk memeriksa formulir dan mengatur ulang hasil, dan melaporkan kesalahan kepada pengguna di posisi yang sesuai dengan browser. Agen pengguna dapat melaporkan lebih dari satu aturan pembatasan, jika satu elemen mengalami beberapa masalah secara bersamaan. Untuk situasi ini, input kata sandi adalah konten yang harus diisi tetapi tidak diisi, dan itu akan diidentifikasi sebagai kesalahan.
 <h2> Formulir Validasi </h2> <p> Masukkan detail </p> <norm> <label> Jenis input wajib = nama kata sandi = Kata Sandi Diperlukan/> </Label> <Tombol Jenis = Kirimkan> Kirim </tombol > </form> <script> document.quryselector ('form')
 6. Konteks browser
 Dalam HTML 5.1, Anda dapat menggunakan tanda <u menu> untuk menentukan menu, yang berisi satu atau lebih elemen <Disuitem>, dan kemudian menggunakan properti ContextMenu untuk mengikatnya ke elemen apa pun. ID dari elemen <u menu> harus konsisten dengan nilai atribut ContextMenu dari elemen yang ingin kami tambahkan menu konteks ke dalamnya.
 Masing -masing <Muitem> dapat memiliki salah satu dari tiga bentuk berikut:
 Radio -Get opsi dari grup;
 Kotak centang -pilih atau batalkan opsi;
 Perintah -Ekapkan suatu tindakan saat mengklik.
 <H2 ContextMenu = Popup-menu> Klik kanan untuk mendapatkan demo menu konteks. Type = command label = Command onClick = alert ('Warning')> CHECKBOX 2 </SUITEM> <MENIUTEM TYPE = Radio Name = Group1> Tombol Radio A </Menuitem t ype = Radio Name = Group1 Diperiksa = True Tombol Radio B </sisuitem> <MenuUtem type = kotak centang dinonaktifkan> Nonaktifkan item menu </suuitem> </u menu>
 5. Gunakan nomor acak terenkripsi pada skrip dan gaya
 Nonce kriptografi adalah angka yang dihasilkan secara acak, yang hanya dapat digunakan sekali, dan untuk setiap permintaan halaman, itu harus dihasilkan. Atribut nonce ini dapat digunakan dalam elemen <script> dan <tyle>.
 Secara umum digunakan dalam strategi keamanan konten situs web untuk menentukan apakah gaya dan skrip tertentu harus diimplementasikan pada halaman. Dalam kode yang disediakan di bawah ini, nilai ini bersamaan, tetapi dalam skenario penggunaan aktual, nilai ini dihasilkan secara acak.
 <skrip nonce = 'd3ne7uwp43bhr0e'> Kode JavaScript </cript>
 4. Hubungan tautan urutan terbalik
 Atribut REV didefinisikan dalam HTML4, tetapi tidak muncul dalam HTML5. W3C diputuskan untuk mencetak kembali atribut REV di <a> dan <link> elemen. Hubungan antara dokumen tautan saat ini dan terbalik dari identifikasi atribut REV. Ini telah dimasukkan untuk mendukung format tanda struktur data yang banyak digunakan, RDFA.
 Mari kita gunakan dua dokumen untuk memberikan contoh.
 // Dokumen dengan URL bab1.html <tautan href = pelajaran2.html rel = rev berikutnya = prev> // documente dengan url bab2.html <tautan href = pelajaran1.html = prev rev = next> <tautan href = pelajaran3 Roth = rev berikutnya = prev>
 3. Tampilkan/Sembunyikan Informasi
 Elemen <linced> dan <ringkasan> baru memungkinkan Anda untuk menambahkan informasi ekstensi ke paragraf. Anda dapat menampilkan atau menyembunyikan blok informasi tambahan melalui elemen klik. Secara default, informasi tambahan disembunyikan.
 Dalam kode tersebut, Anda harus memasukkan tanda <summary> di tanda <Detail>, seperti yang ditunjukkan di bawah ini. Setelah label <summary>, Anda dapat menambahkan konten lain untuk disembunyikan.
 <section> <h3> Pesan Kesalahan </h3> <detail> <summary> File ini tidak benar -benar mengunduh kesalahan jaringan DU. <dt> Ukuran file: </dt> <dd> 8 kb </dd> <dt> kode kesalahan: </dt> <dd> 342a </dd> </ll> </sincing> </siction>
 2. Lebih banyak jenis item input
 Elemen item input HTML telah memperluas tiga jenis input-minggu, bulan, dan datetime-lokal.
 Seperti namanya, dua elemen pertama memungkinkan pengguna untuk memilih nilai seminggu dan nilai satu bulan. Bergantung pada dukungan browser, mereka akan ditampilkan ke dalam kalender gambar yang ditampilkan, memungkinkan Anda untuk memilih satu minggu atau bulan tertentu dalam setahun.
 DataTime-Local mewakili domain input tanggal dan waktu, tetapi tidak ada pengaturan zona waktu. Data -datanya dapat dipilih dalam metode yang sama dengan item input bulan atau minggu, dan waktu dapat dimasukkan sendiri.
 <section> <h2> Minggu, Bulan dan Datetime-Local </h2> <Form Action = action_page.php> Pilih seminggu: <Input Type = Week Name = Year_Week> <Input = Submit> </form> <for action = Action_page.php> ulang tahun (bulan dan tahun): <input type = name bulan = bdaymonth> <input type = submit> </form> <form Action = action_page.ph p> bergabung (tanggal dan waktu): <Jenis Input = Nama datetime-local = bdaytime> <input type = kirim nilai = kirim> </form> </section>
 1. Gambar respons
 W3C memperkenalkan beberapa karakteristik fungsional, dan gambar respons dapat dicapai tanpa menggunakan CSS. Mereka ...
 Atribut Gambar SRCSET
 Atribut SRCSET memungkinkan Anda untuk menentukan beberapa sumber gambar opsional, sesuai dengan resolusi piksel yang berbeda. Ini akan memungkinkan browser untuk menampilkan implementasi kualitas yang sesuai sesuai dengan perangkat pengguna yang berbeda. Misalnya, lebih baik menampilkan gambar resolusi rendah untuk pengguna dengan perangkat seluler yang lambat.
 Anda dapat menggunakan properti SRCSET dan membawa simbol modifikasi X sendiri untuk menggambarkan rasio piksel dari setiap gambar.
 <Img src = klik/rendah rest.jpg srcset = klik/low-res.jpg 1x, klik/medium-res.jpg 2x, klik/high-res.jpg 3x>
 Selain rasio piksel, Anda juga dapat memilih untuk menggunakan simbol modifikasi W untuk menentukan gambar dari berbagai ukuran. Dalam contoh berikut, gambar resi tinggi didefinisikan sebagai tampilan saat lebar 1600px.
 <Img src = klik/rendah rest.jpg srcset = klik/low-res.jpg 500W, klik/menengah-restit.jpg 1000W, klik/resi tinggi.jpg 1600W>
 Atribut Image Ukuran
 Sebagian besar waktu, pencipta suka menampilkan gambar yang berbeda untuk ukuran layar yang berbeda. Ini dapat dicapai dengan atribut ukuran. Ini memungkinkan Anda untuk menyesuaikan lebar untuk ukuran ruang yang didistribusikan ke tampilan gambar, dan kemudian menggunakan properti SRCSET untuk memilih gambar yang sesuai untuk ditampilkan. Misalnya…
 <Img src = klik/low-res.jpg ukuran = (maks-lebar: 25em) 60VW, 100VW srcset = klik/low-res.jpg 500w, klik/menengah-restit.jpg 1000W, klik/high- res.jpg 1600W>
 Di sini, atribut ukuran mendefinisikan 100%lebar gambar jendela ketika jendela lebih besar dari 25 EM, atau 60%dari lebar tampilan tampilan ketika kurang dari sama dengan 25em.
 elemen gambar
 Elemen gambar memungkinkan Anda untuk mendeklarasikan gambar untuk ukuran layar yang berbeda. Ini dapat diimplementasikan dengan enkapsulasi <MMG> dengan elemen <tibel> dan menggambarkan beberapa sub -elemen <source>.
 <ICTION> Marking saja tidak menunjukkan apa pun. Anda telah diasumsikan bahwa sumber gambar default akan dinyatakan sebagai nilai atribut SRC, dan sumber gambar opsional akan ditempatkan dalam atribut SCRSET.
 <Picture> <Source Media = (Max-Width: 25em) SRCSET = Klik/Kecil/Rendah RES.jpg 1x, klik/kecil/menengah-menengah > <Source Media = (Max-Width: 60em) SRCSET = Klik/Besar/RES RES.JPG 1X, Klik/Besar/menengah. = Klik/default/medium- res.jpg> </siction>
 Meringkaskan
 Di atas adalah semua isi artikel ini.