Dengan mempopulerkan standar WEB yang terus-menerus di Cina, konsep-konsep seperti pemisahan perilaku kinerja struktural, modularisasi, semantik, dan degradasi elegan juga menjadi item penting untuk menilai pemahaman staf front-end tentang standar WEB, karena dampaknya dari nilai komersial di balik SEO, "Semantisasi" telah mendapat perhatian yang luar biasa. Sebagai pekerja front-end baru, saya pernah percaya bahwa "semantisasi" adalah metode pengorganisasian (x) struktur HTML menggunakan tag yang paling bermanfaat bagi mesin pencari. berat.
Setelah membaca banyak buku front-end dan artikel para pendahulu saya, saya mulai menyadari dangkalnya kesadaran saya dan perlahan-lahan menyadari nilai "semantisasi". Konten berikut hanyalah ringkasan dari praktik pribadi dalam kehidupan sehari-hari, yang mengumpulkan pandangan beberapa senior dan berdiri di pundak para raksasa untuk melihat lebih jauh.
Apa itu "Semantik"
“Semantik” mengacu pada kemampuan mesin untuk meneliti dan mengumpulkan informasi dengan lebih sedikit campur tangan manusia, membuat halaman web dapat dimengerti oleh mesin dan pada akhirnya bermanfaat bagi manusia. Secara khusus meminjam penjelasan populer dari seorang netizen di forum BI, "Semantik artinya tidak memperlakukan pacar Anda sebagai teman biasa." Berikut ini contoh bentuk XML sederhana:
Namun, melalui kontrol CSS, kita dapat dengan mudah menampilkan "pacar" seperti "teman". Jika kita hanya fokus pada lapisan presentasi, labelnya hanyalah "pengait", yang disediakan untuk diproses oleh CSS dan JS masih menekankan “semantisasi”, yang akan dibahas secara rinci di bawah ini.
makna semantik
1.Mesin pencari
Mengenai optimasi mesin pencari, banyak senior yang telah memberikan penjelasan kaya tentang bobot Hx, teks tersembunyi, dll, jadi saya tidak akan menjelaskannya secara detail di sini. Beberapa waktu lalu, sebuah software bernama Wolfram (http://www.wolframalpha Mesin pencari .com/) telah menarik perhatian. Kita tahu bahwa Google akan mengurutkan hasil pencarian berdasarkan nilai PR masing-masing situs web. Mesin pencari lain juga memiliki algoritma independennya sendiri, dan Wolfram mengklaim "memahami" konten masukan pengguna . Buatlah penilaian berdasarkan premis. Ketika saya memasukkan "siapa adrian", Wolfram memberi saya tanggapan seperti itu, meskipun hasilnya tidak terlalu akurat.
Terkait dengan pekerjaan front-end, bukankah “semantik” yang kita kagumi hanyalah membiarkan komputer memahami konten kita? Dengan contoh sederhana seperti <acronym title="World Wildlife Fund">WWF</acronym> ini, komputer dapat memahami bahwa WWF layak menjadi World Wildlife Fund, bukan World Water Forum. Tidak realistis jika komputer sepenuhnya menjadi World Wildlife Fund memahami konten kami. Ya, meskipun mesin pencari seperti Wolfram mungkin berumur pendek, visi yang mereka kejar, yaitu membuat pengetahuan dunia dapat dihitung, memang layak untuk kita kejar.
2. Pengalaman pengguna
Mari kita ambil contoh dulu. Berikut ini adalah formulir pendaftaran pengguna di Dangdang.com (https://login.dangdang.com/Register.aspx), dan sebagian dari struktur XHTML disadap.
Mari kita bereksperimen dengan apa yang akan terjadi jika kita mengubah <span class="span_n">Tetapkan Nama Panggilan:</span> menjadi <label class="span_n" for="txtNickName">Tetapkan Nama Panggilan:</label>.
Ketika mouse mengklik "Set NickName", kotak input teks dengan nama ID "txtNickName" akan secara otomatis mendapatkan fokus. Definisi dari label label sendiri adalah untuk menentukan label (marker) untuk kontrol (http://www. w3school.com.cn/tags/tag_label.asp), semua browser utama pada dasarnya memiliki dukungan yang sama untuk label. Kontrol formulir browser itu sendiri adalah kontrol interaktif yang sangat matang sangat efektif untuk operasi kontrol suara. Juga pengalaman yang sangat bagus.
Begitu pula Dangdang.com, daftar produk di beranda masih berupa potongan kecil kode XHTML
Kode yang disadap adalah bagian harga. Terlepas dari penamaan kelasnya, mari kita bereksperimen jika kita mengubah "span class="del grey s10""￥94.00 "/span" menjadi "del class="del grey s10" date=" ” cite=””》￥94.00《/del》《ins》￥46.00《/ins》, tidak ada perubahan visual, tetapi ketika kita berlari telanjang di sekitar halaman.
Hasilnya jelas. Sebagai pekerja front-end, kita juga perlu mempertimbangkan bahwa kecepatan Internet pengguna mungkin terlalu lambat (mungkin dia menggunakan Thunder BT), yang mengakibatkan ketidakmampuan memuat CSS, serta situasi ponsel. pengguna, dan pilih yang sesuai. Biaya tag sangat rendah. Anda hanya perlu menambahkan beberapa pengetahuan dasar tentang HTML. Selain itu, atribut tanggal dan atribut kutipan sangat berguna.
Ada juga pentingnya atribut alt dari tag abbr dan tag img untuk pembaca layar. Karena kondisi tidak memungkinkan, saya pribadi tidak dapat mengalaminya. Di seberang pantai, sudah ada yang seperti Bagian 508 hingga melindungi penyandang disabilitas agar tidak dipandang rendah oleh situs web pemerintah.
3. Efisiensi pembangunan
Struktur halaman web yang kaya semantik memiliki pengaruh yang signifikan pada pengembangan awal dan perbaikan bug selanjutnya. Secara khusus, ini seperti kode daftar produk sederhana berikut.
Melalui tag "semantik", "kait" dalam daftar produk diperkaya. Dengan menambahkan id dan penamaan kelas ke lapisan induk, kinerja global dalam daftar produk dapat dikontrol. Untuk modifikasi gaya, dalam kondisi ideal Ini dapat menghindari perubahan struktur halaman web melalui pengembang back-end dan menghemat biaya tenaga kerja. Namun, kembali ke kenyataan dan menghadapi berbagai kebutuhan produk dan bos, masih tidak realistis untuk sepenuhnya mengubah gaya hanya dengan memodifikasi CSS kebutuhan dan bug, cara terbaik adalah dengan menyediakan "pengait" secara wajar untuk halaman pada tahap pengembangan awal untuk memfasilitasi modifikasi dan penggunaan selanjutnya. Pada saat ini, tag semantik yang kaya cukup praktis.
Untuk kolaborasi tim, ID semantik dan penamaan Kelas dapat membuat strukturnya jelas bagi semua orang di tim. Bayangkan saja label dengan kelas berwarna merah diubah menjadi biru karena perubahan persyaratan, dan Anda dapat memahami mengapa penamaan semantik diperlukan.
Dalam diskusi sebelumnya tentang rasterisasi dan kerangka kerja, kami telah mengarah pada pemikiran tentang konvensi penamaan. Berikut ini hanyalah pembahasan tentang metode penamaan dan tidak menyertakan pengaruh faktor lain.Baru-baru ini, saya telah membahas tentang serangkaian tata letak yang lengkap spesifikasinya. Saya rasa kebanyakan dari mereka Saat pertama kali bersentuhan dengannya, mereka semua merasa pusing dengan penamaan seperti ini, seperti "area_01", "layout_01", dll. Karena mereka belum pernah mengalami yang besar. skala proyek yang diambil alih oleh tim saat ini, jadi mereka tidak yakin apakah metode ini tepat, tetapi satu hal yang pasti, ini memang meningkatkan biaya pembelajaran orang-orang baru, dan untuk pengembangan di masa depan, menurut saya metode ini adalah yang terbaik. juga diinginkan. Lagipula, dalam jangka panjang, tujuannya juga untuk meningkatkan pengembangan tim. Efisiensi dan pengurangan konflik, menurut saya begitulah lahirnya YUI, Blueprint, dan 960 Grid System dugaan saya, dan saya berharap hal ini dapat dibuktikan di masa depan.
4. Standar industri
Ada seribu Hamlet untuk seribu orang. Demikian pula, seribu front-end juga dapat menulis seribu halaman dengan kinerja yang sama tetapi strukturnya berbeda. Inilah situasi terkini dalam rekonstruksi halaman elemen halaman sesuka hati, tetapi hanya sedikit orang yang memperhatikan struktur HTML paling dasar. Di satu sisi, alasannya adalah kurangnya semantik tag HTML sejauh ini. Alasan selanjutnya, menurut saya, adalah pekerjaan front-end. Ketidakpedulian penulis terhadap dasar-dasar HTML, seperti yang dikatakan Gui Ge, "Orang awam melihat ke pintu, dan seorang ahli melihat kegembiraan." ingin membuat perbedaan dalam industri ini, spesialisasi adalah suatu keharusan. Artinya, jika Anda tidak menganggap diri Anda berkembang, tidak perlu membahas masalah “semantisasi”.
Tujuan dari "semantisasi" adalah untuk mencapai standar terpadu. Internet di masa depan "harus menjadi Internet terbuka. Ini tidak akan seperti sekarang di mana data tidak dapat mengalir tanpa hambatan dan terdapat banyak pulau informasi dan titik buta informasi." praktik yang baik, antarmuka terbuka, dan konten bersama akan dibahas secara rinci di bawah.
praktik semantik
Pada konten di atas, sebagian besar konten praktis telah diselingi, dan berikut adalah ringkasan pengantarnya.
1.Struktur dokumen
Cara paling sederhana untuk melakukan "semantisasi" adalah memulai dengan struktur, memilih tag yang paling sesuai dengan makna konten, meninjau kembali "Panduan Resmi untuk HTML dan XHTML", dan memikirkan lebih lanjut tentang makna konten, bukan sekadar membuat penilaian berdasarkan rendering halaman. Seringkali, kita akan menghadapi situasi seperti ini. Untuk melihat efek sederhananya, untuk mendapatkan semantik yang masuk akal, kita harus memilih solusi yang tidak mudah untuk diterapkan. Saya rasa ini juga merupakan kesadaran pekerja front-end tentang standar WEB dan pemahamannya tentang pekerjaan. Bagaimana membuat pilihan yang seimbang juga merupakan pengetahuan yang sangat mendalam /29/insinyur-vs-ilmuwan/).
Pada tahap pra-produksi, Anda juga dapat mempertimbangkan situasi masa depan dan memesan kaitan untuk halaman berdasarkan semantik konten. Tentu saja, masalah spesifik harus dianalisis secara rinci. Sesuai dengan kebutuhan proyek yang berbeda, pengembangan yang diadopsi harus fleksibel dan mudah beradaptasi, misalnya untuk halaman khusus promosi, karena kebutuhan untuk penyesuaian selanjutnya tidak besar, berdasarkan premis dasar pertemuan kegunaan dan aksesibilitas, pengembangan harus diadopsi. Mode pengembangan cepat berfokus pada memulihkan efek rancangan desain, tetapi untuk efek situs web besar, persyaratannya jelas berbeda.
2. Aturan penamaan
Skema penamaan standar untuk ID dan Kelas muncul dari waktu ke waktu di Internet. Prinsip keseluruhannya adalah memberi nama sesuai dengan arti isinya. Keuntungan dari penamaan semantik sudah jelas.
Jika Anda ingin mengubah posisi sidebar, Anda hanya perlu memodifikasi CSS tanpa mengubah struktur halaman web. Untuk modul halaman yang sering muncul, saya pribadi menyarankan untuk secara bertahap membentuk konvensi penamaan Anda sendiri selama proses pengembangan, seperti header/footer /main/hd/bd /nav/box/mode, dll., gunakan tanda hubung "-" atau huruf besar/kecil untuk membentuk nama yang lebih kompleks, seperti site-nav/quick-menu/secondaryContent/.
Namun kembali ke situasi spesifik, proyek yang berbeda juga harus memilih metode penamaan sesuai dengan situasi spesifik. Aturan penamaan yang berbeda harus digunakan dalam kombinasi. Situs web besar, seperti Taobao, lebih cocok menggunakan kombinasi rasterisasi dan penamaan semantik. Untuk halaman Modifikasi gaya dapat membuat penyesuaian yang sesuai dengan cepat dan tangkas. Untuk produksi, dapat dengan cepat disatukan. Untuk sebagian besar halaman tunggal tipe deklarasi, saya pribadi merekomendasikan penggunaan penamaan terstruktur. Pembuat halaman dapat menyelesaikan halaman dengan cepat dan mudah. Daripada menghabiskan terlalu banyak waktu memikirkan penamaan,
3. Mikroformat
Microformat adalah metode baru untuk menyematkan data terstruktur dalam kode XHTML standar. Sederhananya, ini menggunakan seperangkat standar penamaan Kelas yang ditetapkan untuk mendeklarasikan konten dokumen. Pemahaman kebanyakan orang tentang mikroformat dimulai dengan hCard. Berikut adalah contoh hCard sederhana (http://www.oppenheim.com.au/). Ini adalah hCard yang diterapkan pada footer oleh James Oppenheim.
Diantaranya, vcard url fn nama yang diberikan dan nama kelas wilayah lokalitas semuanya dihasilkan untuk memformat format mikro. Anda juga harus memperhatikan bahwa beberapa tag span ditambahkan untuk menambahkan nama Kelas. Jadi apa pentingnya mikroformat? Melalui plug-in Operator untuk Firefox, saya mengekspor kartu nama saya dari resume saya (http://adriancheng.name/resume.html)
Saya dapat mengimpor vcf yang diekspor ke berbagai klien email sebagai informasi kontak, atau mengimpornya ke buku alamat di ponsel (http://tommyfan.com/blog/skill/add_phone_from_hcard/). standar, Anda bisa Memudahkan berbagai klien untuk memproses data di halaman web. Peran mikroformat saat ini juga mirip dengan API di halaman web. Tentu saja, mikroformat memiliki visi yang lebih luas kunjungi http://microformats.org/ Pelajari lebih lanjut.
Kesimpulan
Praktik "semantisasi" sangat sederhana. Dapat dikatakan sebagai bagian paling dasar dari front-end. Namun karena berbagai alasan, hal ini telah disalahpahami atau diabaikan dan belum mendapat perhatian yang layak saya tulis artikel ini untuk memilah tahap saya yang lalu. Akumulasi pembelajaran, saya harap dapat memberikan pemikiran kepada semua pembaca tentang standar WEB.