บทความบทนำของ wulin.com (www.vevb.com): ฉันจำประสบการณ์ที่น่ากลัวได้ หน้านี้ซ้อนกันกับ divs โหลหรือหลายสิบคน มันทำให้ฉันรู้สึกเวียนศีรษะเมื่อฉันอ่าน ... บางคนสามารถใช้แท็ก Span, แท็ก p และ divs ผู้ที่สามารถใช้ H1 และ HX ก็ใช้แท็ก DIV มันพูดไม่ออกจริงๆ ... ในเวลานี้ฉันหวังว่านักพัฒนาจะมีแนวคิดและการกระทำของ "แท็กความหมาย"
ฉันเห็นข้อกำหนดการสรรหาบางอย่างคุ้นเคยกับความหมายของเว็บและความเข้าใจ/คุ้นเคยกับมาตรฐานเว็บ Tag Semantics เป็นส่วนหนึ่งของมาตรฐานเว็บดังนั้นฉันจึงแก้ไขโพสต์ที่ฉันเคยโพสต์ในบล็อก Park แล้วโพสต์ไว้ ... ฉันหวังว่าผู้เริ่มต้นส่วนหน้าจะรู้ว่ามีสิ่งนั้น
ฉันจำประสบการณ์ที่น่ากลัว หน้านี้ซ้อนกันกับ divs โหลหรือหลายสิบคน มันทำให้ฉันรู้สึกเวียนศีรษะเมื่อฉันดูมัน ... บางคนสามารถใช้แท็ก Span, แท็ก p และ divs ผู้ที่สามารถใช้ H1 และ HX ก็ใช้แท็ก DIV มันพูดไม่ออกจริงๆ ... ในเวลานี้ฉันหวังว่านักพัฒนาจะมีแนวคิดและการกระทำของแท็กความหมาย ...
1: (ทฤษฎี) ฉลากความหมายคืออะไร?
แท็กความหมายคือการพยายามใช้แท็ก HTML ที่มีโครงสร้างที่สอดคล้องกันให้มากที่สุด ใช้ตารางเป็นตัวอย่าง:
<table>
<tr>
<td> รายการผู้บริโภค </td>
<td> จำนวนเงินบริโภค </td>
</tr>
<tr>
<td> กิน </td>
<TD> 20 หยวน </td>
</tr>
</table>
คุณเคยเห็นว่ามีอะไรผิดปกติกับตารางด้านบนหรือไม่? ฮิฮิจากนั้นดูที่ป้ายความหมายนี้
<table>
<Caption> ใช้จ่ายบัญชี </section>
<head>
<tr>
<th> รายการผู้บริโภค </th>
<th> จำนวนการบริโภค </th>
</tr>
</head>
<tbody>
<td> กิน </td>
<TD> 20 หยวน </td>
</tbody>
</table>
แท็กของรหัสสองชิ้นนี้แตกต่างกัน รหัสแท็กในตารางที่สองไม่ต้องสงสัยมากขึ้นอย่างไม่ต้องสงสัยกับมาตรฐานเว็บ
<Caption>: ชื่อเรื่องของตาราง;
<head>: ส่วนหัวของตาราง;
<th>: ส่วนหัวคอลัมน์ของคอลัมน์ที่แน่นอนของตาราง
มาพูดถึงสิ่งที่เราคุ้นเคย
<title> บทนำสู่ Blog Park </title> <body> Blog Park เป็นสวนเทคโนโลยีการพัฒนาซอฟต์แวร์ ก่อตั้งขึ้นในปี 2547 ที่นี่ ... </body>
ดูสิทำไมเราถึงรู้ว่าชื่อเรื่องอยู่ที่ไหนเมื่อเราอ่านบทความ? ที่ด้านบนของเบราว์เซอร์ แล้วทำไมเครื่องมือค้นหาจึงสามารถรวบรวมข้อมูลได้? มันคือมันรู้ว่าชื่อของแท็กความหมาย <title> เป็นบทความ หากเราไม่ปฏิบัติตามนี้แทน:
<span> บทนำสู่ Blog Park </span> <pan> Blog Park เป็นสวนเทคโนโลยีการพัฒนาซอฟต์แวร์ ก่อตั้งขึ้นในปี 2547 ที่นี่ ... <pan>
ดังนั้นเครื่องมือค้นหาจะรู้ได้อย่างไรว่าใครคือชื่อและเนื้อหาคือใคร? มันพึ่งพาการคว้าชื่อได้อย่างไร? ในความเป็นจริงความหมายไม่เพียง แต่เป็นความหมายของฉลาก แต่ยังขยายไปสู่ความหมายเชิงโครงสร้าง ตัวอย่างเช่น:
#left {float: left; margging-left: 50px;}
#right {float: ขวา; margin-top: 100px;}
<div id = ซ้าย> เนื้อหา .. </div>
<div id = ขวา> เนื้อหา .. </div>
ในตัวอย่างนี้การตั้งชื่อของ ID นั้นเกินจริงเล็กน้อย แต่สถานการณ์ที่คล้ายกันทำให้บางอย่าง เมื่อเราต้องการวาง #left div ทางด้านขวาของหน้าและเปลี่ยนตำแหน่งด้วย #right คุณสามารถเปลี่ยนสไตล์เป็นสิ่งนี้ได้หรือไม่?
#left {float: ขวา; margin-left: 50px;}
#right {float: left; margin-top: 100px;}
มันจะน่าอึดอัดใจที่จะมีลักษณะเช่นนั้นและมันจะทำให้เข้าใจผิดว่าเลย์เอาต์ของสอง divs นี้
มันควรจะเขียนเช่นนี้
<div id = หลัก> เนื้อหา .. </div>
<div id = แถบด้านข้าง> เนื้อหา .. </div>
ด้วยวิธีนี้เป็นที่ชัดเจนอย่างรวดเร็วว่าเนื้อหาอยู่ใน divs เหล่านี้และสะดวกในการปรับเปลี่ยนสไตล์
2: (ทฤษฎี) แล้วฉลากความหมายล่ะ?
1. โครงสร้างที่ดีขึ้นเอื้อต่อการรวบรวมข้อมูลของเครื่องมือค้นหา (การเพิ่มประสิทธิภาพ SEO) และการบำรุงรักษานักพัฒนา (การบำรุงรักษาที่สูงขึ้นเนื่องจากโครงสร้างที่ชัดเจนและอ่านง่าย)
2. เอื้อต่อการอ่านเทอร์มินัลพิเศษ (โทรศัพท์มือถือผู้ช่วยส่วนตัว ฯลฯ )
3: (การกระทำ) จะทำอย่างไรกับป้ายกำกับความหมาย?
พยายามใช้ความหมายเชิงโครงสร้างและความหมายน้อยลงเช่น <span>, <pan> <div> ไม่มีความหมายและคุณไม่สามารถบอกได้ว่ามันคืออะไร แต่คุณไม่เห็นว่ามันคืออะไรอย่างรวดเร็ว คุณสามารถบอกได้ว่าแท็ก EM เป็นเนื้อหาที่เน้นและแตกต่างจากเนื้อหาที่แตกต่างกัน
ดังนั้นจะตรวจสอบได้อย่างไรว่าหน้าเว็บของคุณเป็นไปตามมาตรฐานเว็บอย่างใดอย่างหนึ่ง: แท็กความหมาย? คุณสามารถลบสไตล์ของหน้าเว็บชั่วคราวและดูว่าการอ่านเป็นอย่างไร หากคุณรู้สึกว่าหน้าของคุณยุ่งมากในเวลานี้นั่นหมายความว่าฉลากความหมายของหน้านั้นไม่ค่อยดีนัก หากเพจของคุณยังไม่ยุ่งหลังจากลบสไตล์หมายความว่าโครงสร้างหน้าเว็บของคุณชัดเจนและฉลากความหมายดีกว่า
นี่เป็นเพียงความคิดเห็นของฉัน ฉันหวังว่าคนที่อ่านมันจะแสดงความคิดของพวกเขาเพื่อให้ทุกคนสามารถรู้จักความคิดของคุณและปรับปรุงบทความนี้