22 Tips Dasar Tentang HTML5 (Tutorial Gambar dan Teks)

Teknologi web berkembang terlalu cepat, dan jika Anda tidak mengimbangi waktu, Anda akan dihilangkan. Oleh karena itu, untuk menangani HTML5 yang akan datang, artikel ini merangkum 22 keterampilan dasar HTML5, dan berharap akan membantu Anda untuk mempelajari HTML5 lebih lanjut.

Pernyataan XHTML terlalu panjang, dan saya percaya ada beberapa pengembang front-end yang dapat menulis dengan tangan pernyataan Doctype ini.

<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

Pernyataan Doctype HTML5 sangat singkat. Saya yakin Anda bisa mengingatnya segera setelah melihat pernyataan ini. Anda tidak perlu menyia -nyiakan sel -sel otak untuk mengingat pernyataan Doctype XHTML yang sedikit sesat.

<! Doctype html>

Pernyataan Doctype Singkat HTML5 adalah untuk memungkinkan browser modern seperti Firefox dan Chrome dan browser seperti IE6/7/8 untuk memasukkan (kuasi-) mode standar. Anda mungkin bertanya -tanya bahwa IE6/7 juga dapat mendukung HTML5 Doctype. Bahkan, IE akan memasuki mode standar selama Doctype mematuhi format ini.

Lihatlah kode sederhana berikut:

<img src = "path/to/image">

<h6> gambar Mars. </h6>

Sayangnya, tag H6 di sini tampaknya tidak ada hubungannya dengan tag IMG, dan semantiknya tidak cukup jelas. HTML5 menyadari hal ini dan mengadopsi tag <figure>. Ketika <figure> dikombinasikan dengan tag <bapcaption>, tag H6 dan tag IMG dapat digabungkan, dan kode akan lebih semantik.

<figure>

<img src = "path/to/image">

<figcaption>

<h6> Ini adalah gambar dari sesuatu yang menarik. </h6>

</baption>

</tigur>

Belum lama ini, saya menggunakan tag <small> untuk membuat subtitle yang terkait dengan logo. Namun, tag <small> didefinisikan ulang di HTML5 untuk membuatnya lebih semantik, dan ukuran font <small> akan menjadi lebih kecil. Pikirkan tentang hal ini, masih merupakan ide yang baik untuk menggunakan tag ini untuk informasi hak cipta di bagian bawah situs web.

Biasanya Anda akan menambahkan jenis atribut ke <link> dan <script>:

<tautan rel = "stylesheet" type = text/css href = "path/to/stylesheet.css">

<script type = "text/javascript" src = "path/to/script.js"> </script>

Dalam HTML5, atribut tipe tidak lagi diperlukan, karena ini tampaknya agak berlebihan, dan itu dapat membuat kode lebih ringkas setelah dihapus.

<link href = "path/to/stylesheet.css">

<skrip src = "path/to/script.js"> </script>

Ini agak membingungkan, html5 bukan xthml, Anda dapat menyimpan kutipan ganda dalam tag. Saya percaya sebagian besar kawan, termasuk saya, digunakan untuk menambahkan kutipan ganda, karena ini membuat kode terlihat lebih standar. Namun, ini dapat ditentukan berdasarkan preferensi pribadi Anda apakah akan menggunakan kutipan ganda.

<h6 id = "someId"> Mulailah reaktor. </h6>

Atribut email baru dari kotak input telah ditambahkan ke HMTL5, yang dapat mendeteksi apakah konten input memenuhi format penulisan email. Fungsinya semakin kuat. Sebelum HTML5, Anda hanya dapat mengandalkan JS untuk mendeteksinya. Meskipun fungsi verifikasi bentuk bawaan akan segera menjadi kenyataan, banyak browser tidak mendukung properti ini dan hanya akan diperlakukan sebagai kotak input teks normal.

<Metode form = get>

<Label untuk = "Email"> Email: </label>

<input id = "email" type = "email" name = "email">

<typy type = "kirim"> Kirim formulir </button>

</form>

Sejauh ini, atribut ini tidak didukung, termasuk browser modern, sehingga atribut ini masih belum dapat diandalkan untuk saat ini.

Placeholder di kotak teks (lihat efek kotak pencarian blog ini) kondusif untuk meningkatkan pengalaman pengguna. Sebelumnya, kami hanya bisa mengandalkan JS untuk mencapai efek placeholder, dan menambahkan placeholder atribut placeholder di HTML5.

<input type = "email" name = "email" placeholder = "[email protected]">

Demikian pula, browser modern arus utama saat ini tidak mendukung properti ini dengan baik. Untuk saat ini, hanya Chrome dan Safari yang mendukung properti ini, dan Firefox dan Opera tidak mendukung properti ini.

Fungsi penyimpanan lokal HTML5 memungkinkan browser modern untuk mengingat apa yang kami ketik, dan bahkan jika browser ditutup dan disegarkan, itu tidak akan terpengaruh. Meskipun beberapa browser tidak mendukung fungsi ini, IE8, Safari 4, dan Firefox 3.5 masih mendukung fungsi ini, Anda dapat mengujinya.

