Fitur baru dari HTML5 yang diperlukan untuk wawancara depan -end

Apa itu html5: html5 adalah generasi html berikutnya, yang akan menjadi standar baru untuk html, xhtml dan html dom. Hari ini, mari kita bicara tentang pertanyaan bahwa saya akan ditanyakan setiap kali wawancara depan adalah, yang merupakan fitur baru dari HTML5. Ini adalah pengetahuan dasar yang harus dikuasai di ujung depan pembelajaran.

HTML5 menambahkan beberapa elemen label semantik yang lebih baik.

1. Elemen artikel mewakili konten independen yang tidak terkait dengan konteks, seperti artikel di blog.
2. Selain elemen mewakili konten selain konten artikel, informasi yang dibantu.
3. Elemen header mewakili blok konten atau header seluruh halaman di halaman.
4. Elemen Hgroup digunakan untuk menggabungkan judul blok atau seluruh halaman di halaman.
5. Elemen footer menunjukkan blok konten atau halaman penuh di halaman.
6. Elemen figur mewakili pengelompokan konten media dan judulnya.
7. Elemen bagian mewakili blok konten di halaman, seperti bab.
8. Elemen NAV menunjukkan tautan navigasi di halaman.

1. Elemen video digunakan untuk mendefinisikan video.
2. Elemen audio digunakan untuk mendefinisikan audio.
3. Elemen kanvas digunakan untuk menampilkan grafik, yang dengan sendirinya tidak memiliki perilaku dan hanya satu bagian dari kanvas.
4. Elemen sematan digunakan untuk memasukkan berbagai multimedia.
5. Elemen Mark digunakan untuk menampilkan sorotan.
6. Elemen kemajuan digunakan untuk menunjukkan kemajuan jenis tugas apa pun.
7. Elemen meter menunjukkan langkah -langkah dan menentukan pengukuran dalam kisaran yang telah ditentukan sebelumnya.
8. Elemen waktu digunakan untuk menampilkan tanggal atau waktu.
9. Elemen perintah, menunjukkan tombol perintah.
10. Elemen detail digunakan untuk menunjukkan informasi detail yang dibutuhkan pengguna dan dapat diperoleh.
11. Elemen ringkasan digunakan untuk mendefinisikan judul yang terlihat untuk detail elemen.
12. Elemen datalis digunakan untuk menampilkan daftar data opsional.
13. Elemen Datagrid juga digunakan untuk menampilkan daftar data opsional, yang ditampilkan dalam bentuk daftar pohon.
14. Elemen KeyGen menunjukkan kunci untuk menghasilkan.
15. Elemen output menunjukkan berbagai jenis output.
16. Elemen Sumber mendefinisikan sumber daya media untuk elemen media.
17. Elemen menu menunjukkan daftar menu.
18. Elemen Ruby mewakili komentar Ruby, elemen RT mewakili interpretasi atau pengucapan karakter. Elemen RP digunakan dalam Ruby Notes untuk menentukan konten yang ditampilkan oleh browser yang tidak mendukung elemen ruby.
19. Elemen WBR menunjukkan switching lunak. Perbedaan dari elemen BR adalah bahwa elemen BR berarti bahwa elemen WBR berarti lebar jendela browser atau elemen tingkat induk. Jangan ubah garis, dan ketika lebar tidak cukup, ambil inisiatif untuk mengubah bank.
20. Elemen BDI menentukan arah teks dari teks, sehingga berangkat dari arah teks di sekitarnya.
21. Elemen dialog menunjukkan kotak dialog atau jendela.

Beberapa elemen ekspresi murni dihapuskan dalam HTML5.

Elemen ekspresi murni adalah elemen -elemen yang dapat digantikan oleh CSS. Basefont, besar, tengah, font, s, strike, tt, u, fungsinya murni ditampilkan untuk tampilan halaman.

Untuk elemen frameset, elemen bingkai, dan elemen noframes, karena kerangka bingkai memiliki efek negatif pada ketersediaan web, kerangka bingkai tidak lagi didukung dalam HTML5, dan hanya mendukung kerangka kerja iframe.

Untuk applet, bgsound, blink, tenda dan elemen lainnya, karena hanya beberapa dukungan browser, terutama elemen BGSound dan elemen tenda hanya didukung oleh IE, mereka dihapuskan dalam HTML5. Elemen applet dapat diganti dengan elemen embed atau elemen objek, elemen BGSound dapat diganti dengan elemen audio, dan tenda dapat diganti dengan pemrograman JavaScript.

