Tutorial membuat halaman web dengan kemahiran tutorial HTML5.0_html5

Bergantung pada siapa yang anda tanya, HTML 5 sama ada langkah besar seterusnya ke arah mencipta web yang lebih semantik, atau ia hanya satu teg dan penanda yang tidak lengkap dalam kesusahan.

Masalah bagi kedua-dua belah hujah ialah sangat sedikit tapak yang menggunakan HTML 5 dalam persekitaran semula jadi, jadi penyelesaian teoritis kepada masalah yang diiktiraf sekarang masih belum diuji.

Sebenarnya, tidak sukar untuk melihat manfaat dan potensi perangkap alat penanda web generasi akan datang.

Kandungan 1. Apakah yang berbeza tentang HTML 5?

2 Akhir sekali, jenis dokumen yang boleh diingati oleh sesiapa sahaja

3. Struktur semantik paling asas

1.

2.

3.

1.

2.

3.

4. Letakkan mereka bersama-sama

5. Gaya penulisan untuk elemen baharu

6. Serasi dengan pelayar lama

7 Sekarang anda boleh menggunakan HTML 5, tetapi adakah anda akan menggunakannya?

Apakah yang berbeza tentang HTML 5? Pertama sekali, apakah yang kita ungkapkan melalui HTML 5? Mula-mula, apakah yang kami maksudkan dengan HTML 5 Secara teori, kami menyatakan segala-galanya - teg struktur semantik baharu, seperti kanvas atau spesifikasi API storan luar talian dan teg semantik sebaris baharu. Walau bagaimanapun, kami mengehadkan sebab sebenar (PS: isu sokongan penyemak imbas) kepada teg struktur sahaja. kanvas, storan luar talian, video tempatan atau API geolokasi semuanya hebat, namun ia masih belum disokong secara seragam oleh semua penyemak imbas.

"Tetapi tunggu" anda katakan, "kebanyakan penyemak imbas juga tidak menyokong elemen struktur baharu!" Memang benar, tetapi sebahagian besar daripada mereka dengan senang hati akan menerima apa sahaja yang anda mahu buat Label. Malah IE6 boleh mengendalikan tab baharu, walaupun jika anda ingin menggayakannya dengan CSS, anda memerlukan sedikit bantuan daripada JavaScript.

Satu perkara yang anda perlu ingat semasa menggayakan teg baharu ialah teg yang tidak diketahui tidak mempunyai gaya lalai dalam kebanyakan penyemak imbas. Ia juga dianggap sebagai elemen peringkat baris. Namun, memandangkan kebanyakan teg baharu HTML 5 boleh dibina, kami akan memberi mereka gelagat elemen peringkat blok. Penyelesaiannya adalah untuk memastikan anda memasukkan display:block dalam gaya CSS anda.

Untuk membantu memahami beberapa perkara baharu dalam HTML 5 hari ini, mari mulakan perniagaan sekarang dan mula menggunakan beberapa elemen struktur baharu.

Akhir sekali, jenis dokumen yang boleh diingati oleh sesiapa sahaja Perkara pertama yang perlu kita lakukan untuk mencipta dokumen HTML 5 ialah menggunakan jenis dokumen baharu. Sekarang, jika anda mengingati dengan jelas jenis dokumen HTML 4 atau XHTML 1.x, anda adalah lelaki yang lebih nakal daripada kami. Setiap kali kami membuat halaman baharu, kami perlu membuka fail lama, memotong dan menampal definisi jenis dokumen.

Ini sangat menyakitkan, dan mengapa kami menyukai jenis dokumen HTML 5 baharu . Adakah anda bersedia? Dia muncul:

Ia tidak akan terlalu sukar untuk diingati. Mudah dan mudah difahami. Tidak sensitif huruf besar.

Ideanya adalah untuk menghentikan versi HTML dan menjadikan keserasian ke belakang lebih mudah. Sama ada ia berjaya dalam jangka panjang adalah perkara lain, tetapi sekurang-kurangnya ia menjimatkan purata masa menaip anda.

Struktur semantik paling asas Kami telah mentakrifkan halaman kami sebagai dokumen HTML 5. Setakat ini, begitu baik. Sekarang, apakah sebenarnya label baharu yang kami dengar ini?

Sebelum kita mendalami teg baharu, fikirkan tentang struktur purata halaman web anda, seperti ini:

Ini bagus untuk tujuan pembentangan, tetapi bagaimana jika kita ingin mengetahui sesuatu tentang kandungan elemen halaman?

