Komentar: HTML5 memiliki banyak fitur baru. Kode baru. Sangat bagus. Mari kita ringkasnya sekarang. Hanya untuk referensi
1. DOCTYPE BARUBahkan jika browser tidak memahami kalimat ini, itu akan membuat sesuai dengan mode standar.
2. Elemen Gambar
Gunakan <figure> dan <figcaption> untuk secara semantik mewakili gambar dengan judul
<figure>
<img src = path/to/image alt = tentang gambar/>
<figcaption>
<p> Ini adalah gambar sesuatu yang menarik. </p>
</baption>
</tigur>
3. Didefinisikan ulang <small>
<small> telah didefinisikan ulang dan sekarang digunakan untuk mewakili pengaturan huruf kecil, seperti pemberitahuan hak cipta di bagian bawah situs web
4. Hapus jenis atribut di tautan dan tag skrip
5. Tambahkan/tidak ada tanda kurung
HTML5 tidak mengharuskan atribut harus dikutip, dan ditutup atau tidak, tetapi disarankan untuk menambahkan kutipan dan tag tertutup.
6. Buat konten Anda dapat diedit, cukup tambahkan properti yang dapat diedit
7. Input email
Jika kami mengatur jenis input ke email, browser akan memverifikasi apakah inputnya adalah jenis email. Tentu saja, kami tidak dapat hanya mengandalkan verifikasi front-end, dan back-end juga harus memiliki verifikasi yang sesuai.
8. Placeholder
Arti dari atribut input ini adalah bahwa tidak perlu menggunakan javascript untuk menciptakan efek placeholder
9. Penyimpanan Lokal
Gunakan penyimpanan lokal untuk secara permanen menyimpan fragmen data besar pada klien (kecuali dihapus secara aktif). Saat ini, sebagian besar browser telah mendukung mereka. Anda dapat memeriksa apakah Window.LocalStorage ada sebelum menggunakannya.
10. Header dan footer semantik
11. Lainnya Fitur Formulir HTML5
12. yaitu dan html5
Secara default, elemen HTML5 baru diberikan secara inline, tetapi metode berikut dapat digunakan untuk membuat
Itu diterjemahkan dalam mode blok
header, footer, artikel, bagian, nav, menu, hgroup {
Tampilan: Blok;
}
Sayangnya IE mengabaikan gaya ini, dan dapat memperbaiki seperti ini:
document.createelement (artikel);
document.createelement (footer);
document.createelement (header);
document.createelement (hgroup);
document.createelement (nav);
document.createElement (menu);
13. Hgroup
Biasanya digunakan untuk menggabungkan satu set judul di header, seperti
<Header>
<Hgroup>
<h1> Recall Fan Page </h1>
<H2> Hanya untuk orang yang menginginkan ingatan seumur hidup. </h2>
</hgroup>
</teader>
14. Atribut yang Diperlukan
Properti yang diperlukan menentukan apakah input diperlukan, Anda dapat mendeklarasikannya seperti di bawah ini
<Input Tipe = Nama Teks = SomeInput Diperlukan>
atau
<Input Tipe = Nama Teks = SomeInput Diperlukan = Diperlukan>
15. Properti autofokus
Sama seperti maknanya, itu adalah fokus pada kotak input
<Input Tipe = Nama Teks = Someinput Placeholder = Douglas Quaid Diperlukan Autofocus>
16. Dukungan Audio
HTML5 Menyediakan tag <Audio>, Anda tidak perlu lagi membuat audio sesuai dengan plug-in pihak ketiga. Sebagian besar browser modern memberikan dukungan untuk audio HTML5, tetapi masih perlu memberikan beberapa pemrosesan kompatibilitas, seperti
<audio autoplay = autoplay controls = controls>
<Source src = file.ogg /> <! - ff–>
<Source src = file.mp3 ″ /> <! - WebKit–>
<a href = file.mp3 ″> Unduh file ini. </a>
</audio>
17. Dukungan video
Sama seperti audio, tag <Video> memberikan dukungan untuk video. Karena dokumen HTML5 tidak menentukan pengkodean khusus untuk video, browser memutuskan penyandian mana yang akan didukung, yang mengarah pada banyak ketidakkonsistenan. Safari dan IE mendukung format pengkodean H.264, Firefox dan Opera Dukungan Theora dan Vorbis Encoding format. Saat menggunakan video HTML5, Anda harus menyediakan:
<Kontrol Video Preload>
<Sumber SRC = COHAGENPHONECALL.OGV TYPE = VIDEO/OGG; codec = 'vorbis, theora' />
<Sumber SRC = COHAGENPHONECALL.MP4 ″ TYPE = VIDEO/MP4; 'codecs =' avc1.42e01e, mp4a.40.2 ' />
<p> Browser Anda sudah tua. <a href = cohagenphoneCall.mp4 ″> unduh video ini sebagai gantinya. </a> </p>
</dide>
18. Preload Video
Properti preload sesederhana berarti secara harfiah, dan Anda perlu memutuskan apakah Anda perlu memulai video saat halaman dimuat
<Video Preload>
19. Kontrol Video Tampilan
<Video Preload Controls>
20. Ekspresi reguler
Karena atribut pola, kami dapat secara langsung menggunakan ekspresi reguler dalam markup Anda
<Form Action = Method = Post>
<label untuk = nama pengguna> Buat nama pengguna: </label>
<input type = name teks = nama pengguna id = placeholder nama pengguna = 4 <> 10 ″ pola = [a-za-z] {4,10} autofocus diperlukan>
<type type = kirim> go </button>
</form>
21. Dukungan Atribut Deteksi
Selain Modernizr, kami juga dapat menggunakan JavaScript untuk hanya mendeteksi apakah beberapa properti didukung, seperti:
<script>
if (! 'Pattern' di document.createElement ('input')) {
// lakukan validasi sisi klien/server
}
</script>
22. Mark Elements
Pertimbangkan elemen <cark> sebagai penyorotan. Ketika saya memilih paragraf teks, efek markup JavaScript pada HTML harus sebagai berikut:
<h3> Hasil pencarian </h3>
<p> Mereka terputus, tepat setelah Quato berkata, <mark> Buka pikiran Anda </sark>. </p>
23. Kapan menggunakan <div>
HTML5 telah memperkenalkan begitu banyak elemen, jadi apakah kita masih perlu menggunakan Div? Anda dapat menggunakan Div ketika tidak ada elemen yang lebih baik.
24. Ingin menggunakan HTML5 sekarang?
Jangan menunggu 2022, sudah siap digunakan sekarang, lakukan saja.
25. Apa yang bukan html5
1) SVG
2) CSS3
3) Geolokasi
4) Penyimpanan Klien
5) Soket Web
26. Properti Data
<Div ID = MyDIV Data-Custom-Attr = My Value> bla bla </div>
Digunakan dalam CSS:
<tyle>
h1: hover: setelah {
konten: attr (data-hover-respons);
Warna: Hitam;
Posisi: Absolute;
Kiri: 0;
}
</tyle>
<h1 data-hover-response = saya bilang jangan sentuh saya!> tidak sentuh saya </h1>
27. Elemen Output
Elemen <sel output> digunakan untuk menampilkan hasil perhitungan, dan juga memiliki label seperti atribut.
28. Gunakan input rentang untuk membuat slider
Jenis kisaran yang dirujuk oleh HTML5 dapat membuat slider, yang menerima Min, Max, Step, dan Value Properties
Anda dapat menggunakan CSS ': Sebelum dan: Setelah menampilkan nilai min dan max
<input type = range name = range min = 0 ″ maks = 10 ″ langkah = 1 ″ nilai =>
input [type = range]: sebelum {content: attr (min); Padding-Right: 5px;
}
input [type = range]: setelah {content: attr (max); Padding-left: 5px;}