Elemen kanvas yang disebutkan di atas dapat menyediakan kanvas untuk halaman untuk menampilkan grafik. Dikombinasikan dengan Canvas API, Anda dapat secara dinamis menghasilkan dan menampilkan berbagai grafik, grafik, gambar, dan animasi di kanvas ini. Kanvas pada dasarnya grafik. Tidak perlu menggunakan setiap bagan sebagai penyimpanan objek, dan kinerja kinerja sangat bagus.

Gunakan Canvas API untuk menggambar konteks elemen kanvas terlebih dahulu, dan kemudian gunakan berbagai fungsi gambar yang dienkapsulasi dalam konteks untuk menggambar.

 <Canvas = Canvas> Konten Alternatif </ Canvas> <script> var canvas = document.getElementById ('Canvas'); / Praktek menunjukkan bahwa fillstyle default adalah konteks hitam. Hebat (0, 0, 100, 100);

SVG adalah fungsi grafis lain dari HTML5. HTML5 memperkenalkan SVG Union Dalam sehingga elemen SVG dapat muncul langsung di tanda HTML.

 <svg tinggi = 100 lebar = 100> <lingkaran cx = 50 cy = 50 r = 50 /svg>

Munculnya elemen audio dan video telah membuat aplikasi media HTML5 lebih banyak pilihan baru. Untuk dua elemen ini, spesifikasi HTML5 memberikan API yang umum, lengkap, dan terkontrol skrip.

Sebelum spesifikasi HTML5 keluar, cara khas untuk memutar video di halaman adalah dengan menggunakan flash, quicktime atau windows media plug -in untuk menanamkan audio dan video dalam html. tag.

1. Sebagai fungsi dukungan asli browser, elemen audio dan video baru tidak perlu diinstal.
2. Elemen media menginginkan halaman web untuk menyediakan API yang universal, terintegrasi, dan dikontrol skrip.

 <Video SRC = Video.Webm ControlS> <Object Data = VideopLayer.swf type = Application /x-shockwave-flash> <param name = nilai film = video.swf /> < /object> browser Anda tidak mendukung video html5. </dide>

Apakah deteksi browser mendukung elemen audio atau elemen video adalah cara paling sederhana untuk membuatnya secara dinamis dengan skrip, dan kemudian mendeteksi apakah ada fungsi tertentu.

 var hasvideo = !!

API Geolokasi HTML5 (API Penentuan Posisi Geografis) dapat meminta pengguna untuk berbagi posisi mereka. Metode penggunaannya sangat sederhana. . Informasi lokasi terdiri dari garis lintang, koordinat bujur dan beberapa metadata lainnya.

API Geolokasi tidak menentukan teknologi yang mendasari mana untuk menggunakan pengguna untuk menemukan aplikasi aplikasi. Sebaliknya, hanya digunakan untuk mengambil API informasi lokasi, dan data yang diambil melalui API hanya memiliki tingkat akurasi tertentu, dan tidak dapat menjamin bahwa lokasi pengembalian perangkat akurat. Perangkat dapat menggunakan sumber data berikut:

1. Alamat IP

   Koordinat tiga dimensi

   GPS

   Alamat Mac dari RFID, WiFi dan Bluetooth ke WiFi

2. ID telepon GSM atau CDMA
3. Data Kustomisasi Pengguna

 // perbarui navigator.geolocation.getCurrentPosition (UpdateLocation, Handlelocationeror); // akurasi var timestamp = position.coords.timestamp; // Timmers} // Fungsi pemrosesan kesalahan Handlelocationer (error) {....} navigator.geoloc ation.watchPosition (UpdateLocation, Handlelocationeror); pembaruan lokasi navigator.geolocation.clearwatch (watchID);

Untuk pertimbangan keamanan, komunikasi antara bingkai, tab, dan jendela di browser yang sama selalu sangat terbatas. Namun, pada kenyataannya, ada beberapa permintaan yang masuk akal untuk konten situs yang berbeda untuk berinteraksi di browser. Dalam hal ini, jika browser dapat memberikan mekanisme komunikasi langsung, aplikasi ini dapat diatur dengan lebih baik.

Fitur baru diperkenalkan di HTML5, komunikasi pesan cross -document, yang dapat memastikan bahwa iframe, halaman tab, dan jendela dilakukan dengan aman. API Postmessage adalah metode standar pengiriman pesan.

 Window.postmessage ('halo, dunia', 'http://www.example.com/');