Kode berikut tidak akan ada lagi di HTML5

<Div id = header>

...

</div>

<Div id = footer>

...

</div>

Biasanya kami mendefinisikan div untuk header dan footer dan kemudian menambahkan ID, tetapi di HTML5 Anda dapat menggunakan tag <Header> dan <footer> secara langsung, sehingga kode di atas dapat ditulis ulang sebagai:

<Header>

...

</teader>

<footer>

...

</footer>

Berhati -hatilah untuk tidak membingungkan kedua tag ini dengan header dan footer situs web, mereka hanyalah wadah yang mewakili mereka.

IE Browser saat ini tidak mendukung HTML5, yang juga merupakan sandungan besar yang menghalangi popularisasi HTML5 yang lebih cepat. Namun, dukungan IE9 untuk HTML5 masih sangat bagus.

Yaitu parse semua tag HTML5 yang baru ditambahkan ke dalam elemen inline, tetapi sebenarnya mereka adalah elemen tingkat blok, jadi perlu untuk mendefinisikan gaya untuk mereka:

header, footer, artikel, bagian, nav, menu, hgroup {

Tampilan: Blok;

}

Meskipun demikian, IE masih tidak dapat menguraikan tag HTML5 yang baru ditambahkan ini. Saat ini, JavaScript perlu digunakan untuk menyelesaikan masalah ini:

document.createelement ("artikel");

document.createelement ("footer");

document.createelement ("header");

document.createelement ("hgroup");

document.createelement ("nav");

document.createelement ("menu");

Anda dapat menggunakan kode JavaScript ini untuk memperbaiki IE Parse HTML5 yang lebih baik

<script mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>

Ini mirip dengan trik kedua. Jika tag H1 dan H2 digunakan untuk mewakili nama dan subtitle situs web, itu tidak akan berhubungan dengan dua judul yang terkait erat dalam makna aslinya. Pada saat ini, Anda dapat menggunakan tag <hgroup> untuk menggabungkannya, sehingga kode akan lebih semantik.

<Header>

<Hgroup>

<h1> Recall Fan Page </h1>

<H2> Hanya untuk orang yang menginginkan ingatan seumur hidup. </h2>

</hgroup>

</teader>

Personel front-end harus telah melakukan banyak proyek verifikasi bentuk. Salah satu poin penting adalah bahwa beberapa kotak input harus diisi, jadi JavaScript perlu diperiksa di sini. Di HTML5, atribut baru yang harus diisi ditambahkan: diperlukan. Ada dua cara untuk menggunakan atribut yang diperlukan. Metode kedua tampak lebih struktural, sedangkan metode pertama lebih sederhana.

<input type = "text" name = "someInput" diperlukan>

<input type = "text" name = "someInput" wajib = "diperlukan">

Dengan properti ini, ini membuat verifikasi pengiriman formulir lebih mudah, lihat contoh sederhana berikut:

<Metode form = post>

<Label untuk = SomeInput> Nama Anda: </Label>

<Input ID = SomeInput Tipe = Nama Teks = Someinput Placeholder = "Douglas Quaid" Diperlukan = "Diperlukan">

<typy type = "kirim"> go </button>

</form>

Jika kotak input kosong, formulir tidak akan berhasil.

Demikian pula, HTML5 tidak lagi membutuhkan JavaScript untuk menyelesaikan akuisisi fokus otomatis kotak input. Jika kotak input harus dipilih atau fokus input diperoleh, HTML5 telah menambahkan properti akuisisi fokus fokus otomatis:

<input type = "text" name = "someinput" placeholder = "Douglas quaid" wajib = "diperlukan" autofocus = "autofocus">

Autofocus juga dapat ditulis sebagai autofocus = autofocus, yang terlihat lebih standar, tergantung pada preferensi pribadi Anda.

HTML5 menyediakan tag <Audio>, yang memecahkan masalah yang di masa lalu, Anda harus bergantung pada plug-in pihak ketiga untuk memutar file audio. Sejauh ini, hanya beberapa browser terbaru yang mendukung tag ini.

<control audio = "kontrol" autoplay = "autoplay">

<source src = "file.ogg" _fcksavedurl = "" file.ogg "" />

<Source src = "file.mp3" />

<a href = "file.mp3"> Unduh file ini. </a>

</audio>

Mengapa ada dua format file audio? Karena ada perbedaan dalam format yang didukung oleh Firefox dan browser WebKit, Firefox hanya dapat mendukung file .OGG, sementara WebKit hanya mendukung file .mp3. Solusinya adalah membuat dua versi file audio, sehingga dapat kompatibel dengan firefox dan browser webkit. Perlu dicatat bahwa IE tidak mendukung tag ini.

