Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

28 Ciri, Tips, dan Teknik HTML5 yang Anda Perlu Tahu

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called HTML5 and You.
Quick Tip: HTML5 Features you Should be Using Right Now
Quick Tip: New HTML5 Form Features

Malay (Melayu) translation by Taufan Prasetyo Basri (you can also view the original English article)

Kadang-kadang, kita melihat semula beberapa catatan kegemaran para pembaca dari seluruh sejarah Tuts+. Tutorial ini mula-mula diterbitkan pada bulan Ogos, 2010.

Industri ini bergerak pantas - sangat cepat! Jika anda tidak berhati-hati, anda akan dibiarkan dalam habuknya. Oleh itu, jika anda merasa sedikit terharu dengan perubahan / kemas kini yang akan datang dalam HTML5, gunakan ini sebagai asas perkara-perkara yang mesti anda ketahui.


1. New Doctype

Masih menggunakan dokumenter XHTML yang mustahil untuk menghafal?

Jika ya, mengapa? Beralih ke doktrin HTML5 baru. Anda akan hidup lebih lama - seperti yang dikatakan Douglas Quaid.

Malah, adakah anda tahu bahawa ia benar-benar tidak benar-benar diperlukan untuk HTML5? Walau bagaimanapun, ia digunakan untuk penyemak imbas semasa dan lama yang memerlukan doctype yang dinyatakan. Pelayar yang tidak memahami dokumentasi ini hanya akan memberikan markup yang terkandung dalam mod standard. Oleh itu, tanpa bimbang, berasa bebas untuk melepaskan perhatian terhadap angin, dan memeluk dokumentasi HTML5 baru.


2. Unsur Rajah

Pertimbangkan markup berikut untuk imej:

Malangnya, tidak ada cara yang mudah atau semantik untuk mengaitkan kapsyen, dibungkus dalam tag paragraf, dengan unsur gambar itu sendiri. HTML5 memperbetulkan ini, dengan pengenalan elemen <figure>. Apabila digabungkan dengan elemen <figcaption>, kita kini dapat mengaitkan kapsyen dengan rakan-rakan imejnya secara semantik.


3.  <small> Redefined

Tidak lama dahulu, saya menggunakan elemen <small> untuk menghasilkan subheadings yang berkait rapat dengan logo. Ia adalah elemen presentational yang berguna; Walau bagaimanapun, sekarang, yang akan menjadi satu penggunaan yang betul. Elemen <small> telah ditakrifkan semula, lebih sesuai, untuk merujuk kepada cetakan kecil. Bayangkan kenyataan hak cipta di footer Laman web anda; mengikut takrif HTML5 baru unsur ini; <small> yang akan menjadi selubung betul untuk maklumat ini.

Unsur <small> kini merujuk kepada 'cetakan kecil.'


4. tiada jenis Types yang lebih banyak untuk skrip dan pautan

Anda mungkin masih menambah atribut type tag link anda dan script.

Ini adalah tidak perlu. Ia tersirat bahawa kedua-dua tag ini merujuk kepada stylesheet dan skrip, masing-masing. Oleh yang demikian, kita boleh keluarkan atribut type semua bersama-sama.


5. untuk sebut harga atau tidak untuk sebut harga.

... Itulah persoalannya. Ingat, HTML5 bukanlah XHTML. Anda tidak perlu membungkus atribut anda dalam tanda petikan jika anda tidak mahu anda. Anda tidak perlu menutup elemen anda. Dengan itu, tidak ada yang salah dengan berbuat demikian, jika ia membuatkan anda berasa lebih selesa. Saya mendapati bahawa ini adalah benar untuk diriku sendiri.

Buat minda anda sendiri tentang yang ini. Jika anda suka sesuatu dokumen yang lebih tersusun, dengan cara semua, melekat dengan sebut harga.


6. Jadikan Kandungan anda boleh diedit

Pelayar baru mempunyai atribut yang bagus baru yang boleh digunakan untuk unsur, dipanggil contenteditable. Seperti namanya, ini membolehkan pengguna mengedit mana-mana teks yang terkandung di dalam unsur, termasuk anak-anaknya. Terdapat pelbagai kegunaan untuk sesuatu seperti ini, termasuk aplikasi semudah senarai tugasan, yang juga mengambil kesempatan daripada penyimpanan tempatan.

