Bab di atas berbicara tentang tujuh keterampilan pertama HTML5, dan sekarang mari kita pelajari keterampilan baru.
8. Placeholder
Sebelumnya, kami perlu menggunakan JavaScript untuk membuat placeholder untuk kotak teks. Anda awalnya dapat mengatur atribut nilai untuk melihat apakah itu sesuai, tetapi selama pengguna menghapus teks, konten input akan menjadi kosong lagi. Atribut placeholder secara efektif mengkompensasi ini.
<input name = email tipe = email [email protected] />
9. Penyimpanan Lokal
Berkat penyimpanan lokal HTML5, kami dapat membiarkan browser canggih mengingat apa yang kami masukkan, dan bahkan jika browser ditutup atau disegarkan nanti, itu tidak akan terpengaruh. Meskipun tidak semua browser mendukungnya, Internet Explorer 8 yang paling kritis, Safari 4, Firefox 3.5.
10. Header dan footer semantik
<Div id = header>
...
</div>
<Div id = footer>
...
</div>
Lewatlah sudah kode di atas. Divs tidak memiliki struktur semantik secara fundamental, bahkan jika ID diterapkan. Di HTML5, kita dapat menggunakan elemen <Header> dan <footer>, dan kode di atas dapat diganti dengan:
<Header>
...
</teader>
<footer>
...
</footer>
Berhati -hatilah untuk tidak membingungkan kedua elemen ini dengan kepala dan kaki situs web. Mereka hanya wadah yang mewakili mereka.
11. yaitu dan html5
Dibutuhkan banyak uang untuk memahami elemen HTML5 yang baru. Untuk memastikan bahwa elemen HTML5 baru dapat ditampilkan dengan benar sebagai elemen tingkat blok, perlu untuk menentukan gaya mereka dengan kode berikut:
header, footer, artikel, bagian, nav, menu, hgroup {
Tampilan: Blok;
}
Meski begitu, IE masih tidak tahu apa elemen -elemen ini, jadi itu mengabaikan format ini dan perlu menggunakan kode berikut untuk menyelesaikan masalah ini:
document.createelement (artikel);
document.createelement (footer);
document.createelement (header);
document.createelement (hgroup);
document.createelement (nav);
document.createElement (menu);
12. Judul Grup (HGroup)
Misalkan situs web memiliki tag nama dan subtitle yang harus ditandai dengan tag <h1> dan <h2> masing -masing. Tidak ada cara dalam HTML4 yang dapat menggambarkan hubungan antara keduanya dengan hubungan semantik yang baik. Selain itu, saat menggunakan H2 untuk menampilkan judul lain di halaman, ada lebih banyak masalah dalam hal hierarki. Menggunakan elemen judul grup grup, kita dapat mengumpulkan judul -judul ini tanpa mempengaruhi seluruh garis besar dokumen.
<Header>
<Hgroup>
<h1> Recall Fan Page </h1>
<H2> Hanya untuk orang yang menginginkan ingatan seumur hidup. </h2>
</hgroup>
</teader>
13. Atribut yang Diperlukan
Formulir ini memungkinkan properti baru yang diperlukan, menentukan apakah input spesifik diperlukan. Anda dapat mendeklarasikan atribut ini dalam dua cara berbeda berikut sesuai dengan preferensi Anda sendiri untuk menulis kode:
<Input Tipe = Nama Teks = SomeInput Diperlukan>
Atau, lebih ketat:
<Input Tipe = Nama Teks = SomeInput Diperlukan = Diperlukan>
Kedua baris kode di atas pekerjaan. Setelah menggunakan baris kode ini dan browser mendukung atribut yang diperlukan, formulir kosong tidak akan diserahkan. Berikut adalah contoh sederhana, dan kami juga menambahkan atribut placeholder:
<Metode Form = Post Action =>
<Label untuk = SomeInput> Nama Anda: </Label>
<Input Tipe = Text ID = SomeInput Name = SomeInput Placeholder = Douglas Quaid Diperlukan>
<type type = kirim> go </button>
</form>
Jika input kosong, formulir tidak akan dikirimkan, sorot kotak teks.
14. ATRIBUT AUTOFOKUS
Demikian pula, dengan HTML5, solusi JavaScript tidak lagi diperlukan untuk menyelesaikan masalah fokus otomatis. Jika input harus dipilih atau difokuskan, kita sekarang dapat menggunakan properti autofokus dari HTML.
<Input Tipe = Nama Teks = Someinput Placeholder = Douglas Quaid Diperlukan Autofocus>
15. Dukungan Audio
Kami tidak perlu lagi mengandalkan plugin pihak ketiga untuk menyediakan audio. HTML5 menyediakan elemen audio <Audio>. Saat ini, hanya browser terbaru yang mendukung audio HTML5. Pada titik ini, lebih baik memberikan beberapa kompatibilitas ke belakang.
<audio autoplay = autoplay controls = controls>
<Sumber src = file.ogg />
<Sumber src = file.mp3 ″ />
<a href = file.mp3 ″> Unduh file ini. </a>
</audio>
Berbicara tentang format audio, baik Mozilla maupun webkit tidak sepenuhnya mendukungnya. Firefox ingin melihat file .ogg, dan browser Webkit hanya mendukung ekstensi .mp3 yang paling umum. Ini berarti bahwa Anda harus membuat dua versi audio, setidaknya sejauh ini. Saat Safari memuat halaman, itu tidak mengenali file format .ogg dan akan dilewati dan dipindahkan ke versi MP3. Harap dicatat bahwa IE tidak mendukungnya, dan opera 10 atau lebih rendah hanya mendukung file .wav.