Link A Semantik, Tulisan, dan Praktik Terbaik.
Melihat topik ini di Javaeye, diskusi itu cukup menarik, dan saya tidak bisa membantu tetapi terlibat. Pemikiran semantik
Pertama -tama, tombol tautan A dan tombol semantik dan tidak dapat diganti karena kenyamanan yang digunakan. A adalah singkatan dari jangkar, titik jangkar yang digunakan untuk menavigasi atau menemukan. Penggunaan khas adalah:
<a href = http: //www.w3c.org/> situs web w3c </a> <a name = anchor-one> Ini adalah lokasi jangkar satu. </a> <a href =#anchor-one> tautan ke jangkar satu </a>
Anda juga dapat menentukan nama dan atribut HREF secara bersamaan. Ini adalah pengetahuan dasar. Jika Anda memiliki pertanyaan, silakan merujuk ke spesifikasi HTML 4.01.
Mari kita bicara tentang tombol (termasuk tombol dan <input type = tombol /kirim />). Secara semantik, tombol adalah bagian dari formulir, dan tindakan yang dipicu dikaitkan dengan formulir. Jika tidak ada operasi formulir sama sekali, Anda tidak boleh menggunakan tombol. Berikan beberapa contoh:
Gambar di atas adalah beberapa tautan, meskipun terlihat seperti tombol, itu semantik a.
Tombol tampilan dan urutkan pada gambar di atas adalah formulir operasi. Secara semantik, lebih tepat untuk menggunakan tombol atau input. (Catatan: Halaman Hasil Pencarian Taobao saat ini menggunakan A, yang demi peningkatan bertahap, dan akan disebutkan di bawah)
Singkatnya, tautan dan tombol memiliki skenario semantik dan penggunaannya sendiri dan tidak dapat diganti sesuka hati. Analisis menulis
Dunia tidak pernah sesederhana itu. Di dunia web JavaScript saat ini, tautan A sering digunakan untuk memicu acara JS:
<a href = onclick = sesuatu ()> tes 1 </a> <a href =# onclick = sesuatu (); return false >> tes 2 </a> <a href = javascript: void (0) onclick = sesuatu () >> tes 3 </a> <a href = javascript: void sesuatu ()> tes 4
Pertama -tama, ada masalah dengan metode penulisan pertama, karena HREF akan secara otomatis diselesaikan di bawah IE.
Cara kedua untuk menulisnya secara langsung mencegah acara default di acara OnClick, jadi # di href = # sebenarnya bisa menjadi nilai apa pun. Menggunakan # adalah untuk mempertimbangkan bahwa ketika tidak ada JS, itu akan tetap di halaman ini setelah mengklik (Catatan: ketika ada di bawah satu layar, metode penulisan ini akan menyebabkan halaman bergulir kembali ke atas).
Cara penulisan ketiga adalah bahwa nilai HREF adalah javascript semu-protokol, dan void adalah operator unary dari JavaScript (seperti!, Typeof). Fungsi operator void adalah untuk hanya menjalankan ekspresi berikut dan tidak mengembalikan nilai apa pun. Tampaknya void (0) memblokir peristiwa default, tetapi pada kenyataannya, metode penulisan berikut ini baik -baik saja:
<a href = javascript: void (1) onclick = sesuatu () >> tes 3 </a> <a href = javascript:; OnClick = Something () >> tes 3 </a> <a href = javascript: onclick = sesuatu () >> tes 3 </a> <a href = javascript: return true onclick = sesuatu () >> tes 3 </a>
Karena operasi default A adalah konten dari javascript pseudo-protocol, menambahkan void atau tidak akan memicu peristiwa lain. (Catatan: Di bawah Opera, ketika ada nilai pengembalian dalam pseudo-protokol, HREF akan diubah, jadi kami biasanya menulis void (0) atau pernyataan kosong)
Setelah memahami cara menulis ketiga, Anda akan memahami cara menulis keempat: href = javascript: batal sesuatu (). Salah satu keuntungan dari cara ini adalah bahwa ketika mouse ditangguhkan, pengguna dapat melihat fungsi yang akan dieksekusi melalui bilah status. Ini mungkin bermanfaat bagi pengembang, tetapi untuk pengguna biasa, apakah ini benar -benar meningkatkan kepercayaan? Atau apakah itu rasa takut? Tanpa data, Anda tidak dapat menarik kesimpulan.
Selain metode penulisan di atas, ada metode penulisan lain yang disarankan, yaitu menambahkan kait ke kelas atau ID, dan kemudian menambahkan acara melalui Hook di JS. Cerminan
Saya tidak ingin membahas gaya menulis mana yang terbaik. Mari kita pikirkan tentang pertanyaan asal: Mengapa kita menggunakan A untuk memicu acara JS? Alasan yang bisa saya pikirkan adalah:
Dapat dilihat bahwa selain dari gaya mengambang, tidak ada alasan substansial. Mari kita mengesampingkan masalah gaya untuk saat ini dan melihat contoh:
Di atas adalah bilah operasi pembaca Google. Jika Anda tertarik, Anda mungkin juga Firebug. Tag yang digunakan adalah:
Gaya mouse yang ditangguhkan sama sekali tidak menjadi masalah:
Di CSS, cukup tambahkan kursor: pointer.
Dari contoh di atas, kami dapat menarik kesimpulan: Jika Anda hanya memicu tindakan JS tanpa navigasi atau pemosisian semantik, Anda dapat menggunakan rentang atau tag lain yang sesuai, dan tidak perlu menggunakan yang salah (menggunakan A akan menyebabkan masalah: pertama, Anda perlu menghapus acara default, dan kedua, informasi di bilah status akan membingungkan atau bahkan pengguna yang biasa).
Tentu saja, jika itu adalah tautan itu sendiri, Anda hanya ingin menambahkan beberapa logika JS atau formulir penyortiran sebelum navigasi, mengingatnya dari perspektif peningkatan bertahap, praktik terbaik adalah menulis semua nilai HREF sehingga di browser yang tidak mendukung JS, kegunaan dapat dijamin. Praktik terbaik
Ini bukan ringkasan, ini bukan finalisasi satu kali. Praktik terbaik hanyalah serangkaian prinsip. Penting untuk memikirkannya sebelum menulis kode:
Kode memiliki kehidupan, Tag Kingdom adalah kebun binatang, akrab dengan mereka, semuanya indah.