Dalam contoh di atas, kami menambahkan ID pada semua div struktur kami. Ini adalah perkara biasa di kalangan pereka yang berpengetahuan. Tujuannya adalah dua kali ganda, pertama, ID menyediakan sauh yang boleh digunakan untuk menggunakan gaya pada perenggan tertentu halaman, dan kedua, ID bertindak sebagai struktur pseudo-semantik asas. Penghurai yang canggih akan melihat atribut ID teg dan cuba meneka maksudnya, tetapi sukar apabila nama ID berbeza untuk setiap tapak.

Di sinilah teg struktur baharu masuk.

Menyedari bahawa ID ini telah menjadi satu konvensyen, pencipta HTML 5 melangkah lebih jauh dan menjadikan beberapa elemen ini sebagai teg mereka sendiri. Berikut ialah ringkasan ringkas tentang teg baharu yang berkuat kuasa dalam HTML 5:

Teg kepala direka bentuk sebagai bekas untuk maklumat pengenalan tentang bab atau keseluruhan halaman web. Teg boleh mengandungi apa-apa sahaja daripada logo atau slogan biasa anda di bahagian atas kebanyakan halaman, kepada slogan dan baris pembuka yang memperkenalkan bab. Jika anda masih menggunakan dalam halaman anda, anda boleh menggunakan

Elemen nav cukup jelas, ia adalah elemen navigasi anda. Sudah tentu terdapat beberapa perdebatan tentang apa yang dikira sebagai navigasi Terdapat navigasi tapak asas, tetapi dalam beberapa kes mungkin terdapat juga elemen navigasi halaman. Pencipta HTML5, WHATWG, telah mengubah suai penjelasan untuk menunjukkan cara ia boleh digunakan dua kali pada halaman yang sama.

Untuk mendapatkan maklumat lanjut tentang nav dan perdebatan hangat tentang HTML5, lihat artikel Jeffrey Zeldman tentang elemen nav .

Jika anda masih menggunakan teg untuk mengandungi navigasi halaman anda, anda boleh menggunakan teg

Bahagian mungkin merupakan teg baharu yang paling tidak jelas. Menurut takrif HTML 5 , bab ialah koleksi topik kandungan, biasanya selepas teg pengepala dan sebelum teg pengaki. Walau bagaimanapun, bahagian boleh bersarang antara satu sama lain jika perlu.

Dalam contoh kami di atas, div yang ditandakan dengan "kandungan" ialah pilihan yang baik untuk menjadi bahagian. Di samping itu, dalam bahagian itu, kita boleh menambah bahagian mengikut kandungan.

Bertentangan dengan ulasan WHATWG, elemen artikel boleh mengandungi "sekeping kandungan yang membentuk bahagian berasingan dokumen atau tapak; contohnya, majalah atau artikel berita, atau entri blog." Ingat bahawa halaman boleh mempunyai berbilang teg artikel; contohnya, halaman utama blog mungkin mempunyai sepuluh artikel terkini, setiap satunya terkandung dalam teg artikel. Artikel juga boleh dibahagikan kepada beberapa perenggan dengan menggunakan teg bahagian, namun anda perlu berhati-hati semasa merancang struktur anda, jika tidak, anda boleh dengan mudah mendapat beberapa teg yang hodoh.

Satu lagi teg yang agak tidak jelas, elemen tepi digunakan untuk kandungan yang "tidak berkaitan dengan kandungan aliran isi utama yang membentuk dokumen." Ini bermakna ulasan tambahan, nota kaki sebaris, petikan, anotasi atau kandungan bar sisi yang lebih tipikal seperti yang anda lihat di sebelah kanan artikel ini. Menurut ulasan WHATWG, nampaknya boleh digunakan dalam semua situasi ini, walaupun petikan dalam bar sisi anda sangat berbeza daripada awan teg.

Tiada siapa yang mengatakan HTML 5 sempurna!

Kegunaan Footer juga harus jelas, kecuali mungkin anda tidak tahu bahawa anda boleh mempunyai berbilang footer. Dalam erti kata lain, sebagai tambahan kepada subskrip utama yang biasanya terdapat di bahagian bawah kebanyakan halaman, perenggan juga boleh mengandungi subskrip. Letakkan mereka bersama

Mari kita tulis semula contoh asal kami menggunakan tag baharu:

