Terus jelaskan keterampilan HTML5:
16. Dukungan video
Elemen audio <Audio> sangat mirip dan mendukung video HTML5 di browser baru. Bahkan, baru -baru ini YouTube mengumumkan video HTML5 baru. Sayangnya, karena dokumentasi HTML5 tidak menunjukkan enkoder spesifik untuk video, itu terutama tergantung pada browser. Meskipun Safari dan IE9 dapat mendukung video dalam format H.264, Firefox dan Opera masih berpegang pada format Theora dan Vorbis. Karena itu, saat menampilkan video HTML5, Anda harus memberikan dua format.
17. Video Preloaded
Pertama -tama Anda harus memutuskan apakah Anda memerlukan browser untuk memuat video. Apakah ada kebutuhan? Misalkan pengunjung memasuki halaman yang didedikasikan untuk menampilkan video, sangat penting untuk memuat halaman untuk menghemat waktu tunggu. Anda dapat memuat video dengan mengatur preload = preload, atau menambahkan preload di antara mereka.
<Video Preload>
...
</dide>
18. Kontrol tampilan
Anda mungkin telah memperhatikan bahwa dengan kode di atas, video hanya akan muncul sebagai gambar tanpa komponen yang dapat dikendalikan. Untuk mendapatkan kontrol pemutaran ini, kita harus menentukan properti kontrol ini dalam elemen video.
<Video Preload Controls>
...
</dide>
19. Ekspresi reguler
Berkat sifat pola baru, kami dapat memasukkan ekspresi reguler langsung ke dalam kode.
<Metode Form = Post Action =>
<label untuk = nama pengguna> Buat nama pengguna: </label>
<Input ID = UserName type = nama teks = placeholder nama pengguna = 4 <> 10 ″ diperlukan = autofocus yang diperlukan = autofocus pola = [a-za-z] {4,10}>
<type type = kirim> go </button>
</form>
Jika Anda lebih akrab dengan ekspresi reguler, Anda akan melihat pola baru ini: [a-za-z] {4,10} hanya menerima huruf besar dan kecil. String ini harus memiliki setidaknya empat karakter, hingga sepuluh karakter.
20. Mendeteksi dukungan browser untuk atribut
Seperti yang disebutkan sebelumnya, tidak semua browser mendukung properti ini, jadi adakah cara untuk mengetahui apakah browser dapat mengenalinya? Pertanyaan ini sangat bagus. Berikut adalah dua cara untuk memperkenalkan Anda kepada Anda. Pilihan pertama adalah menggunakan Modernizr untuk mendeteksi, atau Anda juga dapat membuat dan menganalisis elemen -elemen ini untuk melihat apa yang dimiliki browser. Misalnya, dalam contoh sebelumnya, jika kita ingin menentukan apakah browser dapat menjalankan properti pola, kita dapat menambahkan javascript ke halaman:
alert ('pola' di document.createelement ('input')) // boolean;
Bahkan, ini adalah cara yang sangat umum untuk menentukan kompatibilitas browser. Perpustakaan JQuery memanfaatkan trik ini. Dalam kode di atas, kami membuat elemen input baru dan mengonfirmasi apakah atribut pola dapat dikenali. Jika dapat dikenali, browser mendukung fungsi ini, jika tidak itu tidak akan didukung.
<script>
if (! 'Pattern' di document.createElement ('input')) {
// lakukan validasi sisi klien/server
}
</script>
Ingat, ini perlu dicapai dengan mengandalkan JavaScript!
21. Mark Elements
Fungsi utama dari elemen <cark> adalah untuk menyorot teks pada halaman yang perlu secara visual menyoroti pentingnya bagi pengguna. String yang dibungkus dalam tag ini harus terkait dengan perilaku pengguna saat ini. Misalnya, jika saya mencari pikiran Anda di beberapa blog, saya dapat menggunakan JavaScript di tag <cark> untuk membungkus setiap tindakan.
<h3> Hasil pencarian </h3>
<h6> Mereka terputus, tepat setelah Quato berkata, <mark> Buka pikiran Anda </sark>. </h6>
22. Kapan Menggunakan <V>
Apakah Anda masih perlu menggunakan tag <div>? Tentu saja itu perlu. Misalnya, jika Anda ingin membungkus sepotong kode dalam suatu elemen, terutama untuk penentuan posisi konten, <div> akan menjadi pilihan yang sangat ideal. Namun, jika itu bukan situasi di atas tetapi untuk membungkus posting blog atau daftar tautan footer, masing -masing disarankan untuk menggunakan elemen <Arttic> dan <av>.