Cara memahami struktur HTML semantik_HTML/Xhtml_Penghasilan halaman web

Saya percaya semua orang tahu html dan css, tahu pemisahan struktur html dan prestasi css, dan tahu semantik html Ini adalah kata kunci yang popular dalam beberapa tahun kebelakangan ini. HTML semantik hanya mula popular di China setahun atau dua yang lalu Melihat struktur HTML yang dibincangkan dalam kumpulan sekarang, dan soalan temu bual tentang struktur HTML, sebahagian besar akaun HTML semantik. Jadi mengapa menggunakan HTML semantik? Apakah faedah HTML semantik?

HTML menyediakan struktur kontekstual dan kandungan dokumen web itu sendiri tidak mempunyai representasi, contohnya,

, Jangan fikir bahawa ini adalah prestasi HTML Ini sebenarnya adalah gaya CSS lalai HTML Jadi pertama sekali, kita mesti tahu bahawa HTML tidak ada kaitan dengan prestasi halaman. Peranan HTML dalam halaman adalah struktur dan makna Dalam istilah awam, ia adalah untuk membahagikan kandungan.

Struktur HTML semantik mesti terlebih dahulu menekankan struktur HTML

Struktur HTML adalah rangka halaman Sesebuah halaman adalah seperti sebuah rumah. Struktur HTML adalah dinding keluli dan konkrit batu bata dan tidak boleh didiami, tidak boleh berfungsi. CSS adalah bahan hiasan. Ia adalah lantai kayu, marmar, dan cat Ia digunakan untuk menghiasi rumah. Tidak perlu dikatakan, kuasa CSS tidak diperlukan daripada papan kayu dicat bersama, ia tidak mempunyai nilai kegunaan sebenar. CSS bergantung sepenuhnya pada dokumen HTML (X) yang merujuknya. Jika anda ingin memanfaatkan sepenuhnya kuasa CSS, anda perlu menyediakan HTML dengan kandungan yang bersih dan berstruktur "HTML ialah lingua franca untuk menerbitkan hiperteks di Internet...HTML menggunakan tag untuk menstruktur teks .isasi” (http://www.w3.org/MarkUp/).

Bagaimana untuk menulis struktur HTML semantik?
HTML ialah kaedah menambah kandungan teks dengan struktur dan makna (atau "semantik"). Ia akan memberitahu kami: "Baris ini adalah tajuk, baris ini membentuk perenggan. Kata-kata ini adalah senarai item, dan perkataan ini adalah hiperpautan ke fail lain di Internet. Perlu diingat bahawa anda tidak seharusnya membiarkan HTML." memberitahu kami: "Teks ini berwarna biru, dan teks ini berwarna merah. Bahagian kandungan ini adalah lajur paling kanan, dan baris kandungan ini dalam huruf condong ini adalah tugas CSS . Apabila melakukan pembangunan bahagian hadapan, ingat: HTML memberitahu kami jenis kandungan (atau maksudnya), bukan rupanya. Apabila kita bercakap tentang "penanda semantik", HTML yang kita bicarakan harus dipisahkan sepenuhnya daripada maklumat pembentangan, dan tag di dalamnya harus mentakrifkan secara semantik struktur dokumen.

Struktur HTML semantik sebenarnya sangat mudah, fahami semantik setiap teg dalam html ialah . Tunggu... Apabila anda melihat kandungannya, fikirkan tentang teg yang boleh menerangkannya dengan lebih baik dan gunakan teg apa sahaja yang anda mahukan.

Apakah faedah struktur HTML semantik?

Kami tahu bahawa HTML5 mempunyai teg baharu, seperti

dan

HTML sedang berkembang ke arah struktur HTML yang lebih mantap dan semantik xhtml5 dalam hal ini satu sebab, ini juga menunjukkan bahawa struktur HTML semantik adalah trend pembangunan HTML.

1. Apabila gaya dialih keluar atau hilang, halaman boleh memaparkan struktur yang jelas:

HTML itu sendiri tidak mempunyai prestasi, contohnya,

. Ini sebenarnya adalah nilai lalai HTML. Gaya css sedang berfungsi, jadi apabila ia dialih keluar atau hilang, halaman itu boleh memberikan struktur yang jelas gaya lalai. Tujuan gaya lalai juga adalah untuk menyatakan HTML dengan lebih baik. Ia boleh dikatakan bahawa gaya lalai pelayar dan struktur HTML semantik tidak dapat dipisahkan.

2. Pembaca skrin (jika pelawat cacat penglihatan) akan "membaca" halaman anda sepenuhnya berdasarkan markup anda .

Sebagai contoh, jika anda menggunakan penanda semantik, pembaca skrin akan "mengeja" perkataan anda daripada cuba menyebutnya sepenuhnya.

3. PDA, telefon mudah alih dan peranti lain mungkin tidak dapat memaparkan halaman web seperti penyemak imbas komputer biasa (biasanya kerana peranti ini mempunyai sokongan yang lemah untuk CSS

).

Menggunakan penanda semantik memastikan peranti ini memaparkan halaman web dengan cara yang bermakna. Sebaik-baiknya, peranti tontonan ditugaskan untuk memaparkan halaman web selaras dengan syarat peranti itu sendiri

Penanda semantik menyediakan maklumat berkaitan yang diperlukan oleh peranti, menjimatkan keperluan untuk mempertimbangkan semua kemungkinan situasi paparan (termasuk peranti sedia ada atau baharu pada masa hadapan, sebagai contoh, telefon mudah alih boleh memilih untuk menggunakan teks Tajuk penanda ialah). dipaparkan dalam huruf tebal. Komputer pegang tangan boleh memaparkannya dalam fon yang lebih besar, sama ada sebaik sahaja anda menandai teks sebagai tajuk, anda boleh yakin bahawa peranti membaca itu akan membacanya dengan sewajarnya.

4. Perangkak enjin carian juga bergantung pada teg untuk menentukan konteks dan berat kata kunci individu

Pada masa lalu, anda mungkin tidak menganggap perangkak enjin carian juga merupakan "pelawat" ke tapak web, tetapi kini mereka sebenarnya pengguna yang sangat berharga Tanpa mereka, enjin carian tidak akan dapat mengindeks tapak web anda, dan kemudian pengguna biasa akan sangat sedih untuk melawat.

5 Sangat penting sama ada halaman anda mudah difahami oleh perangkak, kerana perangkak sebahagian besarnya akan mengabaikan penanda yang digunakan untuk prestasi dan hanya menumpukan pada penanda semantik Oleh itu, jika tajuk fail halaman ditag dan bukannya ditag, maka halaman ini mungkin diletakkan lebih rendah dalam hasil carian Selain meningkatkan kemudahan penggunaan, penanda semantik memudahkan penggunaan CSS dan JavaScript yang betul kerana ia sendiri Menyediakan banyak "cangkuk" untuk menggunakan gaya dan tingkah laku halaman

SEO terutamanya bergantung pada kandungan tapak web anda dan pautan luaran.

6. Memudahkan pembangunan dan penyelenggaraan pasukan

W3C telah menetapkan standard yang baik untuk kami Semua orang dalam pasukan mengikut piawaian ini, yang boleh mengurangkan banyak perkara yang berbeza, memudahkan pembangunan dan penyelenggaraan, meningkatkan kecekapan pembangunan, malah

mencapai pembangunan modular

. Jika anda mempunyai pendapat atau tambahan yang berbeza, sila tinggalkan mesej untuk perbincangan.

Terima kasih kepada Abang Gui, Teh Susu, Xiaozhi, Curi Beras, Caspar dan Kumpulan Hutan CSS untuk perbincangan