22 kemahiran asas tentang HTML5 (tutorial grafik)_html5 kemahiran tutorial

Teknologi web berkembang begitu pantas sehingga jika anda tidak mengikuti perkembangan zaman, anda akan tersingkir. Oleh itu, untuk menghadapi HTML5 yang akan datang, artikel ini meringkaskan 22 kemahiran asas HTML5 saya harap ia akan membantu anda untuk mempelajari HTML5 dengan lebih baik.
1. Pengisytiharan Doctype Baharu
Pengisytiharan XHTML adalah terlalu panjang.

Salin kod

Kod tersebut adalah seperti berikut:

WAM "-/ /W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 Pengisytiharan Doctype sangat pendek Saya percaya anda akan dapat mengingatinya serta-merta selepas melihat pengisytiharan ini Anda tidak perlu membazirkan sel otak anda untuk mengingati pengisytiharan XHTML Doctype yang panjang dan agak tidak normal.

Pengisytiharan DOCTYPE ringkas HTML5 membenarkan penyemak imbas moden seperti Firefox dan Chrome serta penyemak imbas seperti IE6/7/8 memasuki mod piawaian (kuasi-). Anda mungkin terkejut bahawa IE6 / 7 sebenarnya boleh menyokong HTML5 Doctype Sebenarnya, IE akan memasuki mod standard selagi doctype mematuhi format ini.
2.

tag

Lihat kod mudah berikut:

Salin kod

Kodnya adalah seperti berikut:

imej Marikh .< ;/h6>

Malangnya, teg h6 di sini nampaknya tiada kaitan dengan teg img, dan semantiknya tidak cukup jelas. HTML5 menyedari perkara ini dan menggunakan teg

Apabila

digunakan dalam kombinasi dengan teg

Salin kod

Kod tersebut adalah seperti berikut:

Ini adalah imej sesuatu yang menarik >

3 Takrifkan semula
Tidak lama dahulu, saya menggunakan untuk membuat sari kata yang berkaitan dengan logo anda. Walau bagaimanapun, teg telah ditakrifkan semula dalam HTML5 untuk menjadikannya lebih semantik. Saiz fon laman web tersebut.
4. Alih keluar atribut jenis Javascript dan tag CSS
Biasanya anda akan menambah atribut jenis pada dan <script>: </script>

Salin kodKod adalah seperti berikut:

Dalam HTML5, atribut jenis tidak lagi diperlukan kerana ia kelihatan agak berlebihan dengan mengalih keluarnya boleh menjadikan kod itu lebih ringkas.

Salin kodKodnya adalah seperti berikut:

5 . Sama ada hendak menggunakan petikan berganda
Ini agak mengelirukan, HTML5 bukan XTHML, anda boleh menghilangkan petikan berganda dalam teg. Saya percaya bahawa kebanyakan rakan seperjuangan, termasuk saya, digunakan untuk menambah petikan berganda, kerana ia menjadikan kod itu kelihatan lebih standard. Walau bagaimanapun, ia bergantung kepada keutamaan peribadi anda sama ada menggunakan petikan berganda atau tidak.

Salin kodKodnya adalah seperti berikut:

mulakan reaktor.

6. Jadikan kandungan web boleh diedit

7. Kotak input e-mel
Input baharu telah ditambahkan dalam HMTL5 The atribut e-mel kotak boleh mengesan sama ada kandungan input mematuhi format penulisan e-mel Fungsi ini menjadi lebih dan lebih berkuasa Sebelum HTML5, ia hanya dapat dikesan oleh JS. Walaupun pengesahan borang terbina dalam akan menjadi kenyataan tidak lama lagi, banyak penyemak imbas belum lagi menyokong atribut ini dan hanya akan menganggapnya sebagai kotak input teks biasa.

Salin kod

Kod tersebut adalah seperti berikut:

email:

submit form

Setakat ini, tidak disokong walaupun oleh pelayar moden Ini atribut, jadi atribut ini masih tidak boleh dipercayai buat masa ini.
8. Pemegang tempat
Pemegang tempat dalam kotak teks (lihat kesan kotak carian pada blog ini) membantu untuk meningkatkan pengalaman pengguna Sebelum ini, kami hanya boleh bergantung pada JS untuk mencapai menduduki Untuk kesan pemegang tempat, pemegang tempat atribut atribut ditambah dalam HTML5.

Salin kod