Atau, seperti yang kita belajar di hujung sebelumnya, kita boleh menulis sebagai:


7. Input E-mel

Jika kami menggunakan jenis 'e-mel' untuk membentuk input, kami boleh mengarahkan penyemak imbas hanya membenarkan string yang mematuhi struktur alamat e-mel yang sah. Itu betul; pengesahan borang terbina dalam tidak lama lagi akan berada di sini! Kami tidak boleh 100% bergantung pada ini lagi, kerana alasan yang jelas. Dalam pelayar lama yang tidak memahami jenis 'e-mel' ini, mereka hanya akan kembali ke kotak teks biasa.

Pada masa ini, kita tidak boleh bergantung pada pengesahan penyemak imbas. Penyelesaian pelayan / pelanggan mesti masih dilaksanakan.

Ia juga harus diperhatikan bahawa semua penyemak imbas semasa sedikit dimenangi apabila ia menyentuh elemen dan atribut yang mereka lakukan dan tidak menyokongnya. Sebagai contoh, Opera seolah-olah menyokong pengesahan e-mel, hanya selagi atribut name ditentukan. Walau bagaimanapun, ia tidak menyokong atribut Ruang letak, yang kita akan belajar mengenai di hujung yang akan datang. Bottom line, tidak bergantung pada bentuk pengesahan ini lagi ... tetapi anda masih boleh menggunakannya!


8. ruang letak

Sebelum ini, kami terpaksa menggunakan sedikit JavaScript untuk mencipta Ruang letak untuk textboxes. Pasti, anda boleh menetapkan atribut nilai pada mulanya, bagaimana anda melihat patut, tetapi, sebaik sahaja pengguna memadamkan teks dan klik itu, input akan dibiarkan kosong lagi. Atribut pemegang tempat ini mengatasi masalah ini.

Sekali lagi, sokongan rendang di best di seluruh pelayar, Walau bagaimanapun, ini akan terus meningkat dengan setiap keluaran baru. Selain itu, jika penyemak imbas, seperti Firefox dan Opera, tidak menyokong atribut ruang letak pada masa ini, tidak ada bahaya yang dilakukan.


9. Storan setempat

Terima kasih kepada Storan setempat (tidak rasmi HTML5, tetapi dikategorikan dalam demi Kemudahan ini), kita boleh maju pelayar yang 'ingat', apa yang kita taip, walaupun selepas pelayar ditutup atau yang segar.

'localStorage menetapkan medan pada domain. Walaupun anda menutup penyemak imbas, membuka semula, dan kembali ke laman web, ia mengingati semua medan di localStorage. '
-QuirksBlog

Walaupun jelas tidak disokong oleh semua penyemak imbas, kita boleh menjangkakan kaedah ini berfungsi, terutamanya di Internet Explorer 8, Safari 4, dan Firefox 3.5. Ambil perhatian bahawa, untuk memberikan pampasan bagi pelayar yang lebih tua yang tidak mengenali Storan setempat, anda perlu terlebih dahulu menguji untuk menentukan sama ada wujud window.localStorage.

melalui http://www.findmebyip.com/litmus/

10. Header Semantik dan Footer

Belum lagi hari:

Divs, secara semula jadi, tidak mempunyai struktur semantik - walaupun selepas id digunakan. Kini, dengan HTML5, kami mempunyai akses kepada elemendan. Tanda di atas kini boleh digantikan dengan:

Ia sesuai sepenuhnya untuk mempunyai banyak tajuk dan pengaki dalam projek anda.

Cuba untuk tidak mengelirukan elemen ini dengan 'header' dan 'footer' laman web anda. Mereka hanya merujuk kepada bekas mereka. Justeru, ia masuk akal untuk meletakkan, sebagai contoh, maklumat meta di bahagian bawah blog post dalam unsur footer. Hal yang sama berlaku untuk header.


