Inovasi HTML5 dan keindahan kemahiran tutorial structure_html5
HTML 5 adalah seperti revolusi, yang sedang berjalan dengan rancak dalam era pasca-Web2.0.
Apa itu HTML 5, saya tidak perlu pergi ke butiran di sini. Bagi inovasi HTML 5 pula, mengikut pemahaman saya, ia boleh diringkaskan sebagai sistem tag dengan semantik yang jelas, sokongan media kaya yang memudahkan kerumitan, teknologi penyimpanan data tempatan yang ajaib, animasi yang kaya (kanvas) yang tidak memerlukan plug-in. , dan sokongan API yang berkuasa. Ringkasnya, HTML 5 menjadikan interaksi manusia-komputer lebih selesa dan mesra pengguna. Kekurangan sokongan sebelum ini untuk aplikasi media kaya dan storan asli tidak lagi menjadi masalah untuk penyemak imbas. Menolak Web daripada platform kandungan kepada platform aplikasi piawai dan menyatukan piawaian pelbagai kem platform adalah niat asal revolusi HTML 5. Dalam artikel ini, saya akan memperkenalkan beberapa idea dan menerangkan salah satu inovasi HTML 5: struktur yang lebih jelas dan ringkas dengan semantik.
Mulakan dengan "kepala" Kod pengepala XHTML standard hendaklah seperti ini:
Adakah anda akan menghafalnya dengan hafalan? Sudah tentu tidak! Kita hanya perlu salin dan tampal secara mekanikal.
Lihat rupa pengepala HTML 5 standard:
Salin kod
Ia lebih rumit daripada mudah, saya tidak perlu mengatakannya. Ya, pengepala HTML 5 boleh jadi begitu ringkas dan mudah diingati! Juga, huruf besar, petikan dan garis miring ke belakang sebelum kurungan sudut terakhir boleh diabaikan.
Kenapa boleh longgar sangat? Malah, jika anda menghantar XHTML sebagai teks/html, penyemak imbas boleh menghuraikannya dengan baik, dan penyemak imbas tidak mengambil berat tentang sintaks kod tersebut. Oleh itu, HTML 5 adalah metafizik Ia mungkin melanggar beberapa piawaian asal, tetapi ia masih boleh berfungsi dengan baik dalam pelayar.
Sudah tentu, untuk kemudahan bantuan pasukan dan penyelenggaraan seterusnya, kami harus tetap menyatukan gaya penulisan yang anda suka, seperti:
Salin kod
;
Selain itu, walaupun HTML 5 tidak disokong oleh semua penyemak imbas pada masa ini, ini boleh menjimatkan lebih daripada 100 bait (untuk tapak dengan lebih daripada satu juta PV harian, ia boleh menjimatkan banyak trafik) ) kepala kini sangat serasi. Jika anda telah meneliti mod penghuraian penyemak imbas, anda harus tahu bahawa halaman itu akan mencetuskan mod pelik jika doctype tidak ditakrifkan, tetapi selagi ditakrifkan, penyemak imbas boleh menghuraikan halaman dalam mod standard, dan Ada tidak perlu menyatakan jenis DTD tertentu.
Sistem teg semantik baharu
Pengekodan semantik ialah kemahiran penting untuk pembangun bahagian hadapan yang layak Walau bagaimanapun, apabila halaman web menjadi semakin kaya, hanya teg xhtml asal digunakan untuk menyahsemantik mereka jelas di luar kemampuannya. Tuhan berkata: "Jadilah terang!" Oleh itu, HTML 5 menyediakan satu siri teg baharu dan atribut yang sepadan untuk mencerminkan semantik tipikal tapak web moden. Amalkan kebenaran. Mari tulis contoh:
Salin kod
Kodnya adalah seperti berikut:
Tajuk laman web
sarikata--//header end-->
Ini adalah artikel tentang HTML Tag struktur baharu 5.
Ini ialah artikel tentang teg struktur baharu HTML 5.
Mengenai pengarang
Mr.Think, orang biasa yang menumpukan pada teknologi bahagian hadapan Web.
🎜 >
, kanan Terdiri daripada bar sisi dan bawah. Pengekodan adalah kemas dan mematuhi semantik XHTML Ia boleh berfungsi dengan baik walaupun dalam HTML 5. Tetapi kepada penyemak imbas, ini adalah sekeping kod tanpa membezakan pemberat, bukannya teg yang membolehkan mesin memahami semantik untuk menentukan blok yang sepadan. Contohnya, penyemak imbas standard (seperti Firefox, Chrome dan juga versi baharu IE) mempunyai kekunci pintasan yang boleh membawa pelanggan melompat terus ke navigasi halaman, tetapi masalahnya ialah semua blok ditakrifkan dengan DIV dan ID nilai DIV Ia ditentukan oleh pembangun, jadi penyemak imbas tidak tahu blok mana yang sepatutnya menjadi pautan navigasi. Kemunculan tag baharu HTML 5 hanya menggantikan kekurangan ini. Kemudian, kod di atas boleh ditulis seperti ini dalam HTML 5:
Salin kod
Kodnya adalah seperti berikut:
Tajuk laman web
< ; /hgroup>
Berikut ialah penjelasan semantik dan garis panduan penggunaan teg baharu yang biasa digunakan bagi kelas struktur yang saya senaraikan dengan merujuk kepada manual HTML 5:
Penjelasan manual: Tentukan pengepala bahagian atau dokumen.
Garis panduan penggunaan: Biasanya digunakan untuk memasukkan pengepala halaman, tetapi juga boleh digunakan untuk pengepala kawasan lain, seperti pengepala artikel:
Salin kod
Kodnya adalah seperti berikut:
Tajuk laman web
h1> ;
Garis panduan penggunaan: Digunakan untuk gabungan jenis tajuk, seperti tajuk dan sari kata artikel:
Ini ialah artikel yang memperkenalkan tag struktur HTML 5
5< ;/h2>
- HTML 5
- JavaScript< /li>
Kandungan ketepikan hendaklah berkaitan dengan kandungan artikel.
Panduan Penggunaan: Digunakan untuk kandungan bahagian, ia akan memulakan bahagian baharu dalam aliran dokumen, biasanya digunakan untuk bar sisi yang berkaitan dengan kandungan artikel:
Kodnya adalah seperti berikut:
Mengenai pengarang
Mr.Think, orang biasa yang menumpukan pada teknologi bahagian hadapan Web.Salin kod
Kodnya adalah seperti berikut:
Apakah bahagian itu?
Bahagian baharu
Salin kod
Kod tersebut adalah seperti berikut:
Definisi Manual: Tentukan kandungan luaran. Contohnya, artikel baharu daripada pembekal berita luaran, atau teks daripada blog, atau teks daripada forum
. Atau kandungan daripada sumber luar yang lain.
Kod adalah seperti berikut:
Ini ialah artikel yang memperkenalkan tag struktur HTML 5< ;
Inovasi dalam HTML 5
>< /header> Butiran kandungan artikel
Penjelasan manual: Digunakan untuk menggabungkan elemen.
Panduan Penggunaan: Selalunya digunakan untuk menggabungkan gambar dan penerangan gambar:


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
