Penjelasan terperinci tentang kemahiran tutorial _html5 aplikasi HTML5 CSS3

Pereka web boleh mencapai beberapa perkara menarik menggunakan HTML4 dan CSS2.1. Kami boleh melengkapkan struktur logik dokumen dan mencipta laman web yang kaya dengan kandungan tanpa menggunakan reka letak berasaskan jadual lama. Kami boleh menambah gaya yang cantik dan halus pada tapak web kami tanpa menggunakan tag Malah, keupayaan reka bentuk semasa kami telah membawa kami jauh dari era perang pelayar yang dahsyat itu, protokol proprietari dan halaman web hodoh yang penuh dengan kelipan, skrol dan kilat.

Walaupun kini kami biasanya menggunakan HTML4 dan CSS2.1, kami boleh melakukan yang lebih baik! Kami boleh menyusun semula kod kami dan menjadikan kod halaman kami lebih semantik. Kami boleh mengurangkan jumlah kod penggayaan yang memberikan halaman rupa yang cantik dan menjadikannya lebih berskala. Kini, HTML5 dan CSS3 sedang menunggu untuk semua orang. Mari lihat sama ada mereka benar-benar boleh membawa reka bentuk kami ke peringkat seterusnya...

Dulu, pereka bentuk sering menggunakan reka letak berasaskan jadual tanpa sebarang semantik. Tetapi akhirnya, terima kasih kepada inovator seperti Jeffrey Zeldman dan Eric Meyer, pereka pintar perlahan-lahan menerima reka letak

yang agak lebih semantik dan bukannya reka letak meja dan mula memanggil helaian gaya luaran. Tetapi malangnya, reka bentuk web yang kompleks memerlukan banyak kod struktur teg yang berbeza, kami memanggilnya sindrom "

-soup". Mungkin anda biasa dengan kod berikut:

Salin kodKodnya adalah seperti berikut:

Demonstrasi Sup Div

Lorem ipsum text bla bla bla. ;

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla

Tag: HMTL, kod, demo

class=" aside">

Maklumat Tangensial

kandungan"> ;

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Lorem teks ipsum bla bla bla.

Walaupun ini agak berat hati, contoh di atas masih boleh menggambarkan bahawa menggunakan HTML4 untuk mengekod reka bentuk yang kompleks masih terlalu banyak (sebenarnya, xHTML1.1 tidak lebih daripada itu). Tetapi apa yang mengujakan ialah HTML5 menyelesaikan sindrom "

-soup" dan memberi kita satu set elemen struktur baharu. Elemen HTML5 baharu ini mempunyai semantik yang lebih terperinci untuk menggantikan teg

yang tidak bermakna itu dan pada masa yang sama menyediakan cangkuk CSS "semula jadi" untuk panggilan CSS.

Berikut ialah contoh penyelesaian HTML5:





Salin kod


Kod tersebut adalah seperti berikut:

Demonstrasi Sup Div

Disiarkan pada 11 Julai 2009

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Tag: HMTL, kod, tunjuk cara

Maklumat Tangensial

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla bla.

Tag: HMTL, kod, tunjuk cara

跟class属性说再见，欢迎整洁的标签　　

      结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一與的设计师们的网页提供了神一與的家一與的。我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

　　即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不得同这类属性。像以往的DIV布局，我们在css中可能要这样调用: div #berita    {}

复制代码代码如下:

div.section {>} div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看基于HTML5的实例: bahagian {}

复制代码代码如下:

artikel {>} pengaki {}
ketepikan {}


Ini adalah kemajuan, tetapi masih terdapat beberapa isu yang perlu diselesaikan. Dalam contoh

, kita perlu memanggil elemen dalam halaman melalui atribut kelas atau id. Logik ini akan membolehkan kami menggunakan gaya pada mana-mana elemen dalam dokumen, sama ada secara keseluruhan atau secara individu. Contohnya, dalam contoh

.section dan .content elemen mudah diletakkan. Tetapi dalam contoh HTML5, akan terdapat banyak elemen bahagian dalam dokumen sebenar. Sebenarnya, kita boleh menambah beberapa pemilih atribut khusus untuk memanggil elemen bahagian yang berbeza itu, tetapi syukurlah, saya tidak mempunyai beberapa pemilih CSS lanjutan untuk menyasarkan elemen bahagian yang berbeza sekarang.

Jangan gunakan kelas dan id untuk mencari elemen HTML-5

Sekarang mari kita lihat cara mencari tika elemen halaman HTML5 tanpa menggunakan kelas dan id Kita boleh menggunakan tiga pemilih CSS untuk mencari dan mengenal pasti elemen dalam contoh itu. Seperti berikut:

Pemilih keturunan: [CSS 2.1]: EF
Pemilih adik beradik: [CSS 2.1]: E F
Pemilih anak: [CSS 2.1]: E >

Mari kita lihat cara meletakkan elemen bahagian dalam dokumen tanpa menggunakan kelas dan id:

Cari elemen paling luar

Memandangkan contoh kami bukan set lengkap kod HTML5, kami menganggap bahawa terdapat elemen

Dalam kes ini, kita boleh mencari

paling luar seperti yang ditunjukkan dalam kod berikut:

Salin kodKod tersebut adalah seperti berikut:

bahagian navigasi badan {}

Cari elemen seterusnya

Sebagai satu-satunya elemen subset segera di bawah elemen ini mungkin diletakkan seperti ini:

Salin kodKod tersebut adalah seperti berikut:

bahagian>bahagian {}

Letakkan elemen