11. Ciri-ciri Tambahan HTML5

Ketahui lebih lanjut tentang ciri bentuk HTML5 yang lebih baik dalam huraian video pantas ini.


12. Internet Explorer dan HTML5

Sayangnya, Internet Explorer memerlukan sedikit perselisihan untuk memahami elemen HTML5 baru.

Semua elemen, secara lalai, mempunyai paparan sebaris.

Untuk memastikan elemen HTML5 yang baharu dapat diterangkan dengan betul sebagai unsur tahap blok, perlu saat ini untuk menyusunnya.

Malangnya, Internet Explorer masih akan mengabaikan stylings ini, kerana ia tidak tahu apa, sebagai contoh, elemen pengepala juga. Nasib baik, ada pembaikan yang mudah:

Cukup aneh, kod ini nampaknya mencetuskan Internet Explorer. Untuk semata-mata proses ini untuk setiap aplikasi baru, Remy Sharp mencipta skrip, biasanya dirujuk sebagai shiv HTML5. Skrip ini juga membetulkan beberapa isu percetakan juga.


13. hgroup*

* Sejak pertama penerbitan artikel ini, unsur hgroup telah menjadi sepenuhnya sudah lapuk dan mesti tidak boleh digunakan lagi.


14. dikehendaki atribut

Bentuk membolehkan untuk atribut diperlukan baru, yang menyatakan, secara semula jadi, sama ada input yang tertentu adalah diperlukan. Bergantung kepada keutamaan pengekodan anda, anda boleh mengisytiharkan atribut ini dalam salah satu daripada dua cara:

Atau, dengan pendekatan yang lebih tersusun.

Kaedah sama ada akan lakukan. Dengan Kod ini, dan dalam pelayar yang menyokong sifat ini, satu bentuk tidak dapat dikemukakan jika yang 'someInput' input adalah kosong. Inilah contoh cepat; Kami juga akan menambah atribut Ruang letak juga, kerana tidak ada sebab tidak ke.

Jika input ditinggalkan kosong, dan Borang dihantar, textbox akan diserlahkan.


15. autofokus atribut

Sekali lagi, HTML5 membuang keperluan untuk penyelesaian JavaScript. Jika input yang tertentu harus 'terpilih', atau fokus, secara lalai, kita kini boleh menggunakan atribut autofokus.

Menariknya cukup, walaupun secara peribadi saya cenderung untuk memilih XHTML yang lebih mendekati (menggunakan tanda petikan, dll), menulis ' autofokus = autofokus merasa ganjil. Oleh yang demikian, kita akan melekat dengan pendekatan kata kunci yang tunggal.


16. audio sokongan

Tidak lagi kita perlu bergantung kepada pemalam pihak ketiga untuk membuat audio. HTML5 kini menawarkan elemen Well, sekurang-kurangnya, akhirnya, kita tidak perlu bimbang tentang plugin ini. Pada masa ini, hanya pelayar paling terkini yang menawarkan sokongan untuk audio HTML5. Pada masa ini, masih merupakan amalan yang baik untuk menawarkan beberapa bentuk keserasian ke belakang.

Mozilla dan Webkit sepenuhnya Jangan bersama-sama lagi, apabila ia datang kepada audio format. Firefox akan mahu melihat satu fail .ogg, manakala Webkit pelayar akan bekerja saja dengan sambungan .mp3 biasa. Ini bermakna bahawa, sekurang-kurangnya sekarang, anda perlu mencipta dua versi audio.

Apabila Safari memuatkan halaman, ia tidak akan mengenali format .ogg, dan akan melangkauinya dan beralih ke versi mp3, dengan sewajarnya. Sila ambil perhatian bahawa IE, satu yang biasa, tidak menyokong ini dan Opera 10 dan rendah hanya boleh bekerja dengan fail-fail .wav.


17. Sokongan Video