Seperti tag <dial>, HTML5 juga menyediakan dukungan untuk memutar file video dengan tag <sebatan>. YouTube juga telah mengumumkan Embed video HTML5 baru. Tapi agak disesalkan bahwa spesifikasi HTML5 tidak menentukan decoder video tertentu, tetapi memungkinkan browser memutuskan sendiri. Ini menciptakan masalah kompatibilitas browser. Meskipun Safari dan IE9 keduanya mendukung video H.264 (flash player dapat diputar), Firefox dan Opera mendukung format Theora Open Source Theora dan Vorbis. Karena itu, saat menampilkan video HTML5, Anda juga harus menyiapkan dua format.

<Kontrol Video Preload>

<sumber src = "cohagenphoneCall.ogv" type = "video/ogg"; codec = 'vorbis, Theora' " />

<Source src = "cohagenphoneCall.mp4" type = "video /mp4; 'codec =' avc1.42e01e, mp4a.40.2 '" />

<div> browser Anda sudah tua. <a href = "cohagenphoneCall.mp4"> Unduh video ini sebagai gantinya. </a> </div>

</dide>

Perlu dicatat bahwa meskipun atribut tipe dapat dihilangkan, jika ditambahkan, browser dapat menguraikan file video lebih cepat dan akurat. Tidak semua browser mendukung video HTML5, jadi Anda harus menggunakan versi Flash sebagai gantinya. Tentu saja, keputusan itu ada pada Anda.

Atribut Preload: Preload, pertama -tama, Anda perlu menentukan apakah video perlu dimuat sebelumnya. Jika pengunjung mengunjungi halaman dengan banyak video, perlu untuk memulai video, yang dapat menghemat waktu tunggu pengunjung dan meningkatkan pengalaman pengguna. Anda dapat menambahkan properti preload ke tag <dide> untuk mengimplementasikan fungsi preloading.

<video preload = preload>

...

</dide>

[/kode]

Properti Kontrol Tampilan dapat menambahkan kontrol jeda pemutaran ke video. Perlu dicatat bahwa efek yang ditampilkan oleh setiap browser mungkin agak berbeda.

<control video = "kontrol" preload = "preload">

...

</dide>

Di HTML5, kita dapat menggunakan ekspresi reguler secara langsung.

<Metode Form = Post Action =>

<label untuk = nama pengguna> Buat nama pengguna: </label>

<Input ID = UserName Type = Nama Teks = Placeholder Nama Pengguna = 4 <> 10 Diperlukan = Autofocus yang Diperlukan = Pola Autofocus = [A-ZA-Z] {4,10}>

<type type = kirim> go </button>

</form>

Karena setiap browser memiliki dukungan yang berbeda untuk atribut HTML5, ini menciptakan beberapa masalah kompatibilitas. Namun, metode dapat digunakan untuk mendeteksi apakah browser mendukung sifat -sifat ini. Jika kode dalam contoh di atas ingin mendeteksi apakah atribut pola dikenali oleh browser, itu dapat digunakan untuk mendeteksinya menggunakan kode JavaScript.

alert ('pola' di document.createelement ('input')) // boolean;

Bahkan, ini adalah metode yang umum digunakan untuk menentukan kompatibilitas browser, dan pustaka jQuery sering menggunakan metode ini. Tag input dibuat dalam kode di atas dan memeriksa apakah atribut pola didukung oleh browser. Jika dapat didukung, browser akan mendukung fungsi ini, jika tidak itu tidak akan didukung.

<script>

if (! 'Pattern' di document.createElement ('input')) {

// lakukan validasi sisi klien/server

}

</script>

Tag <cark> digunakan untuk menyorot teks yang perlu secara visual menyoroti pentingnya bagi pengguna. String yang dibungkus dalam tag ini harus terkait dengan perilaku pengguna saat ini. Misalnya, jika saya mencari pikiran Anda di beberapa blog, saya dapat membungkus setiap tindakan menggunakan JavaScript di tag <cark>.

<h3> Hasil pencarian </h3>

<h6> Mereka terputus, tepat setelah Quato berkata, <mark> "Buka pikiran Anda" </ Mark>. </h6>

Beberapa orang mungkin memiliki pertanyaan. Dengan tag seperti <Header> dan <footer>, akankah tag <div> masih berfungsi di html5? Jawabannya adalah ya. Misalnya, jika Anda ingin membuat wadah yang dapat membungkus konten khusus, <velv> yang gratis dan fleksibel jelas merupakan pilihan pertama. Jika Anda ingin membuat artikel atau menu navigasi, Anda disarankan untuk menggunakan lebih banyak tag Semantic <Arcticle> dan <Av>.

Banyak orang berpikir bahwa HTML5 mungkin masih lama, jadi mereka mengabaikannya secara langsung. Bahkan, banyak situs web sudah mulai menggunakan HTML5 sekarang. Faktanya, beberapa atribut dan fungsi baru dari HTML5 adalah membuat kode lebih ringkas. Ini selalu merupakan hal yang baik dan harus layak dipuji. Akhirnya, terima kasih telah membaca artikel entry-level ini tentang HTML5, berharap dapat memberikan bantuan bagi Anda untuk mempelajari HTML5 lebih lanjut.