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:

Lorem ipsum text bla bla bla. ;

Lorem ipsum text bla bla bla.

Lorem ipsum text bla bla

class=" aside">

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.

Tag: HMTL, kod, tunjuk cara

Maklumat Tangensial

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

Label berkaitan：

css3 html5

sumber：php.cn

Artikel sebelumnya：Soket web HTML5 komunikasi dupleks penuh pembelajaran terperinci contoh_html5 kemahiran tutorial Artikel seterusnya：HTML5 melaksanakan kemahiran tutorial WeChat game_html5 melancap

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

Artikel terbaru oleh pengarang