Sama seperti unsur yang kita juga, sudah tentu, mempunyai HTML5 video serta dalam pelayar baru! Malah, baru-baru, YouTube mengumumkan HTML5 yang baru video embed video mereka, untuk pelayar yang menyokongnya. Malangnya, sekali lagi, kerana HTML5 spec tidak menentukan codec khusus untuk video, ia ditinggalkan kepada pelayar web untuk membuat keputusan. Manakala Safari dan Internet Explorer 9 boleh diharapkan untuk menyokong video dalam format H.264 (yang kilat pemain boleh bermain), Firefox dan Opera akan melekat dengan format Theora dan Vorbis sumber terbuka. Oleh yang demikian, apabila memaparkan HTML5 video, anda perlu menawarkan kedua-dua format.

Chrome boleh memaparkan video yang dikodkan dengan betul dalam format 'ogg' dan 'mp4'.

Terdapat beberapa perkara yang diperhatikan di sini.

  1. Kita secara teknikal tidak diperlukan untuk mengeset atribut jenis; Walau bagaimanapun, jika kita tidak, pelayar perlu memikirkan jenis itu sendiri. Simpan beberapa jalur lebar, dan mengisytiharkan diri anda.
  2. Tidak semua pelayar memahami video HTML5. Di bawah elemen-elemen sumber, kita boleh sama ada menawarkan pautan muat turun, atau menerapkan versi Flash video sebaliknya. Terserah anda.
  3. Atribut kawalan dan pramuat akan dibincangkan dalam dua petua yang akan datang.

18. Video Pramuat

Atribut yang Pramuat tidak betul-betul apa anda dapat menduga. Walaupun, dengan kata itu, anda harus terlebih dahulu memutuskan sama ada atau tidak anda mahu penyemak imbas pramuat video tersebut. Ianya diperlukan? Mungkin, jika pengunjung mengakses halaman, yang khusus dibuat untuk memaparkan video, anda harus pasti preload video dan simpan pengunjung sedikit masa menunggu. Video boleh dimuatkan dengan menetapkan preload = 'preload', atau hanya dengan menambah pramuat. Saya lebih suka penyelesaian yang kedua; memang agak kurang berlebihan.


19. Kawalan Display

Jika anda bekerja bersama-sama dengan setiap satu daripada Petua dan teknik-teknik ini, anda mungkin sedar bahawa, dengan kod di atas, video di atas nampaknya hanya imej, tanpa sebarang kawalan. Memberi mainan ini menguasai, kita mesti menentukan atribut kawalan dalam unsur video.

Sila ambil perhatian bahawa setiap penyemak imbas menjadikan pemainnya berbeza dari satu sama lain.


20. Ekspresi Biasa

Berapa kerap anda mendapati diri anda menulis beberapa ekspresi keributan untuk mengesahkan kotak teks tertentu. Terima kasih kepada atribut corak baru, kita boleh memasukkan ekspresi biasa terus ke penanda kami.

Jika anda sudah biasa dengan ungkapan biasa, anda akan sedar bahawa corak ini: [A-Za-z] {4,10} hanya menerima huruf besar dan huruf kecil. Rentetan ini juga mesti mempunyai sekurang-kurangnya empat aksara, dan maksimum sepuluh.

Perhatikan bahawa kita mula menggabungkan semua sifat hebat baru ini!

Jika ungkapan biasa asing kepada anda, rujuk di sini.


21. Mengesan Sokongan untuk Atribut

Apakah sifat-sifat ini yang baik jika kita tidak mempunyai cara untuk menentukan sama ada pelayar mengenali mereka? Nah, titik baik; tetapi ada beberapa cara untuk memikirkannya. Kita akan membincangkan dua. Pilihan pertama adalah untuk menggunakan Perpustakaan Modernizr yang cemerlang. Selain itu, kita boleh mencipta dan membedah elemen ini untuk menentukan apa pelayar yang mampu. Sebagai contoh, dalam contoh terdahulu kami, jika kami ingin menentukan sama ada penyemak imbas boleh melaksanakan sifat corak, kami boleh menambahkan sedikit JavaScript ke halaman kami:

Malah, ini adalah kaedah popular untuk menentukan keserasian pelayar. Perpustakaan jQuery menggunakan tipu helah ini. Di atas, kita sudah mewujudkan elemen input yang baru, dan menentukan sama ada atribut corak diiktiraf dalam. Jika ia, penyemak imbas menyokong fungsi ini. Jika tidak, sudah tentu ia tidak.

