22 kemahiran asas tentang HTML5 (tutorial grafik)_html5 kemahiran tutorial
WBOYasal
2016-05-16 15:51:121467semak imbas
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.
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:
< img alt="about image" src="path/to/image">
Ini adalah imej sesuatu yang menarik >< /figcaption>
3 Takrifkan semula Tidak lama dahulu, saya menggunakan < Teg kecil> 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>: </strong><br><br> <div class="msgheader"><div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));">Salin kod<u></u></span>Kod adalah seperti berikut:</div></div>
<div class="msgborder" id="phpcode68"><link rel="stylesheet" type=text/css href= "path/ to/stylesheet.css"><br> <script type="text/javascript" src="path/to/script.js"></script>
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:
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
