การแบ่งปันประสบการณ์ผ่านการตรวจสอบมาตรฐาน W3C XHTML1.0

บทความนี้เป็นเรื่องเกี่ยวกับประสบการณ์บางประการของชาวเน็ตเมื่อทำการตรวจสอบ W3C XHTML1.0 เมื่อทำการอัพเดตและปรับเปลี่ยนเว็บไซต์

สรุปประเด็นเก้าประการที่ต้องให้ความสนใจเมื่อผ่านมาตรฐาน W3C XHTML1.0:

1. อะไรคือข้อผิดพลาดในคำสั่ง <div class=tzh>ฉันชื่อ TZH!</div>?

ปัญหาเครื่องหมายวรรคตอน นี่เป็นปัญหาที่ถูกมองข้ามได้ง่ายที่สุด จริงๆ แล้ว มันเป็นเพียงเครื่องหมายคำพูดเล็กๆ สองอันที่ทำให้เกิดข้อผิดพลาดนี้ แม้ว่าเบราว์เซอร์จำนวนมากยังคงจดจำการเรนเดอร์ได้อย่างถูกต้องโดยไม่มีเครื่องหมายคำพูด อย่างไรก็ตาม เป็นไปไม่ได้ที่จะผ่านมาตรฐานสากล W3C XHTML ที่เข้มงวด โปรดจำไว้ว่าเครื่องหมายเท่ากับจะต้องตามด้วยเครื่องหมายคำพูด การเขียนที่ถูกต้อง: <div class="tzh">ฉันชื่อ TZH!</div>

2. อะไรคือข้อผิดพลาดในประโยค <SPAN class="tzh">TZH is me!</SPAN>?

ให้ความสนใจกับการใช้อักษรตัวพิมพ์ใหญ่ เช่นเดียวกับคำถามแรก นี่เป็นปัญหารายละเอียดที่มองข้ามได้ง่ายเป็นพิเศษ อักษรตัวพิมพ์ใหญ่ไม่ได้รับอนุญาตอย่างแน่นอนในมาตรฐาน W3C ฉันยังจำได้ว่าเมื่อฉันทดสอบโค้ด JavaScript onLoad ที่ฉันเขียนเพื่อให้ชัดเจนกับตัวเองก็ถูกตัดสินว่าเป็นข้อผิดพลาดเช่นกัน พิมพ์ใหญ่ การเขียนที่ถูกต้อง: <span class="tzh">TZH is me!</span>

3. อะไรคือข้อผิดพลาดในประโยค <p>ฉันคือ TZH!</p><br><p>TZH คือฉัน!</p>?

<br />ปัญหาแท็ก สำหรับแท็กตัวแบ่งบรรทัดแบบบังคับ <br /> มือใหม่หลายคนไม่สามารถบอกความแตกต่างระหว่างมันกับ <br> ได้ แม้แต่ในโปรแกรมแก้ไข FCKeditor บางครั้ง <br> ก็ปรากฏขึ้นเป็นครั้งคราวเพื่อทำหน้าที่เป็น <br /> . แม้ว่าเบราว์เซอร์จำนวนมากสามารถแก้ไขข้อผิดพลาดได้โดยอัตโนมัติและจดจำ <br> เป็น <br /> แต่วิธีการแก้ไขที่ดีที่สุดยังคงแนะนำให้ใช้ Dreamweaver ในการแก้ไข เมื่อคุณกด Ctrl+Enter <br /> จะถูกเขียนโดยอัตโนมัติ วิธีเขียนที่ถูกต้อง: <p>ฉันคือ TZH!</p><br /><p>TZH คือฉัน!</p>

4. <h1>~tangzhehao~hey~</h1> ประโยคนี้มีข้อผิดพลาดอะไรบ้าง?

ให้ความสนใจกับเครื่องหมายวรรคตอนที่อยู่ต่อท้ายแท็ก แท็กจำนวนมากไม่สามารถตามหลังด้วยเครื่องหมายวรรคตอนพิเศษ เช่น ตัวหนอน "~" ที่นี่ แต่คุณต้องถามว่าจะใช้ได้อย่างไร จากนั้นใช้ชุดอักขระ ISO Latin-1 ค้นหารหัสทศนิยมของชุดอักขระที่สอดคล้องกับเครื่องหมายตัวหนอน "~" ซึ่งก็คือ ~ จากนั้นใช้รหัสทศนิยมนี้เพื่อแทนที่เครื่องหมาย ~ เครื่องหมายอัฒภาค ไม่สามารถสูญหายได้ ในชุดอักขระ ISO Latin-1 เอนทิตีที่มีชื่อจะได้รับลำดับความสำคัญ ตามด้วยรหัสทศนิยม กล่าวคือ เมื่อสัญลักษณ์มีทั้งรหัสทศนิยมและเอนทิตีที่มีชื่อ เอนทิตีที่มีชื่อจะได้รับลำดับความสำคัญ ไม่ได้ใช้

5. อะไรคือข้อผิดพลาดในประโยค <form id="54tzh"></form>?