Perlu diingat bahawa ini bergantung pada JavaScript!


22. Mark Element

Fikirkan elemen sebagai penyapu. Rentetan dibalut dalam tag ini hendaklah berkaitan dengan tindakan-tindakan semasa pengguna. Sebagai contoh, jika saya mencari 'membuka fikiran' beberapa blog, saya kemudian boleh menggunakan beberapa JavaScript untuk membalut setiap kejadian yang berlaku ini rentetan dalam tag .


23. Kapan menggunakan <div>

Sesetengah daripada kita pada awalnya mempersoalkan apabila kita harus menggunakan divs biasa. Memandangkan kami mempunyai akses kepada tajuk, artikel, Seksyen, dan pembawah, ada yang pernah satu masa untuk menggunakan a...div? Benar-benar.

Pada divs perlu digunakan apabila terdapat sebarang elemen yang lebih baik untuk kerja.

Sebagai contoh, jika anda mendapati bahawa anda perlu untuk Balut blok kod dalam elemen selubung yang khas untuk meletakkan kandungan,yang masuk akal. Walau bagaimanapun, jika anda sebaliknya anda bungkusan blog post baru, atau, mungkin, senarai pautan di kaki anda, pertimbangkan untuk menggunakanini dan unsur-unsur, masing-masing. Mereka lebih semantik.


24. apa yang perlu dengan serta-merta mula menggunakan

Dengan semua perbincangan tentang HTML5 tidak lengkap hingga 2022, ramai orang mengabaikannya sepenuhnya - yang merupakan kesilapan besar. Malah, terdapat beberapa ciri HTML5 yang boleh kita gunakan dalam semua projek kami sekarang! Kod yang lebih mudah, bersih selalu menjadi hal yang baik. Dalam video petua pantas hari ini, saya akan menunjukkan anda beberapa pilihan.


25. Apakah yang Tidak HTML5

Orang boleh dimaafkan kerana mengandaikan bahawa peralihan JavaScript yang kurang hebat dikumpulkan ke HTML5 yang merangkumi semua. Hei--Apple walaupun telah sengaja dinaikkan pangkat idea ini. Bagi bukan pemaju, siapa yang peduli; ia adalah cara mudah untuk merujuk kepada piawaian web moden. Walau bagaimanapun, bagi kita, walaupun ia mungkin hanya menjadi semantik, ianya penting untuk memahami apa yang ada tidak HTML5.

  1. SVG: Tidak HTML5. Ianya berumur sekurang-kurangnya lima tahun.
  2. CSS3: Bukan HTML5. Ia ... CSS.
  3. Geolokasi: Tidak HTML5.
  4. Penyimpanan Pelanggan: Bukan HTML5. Ia adalah pada satu ketika, tetapi telah dibuang dari spec, disebabkan oleh hakikat bahawa ramai bimbang bahawa, secara keseluruhannya, adalah menjadi terlalu rumit. Ia kini mempunyai spesifikasi tersendiri.
  5. Soket web: Tidak HTML5. Sekali lagi, dieksport ke spesifikasi sendiri.

Tanpa mengira perbezaan berapa banyak anda perlukan, semua teknologi ini boleh dikumpulkan menjadi tindanan web moden. Malah, banyak spesifikasi bercabang ini masih diuruskan oleh orang yang sama.


26. Atribut Data

Kami kini secara rasmi mempunyai sokongan untuk atribut tersuai dalam semua elemen HTML. Walaupun, sebelum ini, kita masih boleh lari dengan perkara-perkara seperti:

... pengesahan akan menimbulkan kekecohan! Tetapi sekarang, selagi kita mengucapkan atribut khusus kami dengan 'data,' kami boleh secara rasmi menggunakan kaedah ini. Jika anda pernah mendapati diri anda menyertakan data penting kepada sesuatu seperti atribut class, mungkin untuk kegunaan JavaScript, ini akan menjadi satu bantuan yang besar!

HTML Snippet

