Artikel Pengenalan Wulin.com (www.vevb.com): Saya ingat pengalaman yang mengerikan. Halaman itu bersarang dengan selusin atau puluhan div. Itu membuat saya merasa pusing ketika saya membacanya ... beberapa dari mereka dapat menggunakan tag rentang, t tag, dan divs. Mereka yang dapat menggunakan H1 dan HX juga menggunakan tag Div. Ini benar -benar terdiam ... saat ini, saya berharap pengembang memiliki beberapa konsep dan tindakan "tag semantik".
Saya melihat beberapa persyaratan rekrutmen terbiasa dengan kata semantik web dan pengertian/akrab dengan standar web. Tag Semantik adalah bagian dari standar web, jadi saya memodifikasi posting yang saya posting di taman blog dan kemudian mempostingnya ... Saya harap pemula front-end dapat mengetahui bahwa ada hal seperti itu.
Saya ingat pengalaman yang menakutkan. Halaman itu bersarang dengan selusin atau puluhan div. Itu membuat saya merasa pusing ketika saya menontonnya ... beberapa dari mereka dapat menggunakan tag span, t tag, dan divs. Mereka yang dapat menggunakan H1 dan HX juga menggunakan tag Div. Ini benar -benar terdiam ... saat ini, saya harap pengembang memiliki beberapa konsep dan tindakan tag semantik ...
1: (teori) Apa itu label semantik?
Tag semantik harus mencoba menggunakan tag HTML dengan struktur yang sesuai sebanyak mungkin. Ambil Tabel sebagai contoh:
<able>
<tr>
<td> item konsumen </td>
<td> Jumlah konsumsi </td>
</tr>
<tr>
<td> makan </td>
<td> 20 yuan </td>
</tr>
</boable>
Pernahkah Anda melihat apa yang salah dengan tabel di atas? Hehe, lalu lihat label semantik ini
<able>
<spliction> belanjakan pembukuan </class>
<head>
<tr>
<th> item konsumen </t>
<th> Jumlah Konsumsi </th>
</tr>
</head>
<tbody>
<td> makan </td>
<td> 20 yuan </td>
</tbody>
</boable>
Tag dari dua potong kode ini berbeda. Kode tag di tabel kedua tidak diragukan lagi lebih sesuai dengan standar web.
<comption>: judul meja;
<head>: header meja;
<t th>: header kolom kolom tabel tertentu.
Mari kita bicara tentang apa yang biasa kita lakukan
<title> Pengantar Taman Blog </iteme> <body> Blog Park adalah Taman Teknologi Pengembangan Perangkat Lunak. Didirikan pada tahun 2004, di sini ... </body>
Lihat, mengapa kita tahu di mana judulnya saat membaca artikel? Di bagian atas browser. Lalu mengapa mesin pencari bisa merangkak? Ia tahu bahwa judul tag semantik <Title> adalah artikelnya. Jika kita tidak mematuhi ini, sebaliknya:
<span> Pengantar Taman Blog </span> <span> Blog Park adalah Taman Teknologi Pengembangan Perangkat Lunak. Didirikan pada tahun 2004, di sini ... <span>
Jadi bagaimana mesin pencari tahu siapa judulnya dan siapa isinya? Bagaimana cara mengandalkan untuk mengambil judul? Faktanya, semantik tidak hanya dapat menjadi label semantik, tetapi juga memperluasnya menjadi semantik struktural. Misalnya:
#left {float: left; margging-left: 50px;}
#right {float: right; margin-top: 100px;}
<Div id = Left> konten .. </div>
<Div id = right> konten .. </div>
Dalam contoh ini, penamaan ID agak berlebihan, tetapi situasi serupa membuatnya. Ketika kami ingin meletakkan #Left div di sisi kanan halaman dan mengubah posisi dengan #Right, dapatkah Anda mengubah gaya menjadi ini?
#left {float: right; margin-left: 50px;}
#right {float: left; margin-top: 100px;}
Akan sangat canggung agar terlihat seperti itu, dan itu akan menyesatkan tata letak kedua div ini.
Itu harus ditulis seperti ini.
<Div id = Main> konten .. </div>
<Div id = sidebar> konten .. </div>
Dengan cara ini, jelas sekilas konten apa yang ada di div ini dan lebih mudah untuk memodifikasi gaya.
2: (teori) Bagaimana dengan label semantik?
1. Struktur yang lebih baik, lebih kondusif untuk merangkak mesin pencari (optimasi SEO) dan pemeliharaan pengembang (pemeliharaan yang lebih tinggi karena struktur yang jelas dan mudah dibaca).
2. Lebih kondusif untuk membaca terminal khusus (ponsel, asisten pribadi, dll.).
3: (Tindakan) Apa yang harus dilakukan dengan label semantik?
Cobalah untuk menggunakan makna struktural, dan lebih sedikit semantik, seperti <span>, <div> tidak berarti, dan Anda tidak dapat mengetahui apa itu, tetapi Anda tidak dapat melihat apa itu sekilas. Anda dapat mengatakan bahwa tag EM adalah konten yang ditekankan dan dibedakan dari konten yang berbeda.
Jadi, bagaimana menentukan apakah halaman Anda sesuai dengan salah satu standar web: tag semantik? Anda dapat menghapus gaya halaman Anda sementara dan melihat bagaimana keterbacaan. Jika Anda merasa bahwa halaman Anda sangat berantakan saat ini, itu berarti label semantik halaman tidak terlalu bagus. Jika halaman Anda masih belum berantakan setelah menghapus gaya, itu berarti struktur halaman Anda jelas dan label semantik lebih baik.
Ini hanya pendapat saya. Saya berharap orang -orang yang telah membacanya juga akan mengekspresikan ide -ide mereka sehingga semua orang dapat mengetahui ide -ide Anda dan meningkatkan artikel ini.