Kaedah pelaksanaan berstruktur HTML_HTML/Xhtml_Pengeluaran halaman web

Struktur DIV css
Adakah anda mempelajari reka letak CSS? Adakah anda masih tidak dapat menguasai reka letak CSS tulen sepenuhnya? Biasanya terdapat dua situasi yang menghalang pembelajaran anda:
Kemungkinan pertama ialah anda masih belum memahami prinsip halaman pemprosesan CSS. Sebelum anda mempertimbangkan prestasi keseluruhan halaman anda, anda harus terlebih dahulu mempertimbangkan semantik dan struktur kandungan, dan kemudian menambah CSS untuk semantik dan struktur. Artikel ini akan memberitahu anda cara menstruktur HTML.
Satu lagi sebab ialah anda rugi untuk sifat lapisan pembentangan yang sangat biasa itu (seperti cellpadding, hspace, align="left", dll.) dan tidak tahu penyataan CSS untuk menukarnya. Sebaik sahaja anda telah menyelesaikan masalah pertama dan mengetahui cara menstrukturkan HTML anda, saya akan memberikan anda senarai yang memperincikan CSS yang akan digunakan untuk menggantikan atribut persembahan asal.
HTML Berstruktur
Apabila kami mula-mula belajar membuat halaman web, kami sentiasa mempertimbangkan cara mereka bentuknya terlebih dahulu, dengan mengambil kira gambar, fon, warna dan pelan reka letak. Kemudian kami menggunakan Photoshop atau Fireworks untuk melukisnya dan memotongnya menjadi gambar kecil. Akhir sekali, edit HTML untuk memulihkan semua reka bentuk ke halaman.
Jika anda mahu halaman HTML anda disusun dengan CSS (mesra CSS), anda perlu kembali dan mulakan semula Jangan fikirkan tentang "penampilan" dahulu, tetapi fikirkan dahulu tentang semantik dan struktur kandungan halaman anda.
Penampilan bukanlah perkara yang paling penting. Halaman HTML yang tersusun dengan baik boleh dipersembahkan dalam sebarang penampilan, dan CSS Zen Garden ialah contoh klasik. CSS Zen Garden membantu kami akhirnya menyedari kuasa CSS.
HTML bukan sahaja untuk dibaca pada skrin komputer. Imej anda yang direka dengan teliti dalam Photoshop mungkin tidak dipaparkan pada PDA, telefon mudah alih dan pembaca skrin. Tetapi halaman HTML yang tersusun dengan baik boleh dipaparkan di mana-mana dan pada mana-mana peranti rangkaian melalui definisi CSS yang berbeza.
Mula berfikir
Pertama sekali, anda perlu mempelajari apa itu "struktur" Sesetengah penulis juga memanggilnya "semantik". Maksud istilah ini ialah anda perlu menganalisis blok kandungan anda dan tujuan setiap kandungan disediakan, dan kemudian membina struktur HTML yang sepadan berdasarkan tujuan kandungan ini.
Jika anda duduk dan menganalisis dengan teliti serta merancang struktur halaman anda, anda mungkin akan mendapat beberapa bahagian seperti ini:
Logo dan nama tapak
Kandungan halaman utama
Navigasi tapak (menu utama)
Submenu
Kotak carian
Kawasan berfungsi (seperti troli beli-belah, daftar keluar)
Pengaki (hak cipta dan notis undang-undang yang berkaitan)
Kami biasanya menggunakan elemen DIV untuk mentakrifkan struktur ini, serupa dengan ini:
　＜div id="header"＞＜/div＞
　＜div id="content"＞＜/div＞
　＜div id="globalnav"＞＞/📱i ="subnav"＞＜/div＞
　＜div id="search"＞＜/div＞
　＜div id="shop"＞＜/div＞
　＞div id="foot ＜/div＞
　Ini bukan reka letak, tetapi struktur. Ini ialah perihalan semantik blok kandungan. Apabila anda memahami struktur anda, anda boleh menambah ID yang sepadan pada DIV. Sebarang blok kandungan boleh terkandung dalam bekas DIV, dan DIV lain boleh bersarang di dalamnya. Blok kandungan boleh mengandungi sebarang elemen HTML---tajuk, perenggan, imej, jadual, senarai, dsb.
Berdasarkan perkara di atas, anda sudah tahu cara menstruktur HTML, dan kini anda boleh menentukan reka letak dan gaya. Setiap blok kandungan boleh diletakkan di mana-mana pada halaman, dan warna, fon, sempadan, latar belakang, sifat penjajaran, dll. blok boleh ditentukan.
Menggunakan pemilih adalah perkara yang menarik
Nama id ialah cara mengawal blok kandungan tertentu Dengan mengelilingi blok kandungan ini dengan DIV dan menambah id unik, anda boleh menggunakan pemilih CSS untuk Menentukan dengan tepat. penampilan setiap elemen halaman, termasuk tajuk, senarai, gambar, pautan atau perenggan, dsb. Contohnya, jika anda menulis peraturan CSS untuk #header, peraturan itu boleh berbeza sepenuhnya daripada peraturan imej dalam #content.
Contoh lain ialah: anda boleh menentukan gaya pautan dalam blok kandungan yang berbeza melalui peraturan yang berbeza. Sesuatu seperti ini: #globalnav a:link atau #subnava:link atau #content a:link. Anda juga boleh menentukan gaya yang berbeza untuk elemen yang sama dalam blok kandungan yang berbeza. Contohnya, tentukan gaya p dalam #content dan #footer melalui #content p dan #footerp masing-masing. Dari segi struktur, halaman anda terdiri daripada gambar, pautan, senarai, perenggan, dsb. Elemen ini sendiri tidak menjejaskan peranti rangkaian yang mana ia dipaparkan (PDA, telefon mudah alih atau TV Internet Ia boleh ditakrifkan sebagai Sebarang penampilan prestasi).
Halaman HTML yang disusun dengan teliti adalah sangat mudah dan setiap elemen digunakan untuk tujuan struktur. Apabila anda ingin mengesot perenggan, anda tidak perlu menggunakan teg blokquote Hanya gunakan teg p dan tambah peraturan margin CSS pada p untuk mencapai tujuan lekukan. p ialah teg berstruktur dan margin ialah atribut persembahan Yang pertama adalah milik HTML dan yang terakhir adalah milik CSS. (Ini ialah pemisahan struktur dan ekspresi.)
Hampir tiada teg yang menyatakan atribut dalam halaman HTML yang tersusun dengan baik. Kod ini sangat bersih dan ringkas. Contohnya, kod asal kini hanya boleh menulis

