Apakah ciri baharu kemahiran tutorial HTML5

1. Beberapa ciri baharu yang menarik dalam HTML5:

Elemen kanvas untuk lukisan
Elemen video dan audio untuk main balik media
Sokongan yang lebih baik untuk storan luar talian setempat
Elemen kandungan khas baharu seperti artikel, pengaki, pengepala, nav , bahagian
Kawalan borang baharu , seperti kalendar, tarikh, masa, e-mel, url, carian
2 video HTML5
Format video

Fail Ogg = Ogg dengan pengekodan video Theora dan pengekodan audio Vorbis
MPEG4 = Fail MPEG 4 dengan pengekodan video H.264 dan pengekodan audio AAC
WebM = dengan pengekodan video VP8 dan Fail WebM yang Dikodkan audio Vorbis
2. Atribut

* Teg menentukan sumber multimedia, yang boleh berbilang

3. Contoh
(1)

Salin kodKod tersebut adalah seperti berikut:

Video</title> ; </head> <body> <video src=". Alat pengekodan video audio HTML.mp" controls="controls" width="px" height="px" > ;</video> </body> </html> </div> Kesan: <img src="http://files.jb51.net/file_images/article/201512/2015120116154453.png" alt="">(2) HTML5 <video> - Gunakan DOM untuk kawalan (gunakan JS untuk mengawal main/jeda video, zum masuk dan keluar) 　<Petua: Memasuki console.log("hello"); dalam fungsi JS bermaksud mengeluarkan hello kepada konsol penyemak imbas Jika konsol boleh mengeluarkan hello, ia bermakna fungsi boleh dipanggil. <div class="msgheader"><div class="right">Salin kodKod tersebut adalah seperti berikut:</div></div> <!DOCTYPE html AWAM "-/ /WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <div class="msgborder" id="phpcode34"> <html xmlns="http :// www.w.org//xhtml"> <head> <meta http-equiv="Content-Type" content="text/html charset=utf-" /> ; <title>Video

Besarkan

