Diskusi singkat tentang tag baru dan yang ditinggalkan di HTML5

Elemen HTML 4.01 berikut telah dihapus di HTML5. Meskipun browser masih mendukung tag ini karena alasan kompatibilitas, disarankan untuk menggunakan tag alternatif baru. Paradoksnya, browser lama tidak cukup mendukung tag baru Tergantung pada audiensnya.

Elemen-elemen ini termasuk font dasar, besar, tengah, font, s, strike, tt, u. Elemen-elemen ini murni untuk tampilan halaman, dan konten yang ditampilkan harus dilengkapi dengan CSS.

Elemen-elemen ini termasuk frameset, frame, dan noframes. HTML5 tidak mendukung bingkai bingkai, tetapi hanya mendukung bingkai iframe, atau menggunakan format sisi server yang terdiri dari beberapa halaman yang sesuai dengan halaman tersebut, dan menghapus tiga tag di atas.

Elemen-elemen ini termasuk applet, bgsound, flashing, marquee dan tag lainnya.

Hapus rb, gunakan Ruby untuk menggantikan akronim Gunakan abbr untuk menggantikan abolition dir Gunakan ul untuk menggantikan isindex Gunakan kombinasi form dan input untuk menggantikan listing Gunakan pre untuk menggantikan xmp Gunakan kode untuk menggantikan abolition nextid Gunakan panduan untuk menghapus plaintex Gunakan teks/ plian (badan yang belum diformat) substitusi tipe MIME

Dalam HTML4.01, div banyak digunakan di berbagai lingkungan tata letak tanpa definisi yang jelas. HTML5 membuat semantik div untuk SEO, dan tag struktural yang baru ditambahkan adalah sebagai berikut:

a), elemen bagian mewakili blok konten di halaman, seperti bab, header, footer, atau bagian halaman lainnya. Ini dapat digunakan dalam kombinasi dengan h1, h2... dan elemen lain untuk mewakili struktur dokumen. Contoh: <section>……</section> dalam HTML5; <div>……</div> dalam HTML4.

b) Elemen artikel mewakili bagian konten independen pada halaman yang tidak berhubungan dengan konteks. Misalnya saja sebuah artikel.

c) Unsur samping merupakan keterangan tambahan yang berkaitan dengan isi unsur pasal selain isi unsur pasal.

d). Elemen header mewakili blok konten di halaman atau judul keseluruhan halaman.

e). Elemen hgroup mewakili kombinasi judul seluruh halaman atau blok konten di halaman.

f), elemen footer mewakili catatan kaki seluruh halaman atau blok konten di halaman. Biasanya, ini akan mencantumkan nama pembuatnya, tanggal pembuatannya, dan informasi kontak pembuatnya.

g). Elemen nav mewakili bagian link navigasi halaman.

h). Elemen gambar mewakili bagian independen dari konten aliran, umumnya mewakili unit independen dalam konten aliran utama dokumen. Gunakan elemen figcaption untuk menambahkan keterangan ke sekelompok elemen gambar. Misalnya:

 <figure> ​<figcaption>RRC</figcaption> ​<p>Republik Rakyat Tiongkok lahir pada tahun 1949</p></figure>

Penulisan umum dalam HTML4

 <dl> ​<h1>prc</h1> ​<p>Republik Rakyat Tiongkok lahir pada tahun 1949</p> ​</dl>

Hasil berjalan:

2.1.meteran

Mewakili nilai dalam kisaran tertentu, yang dapat digunakan untuk upah, jumlah, persentase, dll. max mewakili nilai maksimum, min mewakili nilai minimum, dan nilai mewakili nilai saat ini.

 <meter maks=100 menit=0 nilai=60 gaya=lebar: 300 piksel;></meter>

Anda dapat menggunakan js untuk mengontrolnya dari 0 hingga 100.

waktu. Mewakili nilai waktu. Atribut datetime menekankan waktu. Waktu konferensi: <time>2015-10-6</time>

 <waktu>6-10-2015</waktu>

Kami memulai kelas pada <time>8:30</time> setiap pagi. Saya punya kencan pada <time datetime=2017-02-14>Hari Valentine</time>.

Karena tag ini merupakan tag semantik, maka tidak mempunyai efek khusus jika dilihat di browser. Pada dasarnya efeknya sama seperti jika tag tidak disetel.

Digunakan untuk mewakili bilah kemajuan

 <h3>kemajuan</h3><nilai kemajuan=75 maks=100></kemajuan>

max: nilai maksimum, nilai saat selesai

nilai: nilai saat ini

Tag ini mendefinisikan daftar data opsional. Digunakan bersama dengan elemen input, Anda dapat membuat daftar drop-down nilai input.

