Rumah hujung hadapan web Tutorial H5 Inovasi HTML5 dan keindahan kemahiran tutorial structure_html5

Inovasi HTML5 dan keindahan kemahiran tutorial structure_html5

May 16, 2016 pm 03:51 PM
html5

Kata Pengantar
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:


Salin kodKodnya adalah seperti berikut:




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
Kodnya adalah seperti berikut:

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
Kodnya adalah seperti berikut:
charset=" gb2312" />
...
;


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:


🎜 >

, 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>

struktur halaman HTML boleh menjadi seperti ini Keindahan boleh dilihat sepintas lalu tanpa komen. Untuk penyemak imbas, mencari blok yang sepadan tidak lagi rugi.
Cara menggunakan teg baharu HTML 5 untuk menstruktur elemen
Menerusi contoh di atas, kami memahami inovasi struktur teg baharu HTML 5, tetapi apabila ia melibatkan penggunaan sebenar, bagaimana untuk menggunakannya dengan sewajarnya? Saya rasa ini juga soalan yang ingin ditanya oleh ramai pelajar HTML 5. Sama seperti semantik XHTML, penggunaan teg semantik HTML 5 juga harus mengikut: setiap teg mempunyai makna khusus, dan semantik membolehkan kami menggunakan teg yang sesuai di lokasi yang sesuai untuk lebih memahami orang dan Mesin (mesin boleh difahami sebagai pelayar atau enjin carian) boleh memahaminya sepintas lalu. Sebagai contoh, teg pengepala biasanya merupakan elemen blok pertama halaman (teg pengepala juga boleh digunakan dalam jenis elemen pengepala, seperti tajuk blok artikel), yang mengandungi maklumat topik halaman; biasanya digunakan untuk membungkus maklumat navigasi ; footer biasanya digunakan untuk membungkus maklumat di bahagian bawah halaman dsb.
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:
tag
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:



Salin kod kod Seperti berikut:

Ini ialah artikel yang memperkenalkan tag struktur HTML 5


5< ;/h2>




Garis Panduan Penggunaan: Digunakan untuk mentakrifkan bahagian navigasi halaman:




Salin kod
Kod adalah sebagai berikut:

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:




Salin kod


Kodnya adalah seperti berikut:

Mengenai pengarang

Mr.Think, orang biasa yang menumpukan pada teknologi bahagian hadapan Web.

Penjelasan manual: Tentukan bahagian dalam dokumen. Seperti bab, pengepala, pengaki atau bahagian lain dokumen.
Garis panduan penggunaan: Digunakan untuk kandungan bahagian, ia akan memulakan bahagian baharu dalam aliran dokumen:





Salin kod


Kodnya adalah seperti berikut:


Apakah bahagian itu?

Bahagian baharu

p> ... Biasanya, ia akan mengandungi nama pengarang, tarikh dokumen itu dibuat dan/atau maklumat hubungan. Garis panduan penggunaan: Biasanya digunakan untuk membalut bahagian bawah umum keseluruhan halaman, dan juga boleh digunakan di bahagian bawah kawasan lain, seperti bahagian bawah artikel:



Salin kod


Kod tersebut adalah seperti berikut:



COPYRIGHT@Mr.Think



Tag
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.
Panduan Penggunaan: Seperti namanya, ia biasanya digunakan dalam blok artikel:
Salin kod

Kod adalah seperti berikut:




Ini ialah artikel yang memperkenalkan tag struktur HTML 5< ;

Inovasi dalam HTML 5


>< /header>

Butiran kandungan artikel


tag
Penjelasan manual: Digunakan untuk menggabungkan elemen.
Panduan Penggunaan: Selalunya digunakan untuk menggabungkan gambar dan penerangan gambar:

Salin kod
Kod adalah seperti berikut :


figure label
Di sini ialah perihalan imej



Gunakan label ini apabila anda ingin menyenaraikan kawalan borang.
Panduan Penggunaan: Digunakan dalam blok menu untuk menentukan senarai menu atau pilihan menu:


Salin kodKodnya ialah seperti berikut:

  • HTML 5

  • CSS
  • /li>



    Teg baharu HTML 5 yang lain tidak akan diterangkan satu persatu.
    Malah, perkara ini, seperti div, h1, inpu dan tag lain XHTML, mudah digunakan selagi anda berlatih lebih banyak.
    Mengenai keserasian
    Jika anda seorang yang suka belajar dan memberi perhatian kepada bahagian hadapan, anda harus tahu bahawa struktur halaman Taobao telah menggunakan sejumlah besar teg baharu HTML 5. Jadi, apa yang saya ingin katakan ialah selagi anda berani mencuba, keserasian tidak menjadi masalah. Terdapat banyak kaedah yang serasi di Internet (artikel ini mengenai struktur, ha~).

    Kata Akhir
    Sebarang teknologi baharu memerlukan proses penyesuaian. Jika anda sudah bersedia untuk menjadi pembangun bahagian hadapan web yang cemerlang, maka anda perlu sentiasa mencuba dan menerima teknologi bahagian hadapan yang terkini.
    Sun Wen pernah berkata bahawa jika anda ingin merasai kebahagiaan tamadun, anda perlu mengalami keperitan tamadun. Begitulah revolusi umat manusia, begitu juga revolusi HTML 5. Penurunan IE secara beransur-ansur telah membolehkan pengeluar penyemak imbas utama memasuki Tempoh Negara Berperang buat kali pertama, dan wira bersaing untuk merebut takhta. Bagi pembangun, kami hanya mengharapkan pengeluar penyemak imbas utama untuk mengikut piawaian yang sama sebanyak mungkin, dan bukannya berantakan selepas sekumpulan wira bersaing untuk mendapatkan satu. Kerana, dengan cekap dan sempurna mempersembahkan aplikasi yang sama kepada semua jenis pengguna adalah matlamat utama kami.

    Dengan cara ini, artikel ini bermula daripada jenis dokumen halaman, kepada menggunakan teg baharu HTML 5 untuk membina struktur halaman yang lebih semantik, dan kemudian menerangkan beberapa teg baharu yang berkaitan dengan struktur halaman. Saya percaya semua orang mempunyai pemahaman baharu tentang teg baharu struktur HTML 5. Jika anda berminat, buka IDE anda, tulis sekeping kod yang dibina dengan teg baharu HTML 5, dan kemudian gunakan CSS untuk menggambarkan Rangka Tindakan kehebatan anda! (Sumber:

    Mr.Think)
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

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

    Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

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

    HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

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

    Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

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

    Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

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

    Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

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

    Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

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

    Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

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

    See all articles