Penjelasan terperinci tentang pengalaman dan analisis kode CSS semantik HTML5

Sekali waktu, seorang pria menerbitkan draft desain. Setelah menerbitkan draft desain, ia membuka DW dan menyeret satu halaman. Setelah dia bekerja keras, dia harus menulis latar belakang. Pria seni bela diri bernama "Artis".

Berikut ini adalah artikel tutorial tentang pengalaman dan analisis semantik HTML5 dan semantik HTML5. Konten adalah tutorial yang dipilih dengan cermat dan disusun oleh situs web ini. Saya harap ini akan membantu netizen. Berikut ini adalah konten terperinci:

Sekali waktu, seorang pria menerbitkan draft desain. Setelah menerbitkan draft desain, ia membuka DW dan menyeret satu halaman. Setelah dia bekerja keras, dia harus menulis latar belakang. Pria seni bela diri bernama "Artis". Yang lebih sulit adalah bahwa ketika setiap kebutuhan berubah, Anda dapat memodifikasi banyak mati rasa.

Jadi Div+CSS dibawa ke panggung era internet, dan lebih dari satu buku bunga matahari "Div+CSS" lahir semalam. Pada waktu itu, kami tinggal di era Div+CSS, dan pada saat itu, kami menggunakannya.

Setelah itu, pinggang saya tidak sakit, kaki saya tidak terluka, dan saya menjadi lebih bersemangat ketika bekerja lembur.

Hantu pernah menjelaskan semantik dalam artikel "semantikisasi di halaman refactoring" dua tahun lalu, dan juga dermaga "apa manfaat dari struktur html semantik?》

Rekonstruksi telah memakan waktu 7 tahun. Mungkin hari ini, kita dapat menulis halaman dengan terampil, tetapi seberapa mudah menulis halaman dengan baik? Mari kita memilah ide -ide kita, meninjau dasar -dasarnya, dan menggabungkannya dengan tren saat ini, dan kemudian berbicara tentang topik semantikisasi. Apakah shenma semantikisasi? Mengapa semantik?

Semantik dalam rekonstruksi pada dasarnya dapat dibagi menjadi dua bagian: (x) Semantik tag HTML dan semantik penamaan CSS.

(x) Semantik tag HTML

Tidak ada omong kosong:

(Gambar 1)

Gambar 1 Metode implementasi non-semantik: no_emantic_html Metode implementasi semantik: emantic_html

Anda benar

Apakah Anda memiliki kesukaan khusus? Setelah mendapatkan rancangan desain, keterampilan magis yang tak terhitung jumlahnya telah jatuh di layar secara tidak sengaja? Jika no_emantic_html, selamat atas memiliki jimat.

Gunakan tag HTML yang masuk akal dan sifat uniknya untuk memformat konten dokumen - ini adalah penjelasan Shuke tentang tag semantik, jadi tidak mungkin

Tidak perlu menggunakan tempat di mana HTML disusun, karena ini adalah label semantik. Kata asli adalah divisi, yang berarti pemisahan dan blok. Ini umumnya hanya digunakan di tempat di mana HTML disusun, dalam versi sebelumnya (x) HTML.

Tapi bagaimana kita bisa menulis label semantik? Mulailah dengan dasar -dasarnya. Yang paling kita tangani setiap hari adalah label seperti Div H1-H6 Ul-li p. Saya ingin tahu apakah Anda memiliki pemahaman mendalam tentang label-label ini. Mari kita lihat meja di bawah ini.

Di atas hanya mencantumkan beberapa tag yang biasa kita gunakan. Untuk tag lebih lanjut, silakan merujuk ke W3C. Pada dasarnya semua tag HTML adalah singkatan dari kata atau frasa, yang sebenarnya berarti lebih nyaman untuk pemahaman kita tentang semantik. Faktanya, di antara semua (x) tag html, kecuali

Dan 2 label bebas semantik, label lain memiliki makna. Hanya dengan mengetahui label mana yang ada dan memahami makna asli dari setiap label, Anda dapat mengetahui cara menggunakannya. Anda tidak tahu kapan menggunakannya

Tentukan tag daftar? Dan bagaimana jika Anda tidak tahu ada ^{label? Jika pada dasarnya Anda melihat semua divs pada halaman, itu berarti bahwa Anda tidak memahami penggunaan tag semantik dengan sangat baik: itu jelas merupakan judul, yang dapat diimplementasikan dengan tag, tetapi harus diimplementasikan tanpa tag semantik, atau paragraf, apakah lebih semantik menggunakan tag?}

^{Semua orang tahu CSS Nude Festival tahunan, bukan? Jika tag yang dipilih hampir semuanya tanpa semantik, maka hampir tidak ada informasi struktural di halaman web setelah de-style, dan keterbacaannya sangat buruk; Jika tag yang dipilih cocok untuk semantik, halaman web masih memiliki keterbacaan yang sangat baik setelah De-styles; Setiap browser memiliki gaya defaultnya sendiri, dan gaya default memberikan tampilan yang berbeda untuk setiap tag. Kebenaran tag dapat mencerminkan kegunaan situs web, yang juga merupakan salah satu cara termudah untuk menguji kegunaan situs web.}

^{Ini disarankan bagi semua orang untuk memeriksa penggunaan tag situs web resmi W3C, menggunakan pengembang web untuk menonaktifkan CSS untuk melihat cara melihat?}

^{Semantik penamaan CSS}

^{Penamaan semantik CSS mengacu pada kelas atau nama ID yang dilampirkan pada tag HTML dengan nama yang mudah dipahami. Penamaan semantik melibatkan spesifikasi penamaan tim. Hanya dengan penamaan semantik yang lebih baik berdasarkan spesifikasi tim adalah raja.}

^{Dalam pemahaman saya, penamaan CSS semantik setidaknya harus mematuhi konvensi berikut:}

^{Cobalah untuk menghindari penamaan pinyin dan menggunakan kata -kata bahasa Inggris untuk menamainya}

^{Ada tiga cara untuk menghubungkan kata-kata: underscore_, simbol spacer-, dan penamaan unta . Silakan merujuk ke spesifikasi tim untuk penggunaan khusus, tetapi saya pribadi merekomendasikan untuk tidak menggunakan lebih dari 2 metode koneksi secara bersamaan.}

^{Jangan ikuti angka yang tidak berarti demi kata , seperti logo1234 (kecuali untuk perjanjian tim)}

^{Untuk penamaan koneksi dari kata -kata yang terlalu panjang, Anda dapat menggunakan singkatan, tetapi harus dipastikan bahwa semua anggota dapat memahaminya.}

^{Beberapa kata yang disepakati dapat membantu Anda menamainya dengan cepat:}

头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column登录条：loginbar标志：logo广告：banner轮转：promo页面主体：main热点：hot新闻：news 下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink版权copyright

^{Ada terlalu banyak dari ini, jadi saya tidak akan mencantumkannya satu per satu di sini. Jika Anda menemukan kata -kata yang tidak Anda ketahui, silakan tambahkan beberapa bahasa Inggris ke dalamnya!}

[1] [2] Halaman berikutnya