Saat menerima pesan, Anda hanya perlu menambahkan fungsi pemrosesan acara ke halaman. Ketika sebuah pesan tiba, sumber pesan bertekad untuk memutuskan apakah akan berurusan dengan pesan tersebut.

 Window.addeventlistener (pesan, pesan, true); t mengenali // pesan diabaikan}}

Acara pesan adalah acara DOM dengan data (data) dan atribut asal. Atribut data adalah pesan aktual yang disahkan oleh pengirim, dan atribut asal adalah sumber pengiriman.

XMLHTTPREQUEST API memungkinkan teknologi AJAX. Sebagai versi yang ditingkatkan dari XmlHttPRequest, XMLHTTPREQUEST Level2 telah sangat meningkatkan fungsinya. Ada dua aspek utama:

1. Cross -source xmlHttpRequest
2. Kemajuan

Di masa lalu, XmlHttpRequest terbatas pada komunikasi homolog, dan XMLHTTPREQUEST Level2 menyadari transnasional XmlHttprequest melalui CORS. Permintaan HTTP Cross -Source berisi kepala asal, yang memberikan server informasi sumber permintaan HTTP.

WebSockets adalah fungsi komunikasi paling kuat di HTML5.

Untuk membuat komunikasi WebSockets, klien dan server meningkatkan protokol HTTP ke protokol Websocket saat berjabat tangan. Setelah koneksi berhasil ditetapkan, kita dapat menyampaikan pesan WebSocket bolak -balik antara klien dan server di bawah mode kerja ganda lengkap.

Selain definisi protokol WebSockets, spesifikasi juga mendefinisikan antarmuka WebSocket untuk aplikasi JavaScript. Penggunaan antarmuka Websockets sangat sederhana. Untuk menghubungkan host jarak jauh, Anda hanya perlu membuat instance Websocket baru untuk menyediakan sepasang URL yang berharap untuk terhubung.

1. Elemen tel, menunjukkan nomor telepon.
2. Elemen email menunjukkan kotak teks alamat email.
3. Elemen URL menunjukkan URL halaman web.
4. Elemen pencarian, untuk mesin pencari, seperti kotak pencarian yang ditampilkan di bagian atas situs.
5. Elemen rentang, pemilih numerik dalam rentang tertentu, tampilan khas adalah bilah geser.
6. Elemen angka hanya berisi bidang nilai.

1. Elemen warna, pemilih warna, berdasarkan palet warna atau papan mewarnai untuk seleksi.
2. Elemen Datetime menunjukkan tanggal dan waktu lengkap, termasuk zona waktu.
3. Datetime-lokal, tanggal dan waktu tampilan.
4. Elemen waktu, pemilih waktu dan indikator zona waktu.
5. Elemen tanggal, pemilih tanggal.
6. Elemen minggu, pemilihan mingguan di tahun tertentu.
7. Elemen bulan, pemilih bulanan di tahun tertentu.

Ketika pengguna tidak memiliki nilai input, kontrol input dapat menampilkan deskripsi deskriptif atau informasi yang tepat kepada pengguna melalui fitur placeholder.

 <input name = name placeholder = nama depan dan belakang>

Browser dapat mengetahui apakah nilai input harus dipertahankan melalui AutoComplete.

Melalui karakteristik fokus otomatis, Anda dapat menentukan elemen tabel untuk mendapatkan fokus input. Hanya satu fitur fokus otomatis yang diizinkan pada setiap halaman.

Kontrol Input dengan Konten Teks dan Properti Kontrol Spasial TexTarea. Setelah pengaturan, Anda akan bertanya kepada browser apakah Anda harus memberikan umpan balik dari hasil inspeksi ejaan. Atribut Spellcheck perlu ditetapkan.

Dengan dikombinasikan dengan karakteristik daftar dan elemen data, pengembang dapat membuat daftar pemilihan nilai untuk kontrol input -tipe.

 <datalist id = contactList> <option [email protected]> </pection> <option [email protected]> </pection> </datalist> <input type = email id = kontak = daftar kontak>

Dengan mengatur fitur Min dan Max, rentang input nilai kotak input rentang dapat dibatasi antara minimum dan nilai tertinggi. Anda hanya dapat mengatur satu atau dua atau dua, atau Anda tidak dapat mengaturnya.

Untuk kontrol input -ype, pengaturan karakteristik langkahnya dapat menentukan granularitas nilai input yang meningkat atau penurunan.