Jika digabungkan dengan masukan, pemilihan dan masukan dapat diselesaikan.

 <input type=text list=countries /><datalist id=countries> <option value=China></option> <option value=Amerika Serikat></option> <option value=Japan></option></datalist >

Ini terutama digunakan untuk menyajikan secara visual kepada pengguna teks yang perlu disorot atau disorot. Kata kunci pencarian disorot dalam hasil pencarian aplikasi pada umumnya. HTML5<mark></mark>;HTML4 <span></span>.

Tentukan komentar ruby ​​​​(pinyin atau karakter Cina). Digunakan dengan tag <ruby> dan <rt>. Elemen ruby ​​​​terdiri dari satu atau lebih karakter (memerlukan penjelasan/pengucapan) dan elemen rt yang menyediakan informasi tersebut, serta elemen rp opsional yang mendefinisikan konten yang akan ditampilkan ketika browser tidak mendukung ruby ​​​​elemen.

Mendefinisikan interpretasi atau pengucapan suatu karakter (fonetik atau karakter fonetik Cina).

Digunakan dalam komentar Ruby untuk menentukan apa yang ditampilkan oleh browser yang tidak mendukung elemen Ruby.

Mewakili jeda garis yang lembut. Perbedaan dari elemen br: elemen br menunjukkan bahwa baris baru harus dibuat di sini; wbr menunjukkan bahwa ketika jendela browser atau elemen induk lebar (ketika tidak diperlukan jeda baris), baris tersebut tidak akan ada. putus, tapi bila lebarnya kurang, otomatis garisnya terbungkus di sini.

Tentukan grafik, seperti bagan dan gambar lainnya. Elemen <canvas> hanyalah wadah grafik (kanvas), dan Anda harus menggunakan skrip untuk menggambar grafik.

 <kanvas id=myCanvas></canvas><script type=text/javascript> var kanvas = document.getElementById('myCanvas'); var ctx = kanvas.getContext('2d'); ; ctx.fillRect(0, 0, 80, 100);</skrip>

Mewakili tombol perintah, seperti tombol radio, kotak centang, atau tombol. Elemen perintah hanya terlihat jika berada di dalam elemen menu. Jika tidak, elemen ini tidak akan ditampilkan, namun dapat digunakan untuk menentukan pintasan keyboard.

 <menu> ​<command onclick=alert('Halo Dunia')> ​Klik Saya!</command> ​</menu>

Digunakan untuk mendeskripsikan detail suatu dokumen atau bagian dari suatu dokumen. Dapat digunakan bersama dengan tag ringkasan, yang dapat menentukan judul untuk detailnya. Judulnya terlihat, dan ketika pengguna mengklik judulnya, detailnya akan ditampilkan. ringkasan harus menjadi elemen anak pertama dari detail.

Tentukan daftar opsi. Gunakan elemen ini bersama dengan elemen masukan untuk menentukan kemungkinan nilai masukan. Daftar data dan pilihannya tidak ditampilkan, itu hanya daftar nilai input yang valid. Gunakan atribut daftar dari elemen input untuk mengikat daftar data.

Tentukan berbagai jenis keluaran, seperti keluaran skrip.

 <form action=form_action.asp method=dapatkan nama=sumform> ​<nama keluaran=sum></output> ​</form>

Tentukan daftar menu. Gunakan label ini ketika Anda ingin membuat daftar kontrol formulir. Perhatikan perbedaannya dari nav. Menu khusus digunakan untuk kontrol formulir.

Jika Anda perlu memutar audio dan video pada halaman tersebut, cara yang sering kami gunakan adalah:

a) 、 sematkan

 <sematkan src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf'allowFullScreen='true' quality='high' width='480' height='400' align=' tengah'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b), gunakan pemutar flash

Seperti beberapa plug-in pihak ketiga, flowplayer602

Komponen multimedia HTML5 mengacu pada komponen video (video) dan komponen audio (audio). Komponen multimedia HTML5 dapat menyematkan komponen multimedia langsung di halaman web Anda tanpa bantuan plug-in pihak ketiga seperti Flash Player. Kemampuan baru browser untuk menawarkan dukungan asli untuk video memudahkan pengembang web untuk menambahkan komponen video ke situs web mereka tanpa bergantung pada ketersediaan plug-in eksternal. Karena keterbatasan teknologi Flash yang saat ini digunakan oleh Apple pada iPhone dan iPad, kemampuan komponen multimedia HTML5 menjadi sangat penting.

Digunakan untuk memutar video, film

Rumus dasar labelnya adalah sebagai berikut:

 <lebar video=800 tinggi=600 kontrol=kontrol poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <objek lebar= tinggi= tipe=aplikasi/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> Browser saat ini tidak mendukung pemutaran video langsung. Klik di sini untuk mengunduh video: <a href=a.mp4>Unduh video</a></video>