Dapatkan Nilai Atribut Tersuai

Ia juga boleh digunakan dalam CSS anda, seperti contoh perubahan teks CSS yang bodoh dan lumpuh ini.

Anda boleh melihat demo kesan di atas pada JSBIN.


27. Unsur Output

Seperti yang mungkin anda fikirkan, elemen output digunakan untuk memaparkan beberapa jenis pengiraan. Sebagai contoh, jika anda ingin memaparkan koordinat kedudukan tetikus, atau jumlah siri nombor, data ini harus dimasukkan ke dalam elemen output.

Sebagai contoh mudah, mari masukkan jumlah dua angka ke dalam output kosong dengan JavaScript, apabila submit serah ditekan.

Cubalah untuk diri sendiri.

Sila ambil perhatian bahawa sokongan untuk elemen output masih agak besar. Pada masa penulisan ini, saya hanya boleh mendapatkan Opera untuk bermain bagus. Ini ditunjukkan dalam kod di atas. Jika penyemak imbas tidak mengenali unsur tersebut, pelayar hanya akan memaklumkan notis memaklumkan anda sebanyak. Jika tidak, ia mendapati output dengan nama 'jumlah' dan menetapkan nilainya kepada 15, dengan itu, selepas borang telah dihantar.

Unsur ini juga boleh menerima atribut for, yang mencerminkan nama elemen yang berkaitan dengan output, serupa dengan cara label berfungsi.


28. Buat Slider dengan Input Range

HTML5 memperkenalkan jenis input range yang baru.

Terutama, ia boleh menerima min, max, step, dan atribut value, antara lain. Walaupun Opera hanya menyokong jenis input sekarang sepenuhnya, ia akan menjadi hebat apabila kita benar-benar boleh menggunakannya!

Untuk demonstrasi yang cepat, mari kita bincangkan ukuran yang akan membolehkan pengguna memutuskan bagaimana 'Total Recall' mengagumkan. Kami tidak akan membina penyelesaian pengundian dunia sebenar, tetapi kami akan mengkaji bagaimana ia dapat dilakukan dengan mudah.

Langkah 1: Tandakan

Pertama, kita buat mark-up kami.

Perhatikan bahawa, sebagai tambahan untuk menetapkan nilai min dan max, kami sentiasa dapat menentukan step untuk setiap peralihan. Jika step ditetapkan kepada 1, maka akan ada 10 nilai untuk dipilih. Kami juga mengambil kesempatan daripada elemen output baru yang kami pelajari dalam hujung sebelumnya.

Langkah 2: CSS

Seterusnya, kami akan menyusunnya sedikit sahaja. Kami juga akan menggunakan :before dan :after memaklumkan kepada pengguna apa nilai min dan max yang ditetapkan. Terima kasih banyak kepada Remy dan Bruce kerana mengajar saya helah ini, melalui 'Memperkenalkan HTML5.'

Di atas, kami membuat kandungan sebelum dan selepas input julat, dan menjadikan nilai mereka sama dengan nilai min dan max, masing-masing.

Langkah 3: JavaScript

Akhir sekali, kami:

  • Tentukan jika pelayar semasa mengetahui apa julat input. Jika tidak, kami memberi amaran kepada pengguna bahawa demo tidak akan berfungsi.
  • Kemas kini elemen output secara dinamik, sebagai pengguna memindahkan slider.
  • Dengarkan apabila pengguna melancarkan slider, ambil nilai, dan simpannya ke storan tempatan.
  • Kemudian, kali seterusnya pengguna menyegarkan halaman, julat dan output akan ditetapkan secara automatik kepada apa yang mereka pilih terakhir.

Bersedia untuk dunia sebenar? Mungkin belum lagi; tetapi ia masih menyeronokkan untuk dimainkan dan bersedia untuk!

Muat turun kod sumber, dan cuba untuk diri sendiri. Tetapi gunakan Opera.


Terima kasih untuk membaca! Kami telah banyak membahas, tetapi masih tercalar permukaan apa yang mungkin dengan HTML5. Saya harap ini berfungsi sebagai buku panduan yang berguna!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.