<script> var a = document.getElementById("video"); function clickA() { if(a. dijeda) a.play(); else a.pause(); } fungsi clickBig() { a.width = ; a.height = ; } fungsi clickSmall() { a.width =  a. ketinggian = ; } </skrip> </body> </html> Kesan: <img src="http://files.jb51.net/file_images/article/201512/2015120116154454.png" alt=""> Klik untuk membesarkan atau mengurangkan video dan akan ada perubahan yang sepadan. 3. Audio<audio> 1 <img src="http://files.jb51.net/file_images/article/201512/2015120116154455.png" alt=""> 2. atribut tag <audio> Atribut kawalan digunakan untuk menambah kawalan main, jeda dan kelantangan. Kandungan yang dimasukkan antara <audio> dan </audio> adalah untuk paparan oleh penyemak imbas yang tidak menyokong elemen audio. (Sama dalam video) <img src="http://files.jb51.net/file_images/article/201512/2015120116154456.png" alt=""> 4. HTML 5 Kanvas (kanvas) 1. Apakah itu Kanvas? Elemen kanvas digunakan untuk melukis grafik laman web. 　*Elemen kanvas HTML5 menggunakan JavaScript untuk melukis imej pada halaman web Elemen kanvas itu sendiri tidak mempunyai keupayaan melukis. Semua kerja lukisan mesti dilakukan dalam JavaScript. 　*Kanvas ialah kawasan segi empat tepat yang anda boleh mengawal setiap piksel. 　*kanvas mempunyai pelbagai kaedah untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej. 2. Pengetahuan JS yang berkaitan: (1) Objek getContext("2d") ialah objek HTML5 terbina dalam, dengan pelbagai laluan lukisan, segi empat tepat, bulatan, aksara dan penambahan Kaedah imej. 　(2) Kaedah fillStyle mewarnakannya, dan kaedah fillRect menentukan bentuk, kedudukan dan saiz. [Kaedah fillRect mempunyai parameter (0,0,150,75). Maksud: lukis segi empat tepat 150x75 pada kanvas, bermula dari sudut kiri atas (0,0)】 3 Contoh 　 (1) Tuding tetikus di atas segi empat tepat untuk melihat koordinat. Salin kod <div class="msgheader"> <div class="right"> Kod tersebut adalah seperti berikut: <!DOCTYPE html AWAM "-/ /WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"></div> <html xmlns="http :// www.w.org//xhtml"></div> <head><div class="msgborder" id="phpcode35"> <meta http-equiv="Content-Type" content="text/html charset=utf-" /&gt ; <title>canvas</title> <script type="text/javascript"> fungsi cnvs_getCoordinates(e) { x=e.clientX; ;! --clientX atribut acara mengembalikan koordinat mendatar penuding tetikus ke halaman penyemak imbas (atau kawasan klien) apabila peristiwa dicetuskan --> y=e.clientY; document.getElementById(" xycoordinates") .innerHTML="Coordinates: (" x "," y ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=" "; } </script>

Tuding tetikus di atas segi empat tepat di bawah Anda boleh melihat koordinat pada:

onmousemove=" cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">

🎜> < ;/body>

Titik pengetahuan:
*atribut peristiwa klienX mengembalikan koordinat mendatar penuding tetikus ke halaman penyemak imbas (atau kawasan klien) apabila peristiwa dicetuskan. Kawasan pelanggan merujuk kepada tetingkap semasa.
　*InnerText dan innerHTML boleh menambah maklumat yang sepadan pada badan teg.

Kesan:

(2) Lukis garisan

Salin kod

Kod adalah seperti berikut:

canvas

var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.moveTo(,);
cxt.lineTo(,);
cxt.lineTo(,);
cxt.stroke();

Titik pengetahuan:
*moveto ialah bergerak ke koordinat tertentu, dan lineto ialah menyambungkan garisan daripada koordinat semasa ke koordinat tertentu. Kedua-dua fungsi ini menambah untuk melukis garis lurus. Untuk melukis garisan, anda perlu menggunakan "pen", kemudian MoveToEx() membetulkan kedudukan permulaan pen yang akan dilukis (x, y), dan kemudian untuk menetapkan kedudukan penamat, anda perlu menggunakan fungsi LineTo untuk tentukan kedudukan akhir (xend, yend), supaya garisan Dilukis. Setiap kali ia disambungkan ke koordinat sebelumnya.
　Kaedah *stroke() sebenarnya akan melukis laluan yang ditakrifkan oleh kaedah moveTo() dan lineTo(). Warna lalai ialah hitam.
Kesan:

(3) Lukis bulatan
　*kaedah fill() mengisi imej semasa (laluan). Warna lalai ialah hitam.
Kaedah *arka() mencipta lengkok/lengkung (digunakan untuk mencipta bulatan atau separa bulatan): context.arc(x,y,r,sAngle,eAngle,lawan arah jam);

Pusat: arka(100,75,50,0*Math.PI,1.5*Math.PI)
Sudut mula: arka(100,75,50,0,1.5*Math.PI )
Sudut hujung: lengkok(100,75,50,0*Math.PI,1.5*Math.PI)

* Cxt.beginPath(): Buka laluan Selepas dibuka, anda boleh menetapkan semula atribut yang berkaitan. Cxt.closePath(): Tutup laluan.

Salin kod

Kod tersebut adalah seperti berikut:

canvas

< /body>

Kesan:

(4) Kecerunan Warna
　*createLinearGradient() kaedah mencipta objek kecerunan linear. Kecerunan boleh digunakan untuk mengisi segi empat tepat, bulatan, garisan, teks dan banyak lagi. Gunakan kaedah addColorStop() untuk menentukan warna yang berbeza dan tempat untuk meletakkan warna dalam objek kecerunan. Sintaks JS: context.createLinearGradient(x0,y0,x1,y1):

*addColorStop() kaedah menentukan warna dan kedudukan dalam objek kecerunan. Sintaks JS: gradient.addColorStop(stop,color);

Salin kod

Kod adalah seperti berikut:

画布

　　效果：

（5）把一幅图像放置到画布上
　　*drawImage() 方法在画布上绘制布上绘制图私。能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
　　　　*JS语法1：在画布上定位图像：context.drawImage(img,x,y)上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);
　　　　*JS语法3：剪切图像，并在画布上定位被剪切的都被剪切的：imej, lebar. ,tinggi,x,y,lebar,tinggi);

复制代码代码如下:

画布

< ;/html>

Apakah ciri baharu kemahiran tutorial HTML5_html5