Sangat jelas dan mudah difahami, bukan? Beberapa nota: Kami boleh memasukkan tajuk Artikel Saya kami dalam teg pengepala. Saya tidak melakukan ini kerana elemen h1 sudah menyampaikan maksud tajuk, tetapi jika anda juga mempunyai tarikh penerbitan, baris kecil atau data lain di bahagian atas artikel anda, menambahkan teg bekas pengepala pada set teg ialah pilihan yang baik.

Juga ambil perhatian bahawa kami boleh menambah elemen pengaki kedua di bawah elemen artikel untuk memasukkan navigasi halaman, artikel berkaitan atau kandungan lain.

Tulis gaya untuk teg baharu Dalam kebanyakan penyemak imbas, apa yang anda perlu lakukan hanyalah menentukan gaya anda seperti yang biasa anda lakukan untuk menggunakan helaian gaya pada tab baharu. Tetapi sila pastikan anda menambah peraturan display:block pada setiap elemen, tidak kira apa pun, mulai sekarang. Lama kelamaan, apabila penyemak imbas mula menyeragamkan dan menyokong elemen baharu, itu tidak perlu.

Sebagai contoh, mari gunakan beberapa gaya pada pengepala kami:

Ingat, anda masih boleh menambah atribut kelas dan ID pada teg ini. Jadi, jika anda ingin menggayakan navigasi secara berasingan, anda boleh menambahkan kelas atau gaya pada teg dengan mudah, seperti ini:

Kemudian anda boleh menggunakan gaya:

Serasi dengan penyemak imbas lama Tetapi tunggu, bagaimana dengan IE? Gaya ini tidak berfungsi di bawah IE6 sama sekali. Jika anda masih perlu menyokong pelayar lama seperti IE6, berikut ialah penyelesaiannya. IE6 menghuraikan dan memaparkan teg ini dengan baik, tetapi anda tidak boleh menetapkan sebarang CSS padanya. Penyelesaiannya adalah dengan menggunakan sedikit JavaScript.

Kami hanya perlu meminta IE untuk menggayakan teg HTML 5 yang kami cipta menggunakan kaedah createElement. Tambahkan ini dalam teg kepala fail HTML 5 anda. Sebagai alternatif, anda boleh menyimpannya dalam fail tertentu dan memasukkannya dengan cara itu.

Saya tahu apa yang anda fikirkan: "Saudara, anda langsung tidak menentukan jenis MIME untuk teg skrip itu."

Anda tidak perlu melakukan perkara ini dalam HTML 5 sama sekali. Dalam HTML 5, semua skrip diandaikan sebagai type="text/javascript", jadi tidak perlu mengeruhkan tag skrip anda dengan atribut (melainkan skrip anda bukan JavaScript).

Ini menyelesaikan masalah dengan IE, tetapi kami tidak keluar dari hutan. Ternyata terdapat pepijat dalam enjin rendering Gecko yang menyebabkan beberapa versi Firefox 2 dan Camino tersekat pada tab ini.

Terdapat dua cara untuk mengendalikan pepijat ini, kedua-duanya tidak sesuai. Untuk butiran lanjut, sila lihat artikel ini oleh HTML5doctor . Artikel ini juga disertakan dengan skrip berguna yang membolehkan semua elemen HTML 5.

Perlu diingat bahawa walaupun penggunaan Firefox 2 telah menurun dengan cepat di bawah 10% daripada semua trafik tapak, mengabaikan pepijat ini mungkin masih bergantung pada pelawat tapak anda.

Kini anda boleh menggunakan HTML 5, tetapi adakah anda akan menggunakannya? Jawapan ringkasnya ialah: kami lakukan.

Perkara yang lebih rumit ialah: ia bergantung pada tapak. Jika anda dituduh membuat semula halaman utama CNN, anda mungkin akan menentang sedikit sehingga sokongan penyemak imbas menjadi lebih baik. Tetapi jika anda ingin merombak blog anda, kami menyokong anda. Berikut ialah beberapa pemalam WordPress yang boleh membantu anda jika anda menggunakan sistem penerbitan yang begitu popular. Berikut ialah tema HTML 5 yang dicipta oleh Jeff Starr.

Selain itu, cuba Galeri HTML 5 yang memfokuskan tapak dan semak kod sumber untuk melihat perkara yang telah mereka lakukan.

Namun, jika kekurangan IE menghalang anda, pertimbangkan ini: malah Google menggunakan jenis dokumen HTML 5 pada halaman carian utama mereka. Walaupun anda tidak menggunakan semua teg struktur baharu, anda sekurang-kurangnya boleh memanfaatkan pengisytiharan skrip ringkas dan beberapa teg semantik bukan struktur yang akan kami bincangkan pada masa akan datang.