1. Desain Struktur Halaman - HTML: Proses ini adalah menggunakan berbagai elemen HTML untuk membangun struktur halaman web.
2. Desain Penampilan Halaman - CSS: Proses ini adalah menggunakan CSS untuk meningkatkan penampilan halaman web.
3. Perilaku Halaman Desain - JavaScript: Proses ini adalah untuk memberikan perilaku tertentu pada elemen -elemen halaman web.
Selain CSS, HTML5 telah diperluas ke berbagai tingkat dalam dua aspek lainnya. Seri ini difokuskan pada aspek pertama. Pada bagian sebelumnya, kami telah mempelajari elemen kanvas dan SVG yang kompleks, dan bab -bab berikut akan merangkum elemen tambahan HTML5 lainnya.
Elemen struktural HTML5 telah menambahkan elemen struktural baru, seperti header, footer, navigasi navigasi, artikel konten, bagian bab, dll. Artinya ditunjukkan pada gambar di bawah ini:Selain elemen-elemen struktural dari seluruh halaman, HTML5 juga menambahkan elemen semantik tingkat blok, seperti elemen tambahan di samping, gambar elemen gambar, rincian elemen deskripsi terperinci, dll. Selain menampilkan makna tata letak halaman ini, elemen-elemen ini tidak berbeda dengan divs biasa, dan mereka masih perlu bergantung pada CS untuk menampilkan elemen-elemen ini. Berikut adalah contoh singkat:
<Html>
<head>
<title> DXY Blog </iteme>
</head>
<body>
<Header>
<h1> <a href = "http://www.vevb.com/dxy1982/%22%3edxy1982 blog </a> </h1>
</teader>
<section>
<martikel>
<h2> <a href = "http://www.vevb.com/dxy1982/"> Artikel 1 </a> </h2>
<p> Pendahuluan </p>
</artikel>
<martikel>
<h2> <a href = "http://www.vevb.com/dxy1982/"> Artikel 2 </a> </h2>
<p> Pendahuluan </p>
</artikel>
<av>
<a href = "http://www.vevb.com/dxy1982/"> blog </a>
</sav>
</section>
<av>
<ul>
<li> <h2> Informasi </h2>
<ul>
<li> <a href = "http://www.vevb.com/dxy1982/"> Kebijakan </a> </li>
<li> <a href = "http://www.vevb.com/dxy1982/"> Daftar </a> </li>
</ul> </li>
<li> <h2> artikel </h2>
<ul>
<li> <a href = '/blog/2007/04/'> Januari </a> </li>
<li> <a href = '/blog/2007/03/'> Februari </a> </li>
</ul>
</li>
</ul>
</sav>
<footer>
<p> Hak Cipta 2012 DXY1982 </p>
</footer>
</body>
</html>
Meskipun elemen -elemen ini relatif mudah digunakan, masih ada beberapa poin yang perlu diperhatikan :1. Jangan menggunakan bagian sebagai pengganti div
Bagian bukanlah wadah gaya. Elemen bagian mewakili bagian semantik dari konten yang digunakan untuk membantu membangun ringkasan dokumen. Itu harus berisi header. Biasanya ada sebagai artikel terbanyak (tentu saja, itu juga dimungkinkan untuk artikel sebagai bagiannya). Jika Anda ingin menemukan elemen yang digunakan sebagai wadah halaman atau memerlukan wadah gaya tambahan, silakan terus gunakan Div.
2. Hanya gunakan header dan hgroup saat dibutuhkan
Tidak ada artinya menulis label yang tidak perlu ditulis. Skenario penggunaan header dan hgroup biasanya sebagai berikut:
• Elemen header mewakili satu set teks pembantu pengantar atau navigasi, yang sering digunakan sebagai header bagian.
• Ketika kepala memiliki struktur multi-layer, seperti subjudul, subtitle, berbagai teks logo, dll., Gunakan hgroup untuk menggabungkan elemen H1-H6 sebagai kepala bagian.
Di sini, jika header atau hgroup hanya memiliki beberapa elemen kepala, lebih baik untuk menghapus dua tag yang tidak berguna ini, misalnya:
<martikel>
<Header>
<h1> posting blog terbaik saya </h1>
</teader>
<!-Konten Artikel->
</artikel>
Memodifikasi langsung ke:
<martikel>
<h1> posting blog terbaik saya </h1>
<!-Konten Artikel->
</artikel>
Hal yang sama berlaku untuk:
<Header>
<Hgroup>
<h1> posting blog terbaik saya </h1>
</hgroup>
<p> oleh Rich Clark </p>
</teader>
Ubah langsung ke:
<Header>
<h1> posting blog terbaik saya </h1>
<p> oleh Rich Clark </p>
</teader>
3. Jangan menyalahgunakan NAV
Elemen NAV mewakili blok di halaman yang menautkan ke halaman lain atau bagian lain dari halaman ini; blok yang berisi tautan navigasi.
Tetapi tidak semua tautan pada halaman perlu ditempatkan di elemen NAV - elemen ini dimaksudkan untuk digunakan sebagai blok navigasi utama. Untuk memberikan contoh spesifik, sering ada banyak tautan di footer, seperti istilah layanan, beranda, halaman pemberitahuan hak cipta, dll. Elemen footer itu sendiri sudah cukup untuk mengatasi situasi ini. Meskipun elemen NAV juga dapat digunakan di sini, biasanya dianggap tidak perlu.
4. Jangan menyalahgunakan sosok
Gambar harus berupa kandungan cairan, dan kadang -kadang akan ada deskripsi judul yang terkandung di dalamnya. Secara umum, itu akan dirujuk sebagai unit independen dalam aliran dokumen. Ini adalah skenario terbaik untuk gambar - dapat dipindahkan dari halaman konten utama ke bilah samping tanpa mempengaruhi aliran dokumen. Gambar hanya boleh dirujuk dalam dokumen, atau dikelilingi oleh elemen bagian.
Jika Anda murni untuk rendering gambar (seperti logo), tidak dikutip di tempat lain dalam dokumen, dan tidak perlu memindahkan lokasi, maka jangan gunakan gambar.
5. Jangan gunakan atribut tipe yang tidak perlu
Dalam HTML5, elemen skrip dan gaya tidak lagi memerlukan atribut tipe. Tentu saja tidak ada masalah dengan menulis, tetapi dari perspektif praktik terbaik, tidak perlu menulis.
Elemen audio Elemen audio digunakan untuk mengidentifikasi konten suara, seperti musik atau aliran audio lainnya. Format yang didukung oleh elemen ini ditampilkan pada tabel berikut:| Yaitu 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| OGG VORBIS | √ | √ | √ | ||
| Mp3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
Tag audio memiliki beberapa atribut yang digunakan untuk mengontrol konten, kapan dan bagaimana audio dimainkan, dll. Atribut ini adalah: SRC (nama file), preload (muat saat halaman dimuat), kontrol (kontrol tampilan), loop (loop) dan autoplay (autoplay). Dalam contoh berikut, halaman akan diputar segera setelah audio dimuat, dan akan terus diputar. Kontrol yang disediakan dapat memungkinkan pengguna untuk berhenti atau memulai kembali pemutaran audio:
<audio src = "myfirstmusic.ogg" control = "control" autoplay = "autoplay" loop = "loop">
Browser Anda tidak mendukung elemen audio.
</audio>
Jika browser tidak mendukung elemen, informasi teks elemen ditampilkan.
Jika elemen autoplay diatur, properti preload secara otomatis diabaikan. Jika preload = Auto diatur, audio akan dimuat setelah halaman dimuat.
Elemen audio memungkinkan menentukan beberapa elemen sumber untuk kompatibel dengan browser. Elemen sumber dapat menautkan berbagai file audio. Browser akan menggunakan format yang dapat dikenali pertama:
<Audio>
<Source src = "song.ogg" type = "audio/ogg">
<Source src = "song.wma" type = "audio/x-ms-wma">
<Source src = "song.mp3" type = "audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>
Elemen video Elemen video memungkinkan Anda untuk memutar klip video atau streaming media visual. Format yang didukung oleh elemen ini ditampilkan pada tabel berikut:| Format | YAITU | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| OGG | TIDAK | 3.5+ | 10.5+ | 5.0+ | TIDAK |
| MPEG 4 | 9.0+ | TIDAK | TIDAK | 5.0+ | 3.0+ |
| Webm | TIDAK | 4.0+ | 10.6+ | 6.0+ | TIDAK |
Ini memiliki semua atribut elemen audio, plus: diredam, poster (menunggu gambar), lebar dan tinggi. Tak perlu dikatakan, dua makna terakhir. Ketika video dimuat atau video dalam keadaan tidak memuat, atribut poster (menentukan URL absolut atau relatif) memungkinkan Anda menemukan gambar untuk menanganinya terlebih dahulu; diredam berarti diredam.
Video juga mendukung penggunaan elemen sumber untuk menyelesaikan masalah kompatibilitas. Lihat contoh kecil:
<control video = "kontrol" poster = "/gambar/screen.gif">
<Source src = "film.mp4" type = "video /mp4" />
<Source src = "movie.ogg" type = "video /ogg" />
Browser Anda tidak mendukung elemen video.
</dide>
Jika Anda ingin tidak memutar suara video, set Muted = Muted.
Selain itu, elemen video juga menyediakan beberapa metode, properti, dan acara untuk mendukung proses mengendalikan pemutaran dalam operasi DOM. Misalnya, elemen panggilan untuk dimainkan, berhenti, memuat, dan metode lainnya. Ada juga properti seperti volume dan waktu pemutaran yang dapat langsung dibaca atau diatur. Selain itu, ada acara yang memulai pemutaran, jeda, akhir, dll. Yang dapat digunakan. Lihat contoh berikut:
<! Doctype html>
<Html>
<body>
<Div style = "Text-Align: Center">
<tombol OnClick = "playPause ()"> Play/Pause </button>
<tombol OnClick = "makeBig ()"> BIG </button>
<tombol OnClick = "makeMall ()"> Small </button>
<tombol OnClick = "makenormal ()"> Normal </button>
<Video id = "Video1">
<Source src = "mov_bbb.mp4" type = "video /mp4" />
<Source src = "mov_bbb.ogg" type = "video /ogg" />
Browser Anda tidak mendukung elemen video.
</dide>
</div>
<type skrip = "Teks/JavaScript">
var myvideo = document.getElementById ("video1");
function playpause ()
{
if (myvideo.paused)
myvideo.play ();
kalau tidak
myvideo.pause ();
}
fungsi makebig ()
{
myvideo.width = 560;
}
fungsi madeMall ()
{
myvideo.width = 320;
}
fungsi makenormal ()
{
myvideo.width = 420;
}
</script>
</body>
</html>
Faktanya, kita perlu memperhatikan cara menulis yang baru: dalam contoh di atas kita menulis elemen audio seperti ini:
<audio src = "myfirstmusic.ogg" control = "control" autoplay = "autoplay" loop = "loop">
Browser Anda tidak mendukung elemen audio.
</audio>
Bahkan, banyak kontrol item, autoplay, dan loop diperkenalkan di HTML5. Properti ini baik -baik saja bagi Anda untuk menulisnya seperti di atas, tetapi cara yang disarankan adalah menulisnya sebagai berikut:
<audio src = "myfirstmusic.ogg" mengontrol loop autoplay>
Browser Anda tidak mendukung elemen audio.
</audio>
Karena browser bertemu dengan sifat -sifat ini, itu berarti properti ini diaktifkan. Dengan kata lain, jika Anda menulis properti ini dan dengan paksa diatur ke false, efeknya masih setara dengan true, sehingga umumnya disarankan untuk hanya menulis nama atribut.
Masalah penulisan ini juga ada dalam bentuk. Banyak sifat baru bentuk dan input adalah properti boolean, dan metode penulisan yang disarankan harus digunakan.
Elemen yang menunjukkan metrik Tidak setiap browser mendukung elemen -elemen berikut, tetapi pada dasarnya Anda dapat melihat efeknya pada Chrome. Elemen batang kemajuan Gunakan elemen ini untuk menampilkan bilah kemajuan yang diunduh, dengan hanya dua atribut: nilai dan maks, yang sangat sederhana. Chrome dan Firefox didukung.<p> Unduh Kemajuan:
<nilai progress = "1534602" max = "4603807"> 33%</progress>
</p>
Elemen metrik Gunakan elemen ini untuk menampilkan nilai yang diberikan di kelas rentang standar yang menunjukkan diagram indikasi, dan nilai dalam rentang yang berbeda akan menunjukkan warna yang berbeda. Beberapa situs web menggunakan benda ini untuk menampilkan nilai pengalaman pengguna saat ini. Ketika browser tidak mendukung elemen ini, teks di tengah elemen akan ditampilkan secara langsung. Chrome saat ini didukung.<p> Skor Anda adalah:
<value meter = "88.7" min = "0" max = "100" Low = "65" High = "96" Optimum = "100"> B+</teter>.
</p>
Jalankan dan Anda akan melihat hal seperti scrollbar kuning; Jika Anda mengubah nilainya menjadi 50, Anda akan menemukan bahwa warna bilah indikator diprogram merah.
Ada begitu banyak perkenalan elemen baru. Untuk deskripsi elemen lainnya, silakan merujuk ke daftar tag lengkap di W3C.
Referensi Praktis: Tutorial W3C: http://www.w3schools.com/html5/default.aspBimbingan HTML5 Resmi: http://dev.w3.org/html5/html-author/
Situs web panduan yang cukup bagus: http://html5doctor.com/
HTML5 Tutorial Cina: http://www.html5china.com/
Blog front-end yang bagus: http://www.pjhome.net/default.asp?cateId=1