Kod adalah seperti berikut:

Begitu juga, penyemak imbas moden arus perdana tidak menyokong atribut ini dengan baik. Pada masa ini hanya Chrome dan Safari menyokong atribut ini, Firefox dan Opera tidak menyokong sifat ini.

9 Storan setempat
Fungsi storan setempat HTML5 membolehkan penyemak imbas moden untuk "mengingat" perkara yang kami masukkan, walaupun penyemak imbas ditutup dan dimuat semula. Walaupun sesetengah penyemak imbas tidak menyokong fungsi ini, IE8, Safari 4, dan Firefox 3.5 masih menyokong fungsi ini. Anda boleh mengujinya.

10 Pengepala dan pengaki yang lebih semantik
Kod berikut tidak akan wujud lagi dalam HTML5

Salin kod

Kod adalah seperti berikut:

...

...

Biasanya kami mentakrifkan div untuk pengepala dan pengaki, dan kemudian tambah id lain , tetapi teg

dan

boleh digunakan terus dalam HTML5, jadi kod di atas boleh ditulis semula sebagai:

Salin kod

Kodnya adalah seperti berikut:

...

.. .

Berhati-hati agar tidak mengelirukan kedua-dua teg ini dengan pengepala dan pengaki tapak web, ia hanyalah bekas yang mewakilinya.
11. Sokongan IE untuk HTML5
Sokongan semasa penyemak imbas IE untuk HTML5 adalah tidak baik, yang juga merupakan penghalang utama untuk mempopularkan HTML5 yang lebih pantas masih sangat baik.
IE menghuraikan semua teg baharu dalam HTML5 ke dalam elemen sebaris, tetapi sebenarnya ia adalah elemen peringkat blok, jadi adalah perlu untuk menentukan gaya untuknya:

Salin kod

Kod adalah seperti berikut:

pengepala, pengaki, artikel, bahagian, navigasi, menu, hkumpulan {
paparan: blok ;
}

Walaupun begitu, IE masih tidak dapat menghuraikan teg HTML5 baharu ini pada masa ini, anda perlu menggunakan Javascript untuk menyelesaikan masalah ini:

Salin kod

Kod adalah seperti berikut:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup") ;
document.createElement("nav");
document.createElement("menu");

Anda boleh menggunakan sekeping kod Javascript ini untuk membetulkan IE Parse yang lebih baik HTML5

Salin kod

Kodnya adalah seperti berikut:

12 >Ini Serupa dengan petua kedua. Jika anda menggunakan tag h1 dan h2 untuk mewakili nama dan sari kata tapak web masing-masing, ini akan menjadikan kedua-dua tajuk yang berkait rapat sifatnya tidak berkaitan. Pada masa ini, anda boleh menggunakan teg

untuk menggabungkannya, supaya kod itu menjadi lebih semantik.

Salin kodKodnya adalah seperti berikut:

Ingat Halaman Peminat

;

13 Atribut yang diperlukan

Kakitangan hadapan mesti telah melakukan banyak projek pengesahan bentuk, salah satunya ialah. sangat penting Terdapat beberapa kotak input yang mesti diisi, jadi anda perlu menggunakan Javascript untuk menyemaknya. Dalam HTML5, atribut "mesti diisi" baharu ditambahkan: diperlukan. Terdapat dua cara untuk menggunakan atribut yang diperlukan Kaedah kedua adalah lebih berstruktur, manakala yang pertama lebih ringkas.

Salin kod

Kod adalah seperti berikut:

Dengan atribut ini, borang boleh diserahkan Pengesahan menjadi lebih mudah, lihat contoh mudah di bawah:

Salin kod

Kod adalah sebagai berikut:

nama anda:

Go

Jika kotak input kosong, borang tidak akan berjaya dihantar.
14 Dapatkan fokus secara automatik

Begitu juga, HTML5 tidak lagi memerlukan Javascript untuk menyelesaikan masalah mendapatkan fokus secara automatik untuk kotak input Jika kotak input harus dipilih atau mendapatkan fokus input, HTML5 menambah autofokus atribut baharu:

Salin kod

Kodnya adalah seperti berikut:

< ;input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">

autofokus juga boleh ditulis sebagai "autofocus=autofocus ” , ini nampaknya lebih standard, ini bergantung pada pilihan peribadi anda.

15. Sokongan main balik audio

HTML5 menyediakan teg