dalam HTML dan semua perkara yang mengawal prestasi ditulis dalam CSS . Go, dalam HTML berstruktur, jadual ialah jadual, bukan perkara lain (seperti digunakan untuk reka letak dan kedudukan).
Berlatih menstruktur diri anda
Apa yang dinyatakan di atas hanyalah struktur paling asas Dalam aplikasi sebenar, anda boleh melaraskan blok kandungan seperti yang diperlukan. DIV selalunya bersarang dan anda akan melihat bahawa terdapat lapisan lain dalam lapisan "bekas", dengan struktur yang serupa dengan ini:
　

　＜ul＞senarai＜/ul＞
　＜/div＞
　＜div id="subnav"＞
　＜ul＞senarai lain＜/ul＜> 　＜ul＞senarai lain ＜/div＞
Elemen div bersarang membolehkan anda menentukan lebih banyak peraturan CSS untuk mengawal prestasi Contohnya: anda boleh memberikan #navcontainer peraturan untuk memusatkan senarai di sebelah kanan dan memberi #globalnav peraturan untuk memusatkan. senarai di sebelah kiri Beri senarai #subnav rupa yang berbeza.
Gantikan kaedah tradisional dengan CSS
Senarai berikut akan membantu anda menggantikan kaedah tradisional dengan CSS:
Atribut HTML dan kaedah CSS yang sepadan
Atribut HTML
Penerangan kaedah CSS
align= " left"
　align="right" float: left;
float: right; Gunakan CSS untuk mengapungkan sebarang elemen: gambar, perenggan, div, tajuk, jadual, senarai, dll.
Apabila anda menggunakan float attribute , lebar mesti ditentukan untuk elemen terapung ini.
　marginwidth="0"leftmargin="0" marginheight="0" topmargin="0" margin: 0 Menggunakan CSS, margin boleh ditetapkan pada mana-mana elemen, bukan sahaja elemen badan, tetapi yang lebih penting, anda boleh Tentukan nilai margin bagi elemen atas, kanan, bawah dan kiri masing-masing.
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff
a:dilawati: #339; a:active: #00f;
Dalam HTML, warna pautan ditakrifkan sebagai nilai atribut badan. Gaya pautan adalah sama di seluruh halaman. Menggunakan pemilih CSS, gaya pautan boleh berbeza di bahagian halaman yang berbeza.
bgcolor="#FFFFFF" background-color: #fff; Dalam CSS, warna latar belakang boleh ditakrifkan untuk sebarang elemen, bukan hanya elemen badan dan jadual.
Bordercolor="#FFFFFF" border-color: #fff; Mana-mana elemen boleh menetapkan sempadan (boeder), anda boleh menentukan masing-masing atas, kanan, bawah dan kiri
border="3" cellspacing="3" lebar sempadan: 3px; Menggunakan CSS, anda boleh menentukan sempadan jadual untuk mempunyai gaya bersatu, atau anda boleh menentukan warna, saiz dan gaya masing-masing sempadan atas, kanan, bawah dan kiri.
Anda boleh menggunakan pemilih jadual, td atau ke
Jika anda perlu menetapkan kesan tanpa sempadan, anda boleh menggunakan definisi CSS: border-collapse:
＜br clear="left"＞
＜br clear="right"＞
＜br clear="all"＞
clear: left;
clear: right;
clear: kedua-duanya
Banyak 2 atau 3 lajur diletakkan menggunakan atribut apungan. Jika anda mentakrifkan warna latar belakang atau imej latar belakang dalam lapisan terapung, anda boleh menggunakan atribut jelas
　cellpadding="3"
　vspace="3"
　hspace="3" padding: 3px; CSS , mana-mana elemen boleh menetapkan atribut padding Begitu juga, padding boleh ditetapkan masing-masing ke atas, kanan, bawah dan kiri. padding adalah telus.
align="center" text-align: center;
margin-right: auto; margin-left: auto; boleh dipusatkan secara mendatar melalui margin-kanan: auto; dan margin-left: auto; mewujudkan persekitaran (Penyelesaian) boleh membenarkan CSS mencapai kesan yang sama seperti kaedah tradisional. Contohnya, elemen peringkat blok kadangkala perlu menggunakan teknik pemusatan mendatar, teknik pepijat model kotak, dsb. Semua teknik ini diperincikan dalam artikel Molly Holzschlag Reka Bentuk Web Bersepadu: Strategi untuk Pengurusan Hack CSS Jangka Panjang.
Satu lagi sumber hebat tentang teknik CSS ialah "Position is Everything" oleh Big John dan Holly Bergevin.
Memahami tingkah laku terapung
"Mengandungi Terapung" Eric Meyer akan membantu anda menguasai cara menggunakan atribut terapung untuk reka letak. Unsur terapung kadangkala perlu dikosongkan Membaca "Cara Mengosongkan Terapung Tanpa Penanda Struktur" akan sangat membantu.