Banyak teman yang mengirim pesan pribadi kepada saya dan bertanya kepada saya tentang fitur-fitur baru dan penggunaan html5. Izinkan saya memberi Anda pengenalan mendetail tentang fitur-fitur baru html5.
1) Header footer tag semantik baru, dll. 2) Formulir yang Disempurnakan 2.0 3) Audio dan video 4) Gambar kanvas 5) Gambar SVG 6) Geolokasi 7) Seret dan lepas API 8) Pekerja web untuk melakukan tugas yang memakan waktu 9 ) web Penyimpanan menyimpan data dalam jumlah besar di sisi browser 10) web Socket adalah koneksi persisten (protokol non-http)
(1) Saya tidak akan membicarakan tag semantik baru.
Misalnya <footer></footer>
(2) Formulir yang disempurnakan menjadi 2.0
satu,1) Perbandingan antara tipe input baru h4 dan h5!
Tipe input di H4: teks /password /radio /checkbox/ sybmit/ reset / file /hidden / image/
Jenis input di H5: email/url/nomor/tel/pencarian /range /warna/bulan/minggu /tanggal
2) Elemen bentuk baru
Elemen formulir di H4: input/textarea/pilih, opsi/label
Elemen formulir baru di H5: datalist/progress/meter/output
2. Elemen formulir baru di h5--daftar saran datalist<datalist id=lunchList> <option>Daging Babi Suwir dengan Saus Beijing</option> <option>Daging Babi di Guobao</option> <option>Daging Babi Suwir Rasa Ikan</option> <option>Daging Babi Suwir dengan Lada Hijau</ pilihan> <option >Di Sanxian</option></datalist>
Silakan masukkan makan siang yang Anda perlukan ：<input type=text name=lunch list=lunchList/>
Ada dua bentuk:
Ada gaya plug-in kemajuan di bootstrap
<form> Koneksi jaringan<progress></progress> <br/> <!-- Antara 0-1--> Kemajuan pengunduhan <progress id=p3 value=0></progress> <input type=number value =1 ></form><script type=text/javascript> /*Perbedaan antara settimeout dan setInterval adalah settimeout dieksekusi satu kali, dan setInterval dieksekusi setiap waktu*/ var t=setInterval(function(){ var v = p3.nilai; v += 0,1; p3.nilai = v; if(v>=1){ clearInterval(t); peringatan(pengunduhan selesai) 5. Elemen bentuk baru dalam h5 meter <body> Kandungan minyak: <meter id=m1 min=0 max=100 low=30 high=70 optimum=40 value=50></meter> Nilai PM: <meter id=m2 min=0 max=500 low= 100 tinggi=300 optimal=150 nilai=750></meter></body>
Meteran: Berat dan ukuran/skala/, digunakan untuk menandai kisaran: tidak dapat diterima (merah)/dapat diterima (kuning)/sangat baik (hijau)
<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>
3) Atribut baru elemen bentuk
1. Atribut elemen formulir di H4: <input>
id/kelas/judul/tipe/nilai/nama/gaya/hanya baca/dinonaktifkan/dicentang/
Atribut baru elemen formulir di H5
1) placeholder: karakter placeholder tidak dapat dikirimkan sebagai petunjuk
<input value=tom placeholder=请输入用户名/>
2) fokus otomatis: Secara otomatis mendapatkan fokus masukan (Anda dapat masuk tanpa mengklik. Hanya pengaturan masukan pertama yang valid)
<input autofocus>
3) multiple: beberapa nilai input diperbolehkan muncul di kotak input, dipisahkan dengan koma [email protected], [email protected]
<input type=email name=emails multiple>
4) form: digunakan untuk menempatkan field input di luar FORM
<form id=f5></from>
<input form=f5>
==Properti baru yang terkait dengan validasi input============ = =======
Misalnya, lihat atribut terkait validasi input/yz.html
5)wajib: wajib diisi, isi tidak boleh kosong
6) maxlength: Menentukan panjang maksimum string
7) minlength: Tentukan panjang minimum string
8) max : nilai maksimum dari angka yang ditentukan
9) min : nilai minimum dari angka yang ditentukan
10) pola: Tentukan ekspresi reguler yang inputnya harus cocok
Atribut validasi di atas akan mempengaruhi atribut validitas objek js yang sesuai dengan elemen form, dan atribut validitas adalah atribut verifikasi.
(3) video video dan audio
1. Dalam aspek apa flash digantikan oleh H5?gambar flash (AS/FLEX) =>Kanvas/SVG
animasi flash => pengatur waktu+Kanvas
Pemutaran video dan audio => VIDEO/AUDIO
penyimpanan klien flash => Penyimpanan Web
2.H5 fitur baru - pemutar video (ini adalah elemen blok sebaris. Anda dapat memberikan lebar dan tinggi)H5 menyediakan tab baru untuk memutar video:
<video src=></video> <video src=> <source src=res/birds.mp4></source> <source src=res/birds.ogg></source> <source src=res/birds. webm></sumber>
Browser Anda tidak mendukung pemutaran VIDEO!
</video> Ini sendiri adalah elemen blok sebaris 300*150 Catatan: Sumber multi-baris ditulis agar kompatibel dengan berbagai browser. Karena browser tidak mendukung format video secara seragam. Beberapa browser, seperti beberapa browser, mendukung format mp4. Kemudian akan memutar video pertama dalam format mp4 mendukungnya, maka akan Putar, jika tidak didukung, lanjutkan ke bawah. Tidak ada sumber di bawah, berarti browser Anda tidak mendukung pemutaran VIDEO! .
Anggota tag/objek VIDEO yang umum digunakan:
Properti anggota:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
putar otomatis: salah, apakah akan diputar secara otomatis, kontrol palsu default: salah, apakah akan menampilkan kontrol pemutaran, defaultnya adalah salah loop: salah, apakah akan memutar pemutaran, defaultnya adalah false muted: false, apakah akan membisukan pemutaran, defaultnya adalah false poster: '', memutar Poster yang ditampilkan sebelum frame pertama, yang dapat berupa gambar. Defaultnya kosong dan tidak ada pramuat: strategi pramuat video, nilai yang mungkin: otomatis: pramuat metadata video dan waktu buffering tertentu. Tidak boleh digunakan di ponsel (ukuran/durasi. Konten bingkai pertama, waktu buffering) (pra Pemuatan membuang lalu lintas) metadata: hanya memuat metadata video terlebih dahulu (ukuran/durasi, konten bingkai pertama,) tanpa durasi buffering, cocok untuk ponsel tidak ada: tidak memuat data apa pun sebelumnya
--------------------------------------------------- --------------- Penggunaan atribut id v2 misalnya:
v2.tingkat pemutaran=3;
CurrentTime: durasi pemutaran saat ini durasi: total durasi dijeda: benar, apakah video saat ini dalam keadaan dijeda, benar berarti dijeda, salah berarti memutar volume: 1 Nilai defaultnya adalah 1, tingkat pemutaran volume saat ini: 1, kecepatan pemutaran lebih besar dari 1 berarti pemutaran cepat, kurang dari 1 berarti pemutaran lambat
metode id v2:
play(): memutar video jeda(): menjeda acara anggota pemutaran: onplay: acara yang dipicu saat video mulai diputar onpause: acara yang dipicu saat video dijeda Latihan: Sesuaikan tombol putar/jeda tanpa menggunakan kontrol yang datang dengan video Gerakkan mouse keluar dari area video untuk menyembunyikan tombol; gerakkan mouse ke tombol tampilan. Misalnya: audio video, canvas/video.html Saat dijeda, iklan akan ditampilkan, dan saat mouse dijeda diputar, iklan akan disembunyikan.
3. Pemutar audio fitur baru H5
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. wav></sumber>
Metode atributnya sama dengan video, hanya saja tidak ada atribut poster*** untuk menentukan apakah kotak centang dipilih
cb.onchange=function(){ this.checked true berarti dipilih, false berarti tidak dipilih}(4), kanvas
Hanya ada satu objek kuas di setiap kanvas - disebut objek konteks gambar - gunakan objek ini untuk menggambar!
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
Gambar kanvas---kesulitan! ! !
1) Gambar SVG: teknologi gambar vektor, yang muncul pada tahun 2000 dan kemudian dimasukkan ke dalam standar H5. 2) Gambar kanvas: teknologi gambar bitmap, teknologi gambar yang diusulkan oleh H5. 3) Gambar WebGL: teknologi gambar 3D, yang belum belum dimasukkan ke dalam standar H5.
teknologi gambar kanvas kanvas: kanvas, H5 mengimplementasikan teknologi gambar 2D
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
Tag kanvas adalah blok sebaris berukuran 300*150 secara default di browser. Lebar dan tinggi kanvas hanya dapat ditetapkan menggunakan atribut HTML/JS, bukan gaya CSS! Hanya ada satu objek kuas di setiap kanvas - disebut objek konteks gambar - gunakan objek ini untuk menggambar! var ctx = canvas.getContext('2d') //Sekarang hanya 2d yang mendapatkan objek kanvas di kanvas
1) Gunakan kanvas untuk menggambar persegi panjang
Gambarlah sebuah persegi panjang
ctx.lineWidth = 1 Lebar guratan ctx.fillStyle='#000' Warna gaya isian ctx.strokeStyle='#000' Warna gaya guratan ctx.fillRect(x,y,w,h); //Isi persegi panjang x , y koordinat w, h lebar dan tinggi ctx.strokeRect(x,y,w,h); //Stroke persegi panjang ctx.clearRect(x,y,w,h) Hapus semua gambar dalam persegi panjang
2) Gunakan kanvas untuk menggambar teks
Titik jangkar suatu teks berada di awal garis dasar teksnya
ctx.textBaseline = 'alphabetic' //Nilai default dari garis dasar teks adalah baris ketiga ctx.font=12px sans-serif //Ukuran dan gaya font ctx.fillText(str,x,y) //Isi ctx.strokeText (str ,x,y) //Stroke sepotong teks ctx.measureText(str) //Atur teks pengukuran berdasarkan ukuran teks dan font saat ini, dan objek yang dikembalikan adalah {width: x}3) Gunakan kanvas untuk menggambar jalur
Jalur: Mirip dengan alat pena di PS, ini adalah bentuk sewenang-wenang yang terdiri dari beberapa titik koordinat. Jalurnya tidak terlihat dan dapat digunakan untuk goresan, pengisian, dan pemotongan.
ctx.beginPath() //Mulai jalur baru ctx.closePath() //Tutup jalur saat ini ctx.moveTo(x,y) //Pindah ke titik yang ditentukan ctx.lineTo(x,y) //Dari saat ini arahkan ke titik yang ditentukan Gambarlah garis lurus ctx.arc(cx,cy,r,start,end); //Gambarlah jalur lengkung//cx cy adalah koordinat pusat lingkaran xy r adalah jari-jarinya, titik awal adalah sudut awal, dan akhir adalah sudut akhir
Sudut : 360 = Radian : 2PI 180 = 1PI Misal
ctx.arc(100,200,30,0,2*Math.PI)ctx.stroke(); //Gelombang jalur saat ini ctx.fill(); //Isi jalur saat ini ctx.clip();//Gunakan jalur saat ini Pangkas //************Sudut sambungan**********ctx.lineJoin='miter' //Sudut lancip muncul pada sambungan garis ctx. barisBergabung='bulat' //Sudut membulat muncul pada sambungan garis ctx.lineJoin = 'bevel' //Sudut persegi muncul pada sambungan garis
4) Gunakan kanvas untuk menggambar
Canvas adalah teknologi sisi klien, dan gambarnya ada di server, jadi browser harus mengunduh gambar yang akan digambar terlebih dahulu dan menunggu gambar dimuat secara asinkron:
var img = Gambar baru();img.src='x.png';console.log(img.width); //0 Permintaan gambar yang tidak sinkron img.onload=function(){console.log(img.width, img .height); //Pemuatan gambar nilai selesai //Mulai menggambar gambar ke kanvas ctx.drawImage(img,x,y); //Gambar ukuran asli ctx.drawImage(img,x,y,w,h); //Setel lebar dan tinggi}Dengarkan peristiwa pergerakan mouse di atas kanvas
ctx.onmousemove = function(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}2. Gradien pada gambar kanvas
Gradien linier: linearGradient Gradien radial: radialGradient Anda dapat merujuk pada efek gradien di ps,
var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0' );ctx.strokeStyle=g;
Kesulitan: Ada banyak sumbu dan kata koordinat dalam sistem koordinat
3. Menggambar deformasi
ctx.rotate(radian) //Putar objek konteks gambar (yaitu kuas), titik sumbu adalah asal kanvas ctx.translate(x,y) //Terjemahkan asal seluruh kanvas ke titik yang ditentukan ctx. sava(); / /Simpan semua nilai status deformasi kuas saat ini (dari penyimpanan dalam game) ctx.restore(); //Kembalikan status deformasi kuas ke penyimpanan terbaru (baca penyimpanan dalam game) ctx.save(); //Simpan var status pertama yang asli deg = 10*Math.PI/180; //Sudut yang akan diputar diputar 10 derajat ctx.rotate(deg); //Diputar ctx.drawImage(img,0,0); jika kuasnya bengkok Semuanya bengkok ctx.restore(); // Keadaan asli disimpan saat melakukan penyimpanan
(5) Gambar SVG
Pertama-tama mari kita pahami apa itu bitmap dan vektor. Pahami secara singkat saja.
Bitmap: Terdiri dari piksel satu demi satu, setiap titik memiliki warnanya sendiri, dan warnanya halus. Grafik vektor: terdiri dari garis-garis satu demi satu. Setiap garis dapat menentukan warna, arah, dan dapat diskalakan tanpa batas, namun detail warnanya tidak cukup kaya.
1. Gambar SVG menggunakan tag untuk menggambar, dan Anda dapat langsung mengikat pendengar acara
<svg lebar=300 tinggi=200 xmlns=http://www.w3.org/2000/svg> <lebar lurus=100 tinggi=100></rect></svg>
2. Cara membuat tag svg menggunakan js!
//var r1 = document.createElement('rect'); Elemen svg ini tidak dapat dibuat karena memiliki batasan usia dan namespace (artinya, jika ini tidak berhasil, gunakan metode berikut untuk membuatnya!!! !) varr1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('width','50');r1.setAttribute('height',300);s1 .appendChild(r1);3. Buat elips dengan svg
<svg lebar=300 tinggi=200 id=c6> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa stroke=#a00></ellipse></svg>
4. Buat garis lurus di svg
<svg lebar=300 tinggi=200 id=c6> <baris x1=0 y1=0 x2=100 y2=200 guratan=#000 guratan-lebar=50 guratan-linecap=square></line></svg>
Catatan: stroke-linecap=square akan menghasilkan lebih banyak kotak, stroke-linecap=round akan menghasilkan lebih banyak area melingkar, stroke-linecap=butt tidak akan menghasilkan lebih banyak kotak (artinya, garis lurus yang Anda buat memiliki perbedaan antara awal dan akhir dari atribut ini! Cobalah sendiri dan Anda akan mengetahuinya! Detailnya penting!)
5. Buat polyline menggunakan svg
<svg width=300 height=200 id=c6> <polyline points=50,50 100,300 150,100></polyline> //Yang keluar adalah segitiga <polyline points=50,50 100,300 150,100 fill=transparent stroke=#000 >< /polyline> //Yang keluar adalah polyline</svg>
6. Geolokasi (Di masa depan, kami tidak membutuhkan klien, kami juga dapat menemukan lokasinya sendiri!)
Geolokasi: Geolokasi, menggunakan JS untuk mendapatkan data koordinat geografis (bujur, lintang, ketinggian, kecepatan) dari browser saat ini, digunakan untuk mengimplementasikan aplikasi LBS (Layanan Berbasis Lokasi), seperti Ele.me, Navigasi Amap...
Cara browser seluler memperoleh informasi lokasi:
1) Pilihan pertama adalah chip GPS di ponsel dan komunikasi satelit, akurasi posisi dalam meter 2) Pilihan kedua adalah stasiun pangkalan ponsel untuk akuisisi posisi, akurasi posisi dalam kilometer (ilegal) Cara mendapatkannya memposisikan informasi melalui browser PC: 1) Pembalikan melalui alamat IP Parsing dan akurasi posisi tergantung pada ukuran database alamat IP
HTML5 menyediakan objek baru untuk mendapatkan informasi posisi browser saat ini:
window.navigator.geolocation{ getCurrentPosition:fn, //Dapatkan informasi posisi terkini watchPosition:fn, //Pantau perubahan data posisi clearWatch:fn //Batalkan pemantauan}2. Ekstensi: Cara menyematkan Peta Baidu di halaman web
1) Daftarkan akun pengembang Baidu map.baidu.com ---> lbsyun.baidu.com 2) Buat situs web; masuk ke Baidu Map dan minta peta AccessKey untuk situs web 3) Sematkan peta yang disediakan oleh Baidu Map di API halaman web Anda sendiri, tertanam di peta Baidu
Saya tidak akan berbicara banyak tentang cara menyematkannya di sini! (Ingatlah bahwa Anda harus mendaftarkan akun untuk menggunakan Baidu Maps, lalu mengutip perpustakaan orang lain!)
7. Seret dan lepas API
Saya sebutkan drag and drop sebelumnya: teman-teman, silakan temukan sendiri blog sebelumnya.
delapan penyimpanan
Penyimpanan terutama terdiri dari cookie dan sesi (saya akan menjelaskan perbedaan dan tindakan pencegahan ketika mencari banyak metode penulisan sebelumnya): Ingatlah bahwa sesi hilang saat Anda menutup browser, dan cookie tidak hilang saat Anda menutup browser! Catatan: Waktu harus ditambahkan saat cookie disimpan. Jika tidak ada waktu yang ditambahkan, waktu akan hilang setelah browser ditutup! Penyimpanan browser ini dapat digunakan untuk menyelesaikan banyak masalah fungsional, seperti mengingat kata sandi dan fungsi lainnya! !
Sembilan Soket web
Haruskah kita membicarakan hal ini? . . . . Mari kita bahas secara singkat, semua tergantung pemahaman~~
Soket web adalah koneksi dua arah non-http yang dapat dibuat antara server dan klien!
Koneksi ini bersifat real-time dan permanen.
Server dapat secara aktif mengirim pesan.
Server tidak perlu lagi melakukan polling permintaan klien, dan komunikasi antara server dan klien tidak memerlukan pembuatan ulang koneksi.
Artinya, komunikasi bolak-balik yang berkelanjutan.
Bagaimana cara membuatnya? Satu bagian kode sudah selesai
var webSocket = new WebSocket (ws://localhost:8005/socket); //url harus dimulai dengan teks ws atau wss: karena ini bukan http, ini adalah websocket, ini adalah identifikasi Anda sendiri, transmisi terenkripsi, ingatlah saja . webSocket.send() //Kirim data teks, hanya teks yang dapat dikirim. (Gunakan objek json untuk mengubah objek js menjadi data teks sebelum mengirim) webSocket.close();//Tutup dan putuskan sambungan komunikasi. webSocket.onmessage= function(event){ var data=event.data;} // Menerima pesan dari server webSocket.onopen =function(event){ //Memproses saat memulai komunikasi} webSocket.onclose =function(event) { / /Memproses di akhir komunikasi} MeringkaskanDi atas adalah daftar lengkap fitur-fitur baru dan penggunaan HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!