Sumber adalah sumber video, yang dapat terdiri dari beberapa jenis. Jika salah satu gagal, jenis berikutnya akan dipilih.

Ogg = File Ogg dengan pengkodean video Theora dan pengkodean audio Vorbis MPEG4 = File MPEG 4 dengan pengkodean video H.264 dan pengkodean audio AAC File WebM = WebM dengan pengkodean video VP8 dan pengkodean audio Vorbis

Melihat:

 <video src=img/a.mp4 controlled=controls poster=img/1.jpg>Browser Anda terlalu tua, harap tingkatkan versinya, unduh video <a href=#>Alamat</a></video>

Konten innerHTML dari sebagian besar tag HTML5 adalah konten yang ditampilkan ketika browser tidak mendukung tag tersebut.

Perbedaan antara pengikatan acara dan mendengarkan:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>Perbedaan antara pengikatan peristiwa dan pemantauan</title> </head>​ <body> <button id=btnA>Tombol A </button> <button id=btnB>Tombol B</button> <tipe skrip=teks/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { alert(Anda mengklik); } btnA.onclick = function() { alert(Anda mengklik lagi); { peringatan(Anda mengklik); },false); alert(Anda mengklik lagi); },false); </script> </body>​</html>

Setelah mengikat suatu peristiwa dengan menggunakan nama peristiwa, pengikatan tersebut akan menimpa peristiwa yang diikat sebelumnya, yaitu peristiwa terikat terakhir yang akan berlaku;

Menggunakan addEventListener untuk mengikat peristiwa tidak akan ditimpa, dan beberapa peristiwa identik dapat diikat ke satu elemen secara bersamaan.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Tag video</title> </head> <body> <video id=videoIce width=800 height=600 kontrol=kontrol poster =konten/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <objek lebar= tinggi= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> Browser saat ini tidak mendukung pemutaran video langsung. Klik di sini untuk mengunduh video: <a href=content/a.mp4>Unduh video</a> </video> <h2> <button onclick=play()>Putar</button> <button onclick=pause()>Jeda</button> <span id=msg></span> </h2> <jenis skrip =teks/javascript> var videoIce=document.getElementById(videoIce); fungsi putar() { videoIce.play(); }​ fungsi jeda() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime;

Audio dapat mewujudkan fungsi memutar suara dan musik.

 <audio src=http://baidu/demo/test.mp3 controlled >Browser Anda tidak mendukung elemen audio</autio><audio src=content/a.mp3 controlled=controls autoplay=autoplay></audio>

Banyak atribut tag audio yang sama dengan atribut video:

putar otomatis: benar|salah, jika benar, audio akan segera diputar setelah siap. kontrol: benar|salah Jika benar, menampilkan kontrol, seperti tombol putar, kepada pengguna. end: nilai numerik menentukan di mana pemutar berhenti memutar audio. Secara default, suara akan diputar sampai akhir. loopend: nilai numerik menentukan posisi di mana pemutaran loop berhenti di aliran audio. Defaultnya adalah nilai atribut end. loopstart: nilai numerik menentukan posisi awal pemutaran loop dalam aliran audio. Defaultnya adalah nilai atribut start. playcount: nilai numerik menentukan berapa kali klip audio diputar. Standarnya adalah 1. src: url Url audio yang sedang diputar. start : nilai numerik menentukan posisi dalam aliran audio tempat pemutar mulai memutar. Secara default, suara diputar di awal.

Contoh penggunaan elemen sumber sebagai sub-tag elemen multimedia:

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

Dengan menggunakan elemen sumber, browser mencari secara berurutan dalam daftar hingga menemukan format file yang dapat diputar. Setelah ditemukan, browser memutar file tersebut dan mengabaikan elemen lain yang mengikutinya.

API audio pada dasarnya sama dengan video. Berikut adalah contoh penyesuaian volume:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>tag audio</title> </head> <body> <h2>tag audio</h2> <audio src=content/ fcml.mp3 controlled=controls autoplay=autoplay id=mp3> <marquee><h2>Ganti browser, sudah terlalu lama</h2></marquee> </audio> <tipe input=rentang min=0 max=100 onchange=setVolume(ini) /> <tipe skrip=teks/javascript> fungsi setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01; /skrip> </body></html>

Volumenya hanya antara 0-1.

Digunakan untuk menyematkan konten (termasuk berbagai media). Formatnya bisa Midi, Wav, AIFF, AU, MP3, flash, dll.

Contoh: <embed src=flash.swf /> Contoh kode dalam HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.