Setelah fitur yang diperlukan diatur untuk kontrol tipe input, maka item ini harus diisi, jika tidak formulir tidak dapat diserahkan.

Jika elemen yang dapat diseret dari elemen web benar, elemen ini dapat diseret.

 <Div draggable = true> divable div </div>

Proses seret akan memicu banyak acara, terutama di berikut ini:

1. DragStart: Elemen halaman web dipicu saat menyeret.
2. Seret: Elemen yang diseret terus dipicu selama seret.
3. Dragenter: Ketika elemen yang diseret dipicu saat memasuki elemen target, acara harus didengarkan elemen target.
4. Dragleave: Ketika elemen yang diseret dipicu, peristiwa harus didengarkan elemen objek.
5. Dragover: Pemicu terus menerus ketika elemen seret tetap di elemen target, dan acara harus didengarkan elemen target.
6. DRAP: Seret elemen atau file yang dipilih dari sistem file, memicu saat menyeret dan jatuh.
7. Dragend: Elemen halaman web dipicu di akhir.

 DraggableElement.addeventListener ('dragStart', function (e) {console.log ('seret start!');});

Selama seret, parameter acara yang diterima oleh fungsi callback memiliki atribut DataTransfer, menunjuk ke objek, termasuk berbagai informasi yang terkait dengan menyeret.

 DraggableElement.addeventListener ('dragStart', function (event) {event.datatransfer.setData ('text', 'hello world!');});

1. Dropeffect: Seret dan lepas Jenis Operasi Menentukan bagaimana browser menampilkan bentuk mouse.
2. Efek dari: Menentukan operasi yang diijinkan, nilai -nilai yang mungkin adalah salin, bergerak, tautan, copylink, copymove, linkmove, semua, tidak ada, dan tidak diinisialisasi (nilai default setara dengan semua, yaitu, memungkinkan semua operasi).
3. File: Berisi objek daftar file, menunjukkan file yang terlibat dalam drag and drop, yang terutama digunakan untuk memproses file yang diseret ke browser dari sistem file.
4. Jenis: Jenis data yang disimpan dalam objek DataTransfer.

1. SetData (format, data): Menyimpan data pada objek DataTransfer. Format parameter pertama digunakan untuk menentukan tipe data penyimpanan, seperti teks, url, teks/html, dll.
2. GetData (format): Ambil data dari objek DataTransfer.
3. ClearData (format): Kosongkan data yang disimpan oleh objek DataTransfer. Jika parameter format ditentukan, hanya data format yang dihapus, jika tidak semua data dihapus.
4. SetDragimage (Imagelement, X, Y): Tentukan gambar yang ditampilkan selama proses seret. Secara default, banyak browser menunjukkan versi semi -transparan dari elemen seret. Imgelement parameter harus merupakan elemen gambar, bukan jalur gambar, dan parameter x dan y menunjukkan posisi gambar untuk mouse.

JavaScript adalah satu utas. Oleh karena itu, perhitungan durasi panjang, kembali untuk memblokir utas UI, yang menyebabkan teks mengisi teks di kotak teks, klik tombol, dll., Dan di sebagian besar browser, kecuali kontrol dikembalikan, tidak dapat terbuka halaman tab baru Solusi dari masalah ini adalah Pekerja Web, yang memungkinkan aplikasi web memiliki kemampuan pemrosesan latar belakang, dan dukungannya untuk multi -utara sangat baik.

Namun, skrip yang dijalankan dalam pekerja web tidak dapat mengakses objek jendela pada halaman, yaitu, pekerja web tidak dapat secara langsung mengakses halaman web dan API DOM. Meskipun pekerja web tidak menyebabkan browser UI berhenti merespons, itu masih akan mengkonsumsi siklus CPU, menghasilkan kecepatan respons yang lebih lambat.

Penyimpanan Web adalah fitur yang sangat penting yang diperkenalkan oleh HTML5.

SessionStorage menyimpan data dalam sesi, dan browser mematikan data untuk menghilang.

LocalStorage selalu menyimpan data pada klien, kecuali dihapus secara manual, itu akan disimpan.

Apakah itu sessionstorage, atau localstorage, API yang dapat digunakan adalah sama.

1. Simpan data: localstorage.setItem (kunci, nilai);
2. Data Baca: LocalStorage.GetItem (key);
3. Hapus satu data: localstorage.removeItem (key);
4. Hapus semua data: localstorage.clear ();
5. Kunci untuk mendapatkan indeks tertentu: localstorage.key (index);

Di atas adalah semua konten dari artikel ini.