ให้ความสนใจกับกรณีพิเศษของ id และ class มาตรฐาน W3C XHTML1.0 กำหนดว่าใน id หรือ class อักขระตัวแรกไม่สามารถเป็นตัวเลขและต้องเป็นตัวอักษร การเขียนที่ถูกต้อง: <form id="tzh45"></form>

6. ข้อผิดพลาดในคำสั่ง <img src="logo.gif"> คืออะไร

ให้ความสนใจกับแท็ก <img> มาตรฐาน W3C XHTML1.0 กำหนดว่าองค์ประกอบ alt จะต้องรวมอยู่ในแท็ก <img> การเขียนที่ถูกต้อง: <img alt="Logo" src="logo.gif">

7. อะไรคือข้อผิดพลาดในคำสั่ง <script language="JavaScript">?

ให้ความสนใจกับแท็ก <script> มาตรฐาน W3C XHTML1.0 กำหนดว่าองค์ประกอบประเภทจะต้องรวมอยู่ในแท็ก <img> การเขียนที่ถูกต้อง: <script language="JavaScript" type=text/javascript>

8. อะไรคือข้อผิดพลาดในประโยค <div><h1>ฉันชื่อ TZH!</div></h1>?

ให้ความสนใจกับลำดับเริ่มต้นและสิ้นสุดของแท็กที่สอดคล้องกัน การเขียนที่ถูกต้อง: <div><h1>ฉันชื่อ TZH!</h1></div>

9. นอกเหนือจากที่กล่าวมาข้างต้น ยังมีประเด็นอื่นๆ ที่ต้องให้ความสนใจอีกบ้าง?

ระวังแพ็คเกจพิเศษ ตัวอย่างเช่น: <dl><dd><ul><li> และแท็กพิเศษอื่นๆ เป็นสิ่งที่ขาดไม่ได้ในลำดับชุด แท็กทั้งสี่ <dl><dd><ul><li> จะต้องเขียนตามลำดับอย่างสมบูรณ์ มีหลายอย่างที่คล้ายกัน

โปรดทราบว่าแท็บไม่ได้เปิดอยู่ สิ่งที่เรียกว่าไม่เปิดมาจากการตรวจจับ W3C ข้อผิดพลาดที่แสดงโดยข้อผิดพลาดประเภทนี้ไม่ได้เปิด ซึ่งหมายความว่าไม่เปิดเมื่อแปล ถ้าเข้าใจตามความหมายจีน แปลว่า มีจุดเริ่มต้นไม่มีหาง หรือมีหางไม่มีหัว โดยปกติสาเหตุของข้อผิดพลาดนี้ก็คือโค้ดบางส่วนถูกลบระหว่างการแก้ไข โดยไม่คำนึงถึงแท็กสิ้นสุดหรือแท็กเริ่มต้นที่ค่อนข้างไกล

สรุปประสบการณ์บางประการเกี่ยวกับมาตรฐาน W3C CSS:

1. ใช้ด้านข้างน้อยลง วิธีที่ดีที่สุดคือใช้ CSS ที่เป็นความลับน้อยกว่า เช่น break-word, manual layering ด้วย z-index, การจัดแนวตั้ง ฯลฯ เนื่องจากไม่ใช่ทุกเบราว์เซอร์ที่รองรับ และเป็นเรื่องยากมากที่จะผ่านการตรวจจับ W3C

2. center ไม่ใช่ค่าทศนิยม มือใหม่หลายคนจะเข้าใจผิดว่าเป็นศูนย์กลางของค่าลอยตัว แต่ก็ไม่เป็นเช่นนั้น center เป็นเพียงค่าของการจัดข้อความ

3. การจัดตำแหน่งไม่สามารถมีสองค่าได้ มือใหม่หลายๆ คนจะเติมค่าสองค่าในรูปแบบ float หรือ text-align เช่น float:left top สิ่งนี้ไม่ได้รับอนุญาตและเบราว์เซอร์ไม่รู้จัก

4. เป็นการดีที่สุดที่จะไม่ปรับแต่งสีของแถบเลื่อน เบราว์เซอร์จำนวนมากไม่สามารถจดจำแถบเลื่อนด้วยสีที่กำหนดเองได้อย่างเหมาะสม และสีที่กำหนดเองจำนวนมากไม่สามารถผ่าน W3C ได้

5. แยกการตั้งค่าแถบเลื่อน ในปัจจุบันนี้ มักใช้ overflow-x (แถบเลื่อนแนวนอน) หรือ overflow-y (แถบเลื่อนแนวตั้ง) เมื่อตั้งค่านี้ เรามักจะพบว่ามันไม่มีผลกระทบต่อไคลเอนต์ทั้งหมด วิธีที่ดีที่สุดคือตั้งค่าในส่วนเนื้อหา และ html ถูกตั้งค่าพร้อมกัน อย่างไรก็ตาม CSS2.1 ไม่รองรับ CSS นี้ (CSS2.1 รองรับการโอเวอร์โฟลว์และกำหนดแถบเลื่อนแนวนอนและแนวตั้ง) ใช้ให้น้อยที่สุด

6. หากพื้นหลังและสีเหมือนกันคุณจะได้รับคำเตือน