Terdapat banyak cara untuk mencari elemen tetapi kaedah yang paling mudah sudah tentu ialah pemilih keturunan:

Salin kodKodnya adalah seperti berikut:

artikel bahagian bahagian {}

Meletakkan

, dan

Tiga elemen ini muncul di dua tempat masing-masing, satu berada dalam elemen Perbezaan ini membolehkan kami mencari setiap elemen dengan mudah.

Salin kodKodnya adalah seperti berikut:

pengepala artikel {}

bahagian artikel {}
pengaki artikel {}

Atau takrifkan bersama:

Salin kodKod tersebut adalah seperti berikut:

pengepala bahagian bahagian {}

bahagian bahagian bahagian {}
pengaki bahagian bahagian {}

Setakat ini, kami telah menggunakan pemilih CSS2.1 untuk mengecualikan semua kelas dan id. Jadi mengapa kita masih perlu menggunakan CSS3? Saya gembira anda bertanya...

Kedudukan lanjutan elemen HTML5 menggunakan CSS3

Walaupun kami telah menggunakan pemilih CSS2.1 untuk mengecualikan semua kelas dan id, jelas terdapat banyak situasi yang lebih kompleks yang memerlukan pemilih lanjutan CSS3 untuk diselesaikan. Mari belajar cara menggunakan CSS3 untuk meletakkan elemen halaman tanpa menggunakan atribut kelas dan id yang tidak berguna dengan melengkapkan contoh berikut.

Cari semua siaran menggunakan ID siaran (siaran) unik

Wordpress memberikan kami output kod sumber untuk setiap siaran yang mengandungi ID. Maklumat ini biasanya digunakan untuk navigasi dan/atau memahami maksud bahan, tetapi CSS3 boleh menggunakan ID unik ini untuk menggayakan siaran ini. Sudah tentu, anda boleh menambah atribut class="post" pada setiap siaran seperti biasa, tetapi itu akan mengalahkan tujuan latihan kami (di samping itu tidak menyeronokkan). Menggunakan "Pemilih Padanan Substring", kita boleh mencari semua log dan elemen berbezanya seperti yang ditunjukkan di bawah.

Salin kodKodnya adalah seperti berikut:

article[id*=post-] {} /* Cari semua log*/
article[id*=post-] header h1 {} /* Cari semua log teg h1*/
artikel[id*=post-] bahagian p {} /* Cari teg p dalam semua log*/

Kami masih boleh meletakkan elemen komen dan anak mereka dengan cara yang sama.

Salin kod

Kod tersebut adalah seperti berikut:

artikel[id*=komen -] { } /* Cari semua ulasan*/
artikel[id*=komen-] pengepala h1 {} /* Cari teg h1 dalam semua ulasan*/
artikel[id*=komen-] bahagian p { } / * Cari tag p dalam semua komen*/

Cari beberapa bahagian atau artikel tertentu

Terdapat banyak blog dengan jumlah log dan ulasan yang besar akan terdiri daripada Untuk mencari elemen atau tertentu, kita perlu beralih kepada pemilih ":nth-child":

Salin kod

Kod adalah seperti berikut:

bahagian:nth-child( 1) { } /* Pilih */
artikel:nth-child(1) {} /* Pilih pertama */
bahagian:nth-child(2) { } /* Pilih */
artikel:nth-child(2) {} /* Pilih kedua */

Begitu juga, kita boleh menggunakan pemilih ":nth-last-child" untuk mencari beberapa elemen dalam susunan terbalik.

Salin kod

Kod tersebut adalah seperti berikut:

bahagian:nth-last- child(1 ) {} /* Pilih */
artikel:nth-last-child(1) {} /* Pilih

section:nth-last-child(2) {} /* Pilih second to last

*/
article:nth-last-child(2) {} /* Pilih second to last */

Gunakan lebih banyak cara untuk memilih elemen tertentu

Satu lagi cara untuk memilih elemen tertentu dalam HTML5 (seperti pengepala, bahagian dan pengaki) adalah dengan memanfaatkan pemilih ":only-of-type". Memandangkan elemen HTML5 ini sering muncul lebih daripada sekali di banyak tempat, kaedah ini mudah apabila kita ingin mencari teg yang hanya muncul sekali di bawah elemen induk. Contohnya, perkara yang ingin kita pilih ialah satu-satunya elemen dalam elemen tertentu, seperti kod berikut:

Salin kod

Kodnya adalah seperti berikut:

>
Cari elemen bahagian ini
bahagian> ; dan elemen bahagian


Kita hanya boleh menggunakan pemilih satu baris berikut:






Salin kod

Kod tersebut adalah seperti berikut:

bahagian>bahagian:sahaja- jenis {}

Sekali lagi, anda boleh menambah atribut ID pada setiap elemen secara degil, tetapi anda akan kehilangan kebolehskalaan, kebolehselenggaraan dan kesederhanaan mutlak kod dengan memisahkan struktur daripada pembentangan. CSS3 membenarkan kami dengan cepat dan mudah mencari hampir semua elemen halaman yang tidak mempunyai ID dan atribut kelas. Ringkasan

Saya percaya bahawa seiring dengan berlalunya masa dan lebih banyak penyemak imbas menyokongnya, HTML5 dan CSS3 akan menjadi semakin popular. (Teks/Onimusha)

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

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.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7549

15

Tutorial CakePHP

1382

52

Apakah format nama akaun stim

83

11

kunci pengaktifan win11 kekal

58

19

Sambungan NYT menunjukkan dan jawapan

22

90

Tunjukkan Lagi

Related knowledge

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.

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.

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.

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.

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.

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

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