รหัส HTML ที่ดีเป็นรากฐานของเว็บไซต์ที่สวยงาม เมื่อฉันสอนคนอื่น ๆ CSS ฉันมักจะบอกพวกเขาก่อน: CSS ที่ดีมีอยู่บนแท็ก HTML ที่ดีเท่านั้น มันเหมือนบ้านต้องการรากฐานที่มั่นคงใช่ไหม? แท็ก HTML ที่เรียบร้อยและมีความหมายมีข้อได้เปรียบมากมาย แต่ยังมีเว็บไซต์มากมายที่ใช้การเขียนแท็กที่ไม่เป็นมิตร
ลองดูแท็ก HTML ที่ไม่ได้เขียนไว้และพูดคุยกันเพื่อเรียนรู้วิธีการเขียนแท็ก HTML ที่เรียบร้อยและมาตรฐาน
Wulin.com หมายเหตุ : Chris Cyier ใช้เอกสารสองฉบับที่นี่เพื่ออธิบายรหัสของบทความนี้: รหัสที่ไม่ดีและรหัสที่ดี โปรดดูเอกสารทั้งสองนี้เมื่อคุณศึกษาในการทำเช่นนี้เราเพียงแค่ต้องทำตามขั้นตอนที่ถูกต้อง ไม่จำเป็นต้องหารือว่าจะใช้ HTML 4.01 หรือ XHTML 1.0 ซึ่งทั้งสองอย่างนี้ใส่ข้อกำหนดที่เข้มงวดในการเขียนโค้ดที่ถูกต้องของเรา
แต่ไม่ว่าอะไรก็ตามรหัสของเราไม่ควรใช้ตารางตารางใด ๆ สำหรับการจัดวางดังนั้นจึงไม่จำเป็นต้องใช้ doctype ในช่วงเปลี่ยนผ่าน
ทรัพยากรที่เกี่ยวข้อง:ในส่วน <head> ของเราสิ่งแรกคือการประกาศชุดอักขระ เราใช้ UTF-8 แต่วางไว้เบื้องหลัง <title> ลองเลื่อนการประกาศชุดอักขระขึ้นไปด้านบนเพราะเราต้องการให้เบราว์เซอร์รู้ว่าตัวละครตั้งค่าไว้เพื่อจัดการกับมันก่อนที่จะอ่านอะไร
นอกเหนือจากตำแหน่งของการประกาศชุดอักขระตัวละครแปลก ๆ ที่ปรากฏใน <title> ยังเป็นปัญหาที่ต้องให้ความสนใจ ตัวอย่างเช่นควรเปลี่ยนอักขระ และ อักขระที่ใช้กันมากที่สุดควรถูกแทนที่ด้วยเอนทิตีอักขระ & amp ;
ทรัพยากรที่เกี่ยวข้อง:เมื่อเขียนโค้ดการเยื้องจะไม่ส่งผลกระทบต่อการปรากฏตัวของหน้าเว็บ แต่การใช้การเยื้องที่เหมาะสมสามารถทำให้รหัสอ่านได้มากขึ้น วิธีการเยื้องมาตรฐานคือการเยื้องบิตแท็บ (หรือช่องว่างไม่กี่) เมื่อคุณเริ่มองค์ประกอบใหม่ นอกจากนี้โปรดจำไว้ว่าฉลากขององค์ประกอบปิดนั้นสอดคล้องกับฉลากเริ่มต้น
Wulin.com หมายเหตุ : เพื่อนบางคนคิดว่ามันลำบากกว่าที่จะเยื้องเมื่อเขียนโค้ด หากคุณเพิ่งอ่านรหัสนี้อาจไม่มีปัญหา แค่คิดว่ามันโอเค แต่ถ้าเป็นการทำงานร่วมกันหรืองานของคุณได้รับการเผยแพร่และเปิดเผยต่อสาธารณะคุณจำเป็นต้องเขียนรหัสที่สวยงามและอ่านได้มากขึ้น ทรัพยากรที่เกี่ยวข้อง:เรามีรหัส CSS บางอย่างที่ขยายไปยังส่วน <head> ของเรา นี่เป็นสิ่งที่ผิดกติกาอย่างร้ายแรงเพราะสามารถใช้งานได้ในหน้า HTML เดียวเท่านั้น การเก็บไฟล์ CSS แบบสแตนด์อโลนหมายถึงหน้าเว็บในอนาคตสามารถเชื่อมโยงไปยังพวกเขาและใช้รหัสเดียวกัน เช่นเดียวกันกับ JavaScript
Wulin.com หมายเหตุ : แน่นอนปัญหานี้อาจไม่ร้ายแรง ตัวอย่างเช่นเป็นธีม WordPress รหัสที่เขียนใน <head> ใช้ในหน้า WordPress ทั้งหมด แต่การเขียน CSS ใน <head> ยังคงเป็นนิสัยที่แย่มากในชื่อเว็บไซต์ของเราเราใช้ <H1> เป็นแท็กชื่อเว็บไซต์ซึ่งสมบูรณ์แบบ และมีการเพิ่มลิงก์ไปยังหน้าแรก แต่ข้อผิดพลาดคือลิงก์ถูกวางไว้ด้านนอก <H1> และลิงก์ที่ล้อมรอบ <H1> ข้อผิดพลาดในการทำรังง่าย ๆ นี้ได้รับการจัดการที่ดีโดยเบราว์เซอร์ส่วนใหญ่ แต่ในทางเทคนิคแล้วมันไม่ได้ผล
ลิงค์สมอเป็นองค์ประกอบอินไลน์และชื่อ <H1> เป็นองค์ประกอบบล็อกและไม่ควรวางองค์ประกอบบล็อกในองค์ประกอบอินไลน์
ฉันไม่รู้ว่าใครเป็นคนคิดค้นก่อน แต่ฉันชอบคำว่า Divitis ซึ่งหมายถึงการใช้ divs มากเกินไปในแท็ก HTML ในช่วงเวลาหนึ่งของการเรียนรู้การออกแบบเว็บเราเรียนรู้วิธีการใช้ div เพื่อห่อองค์ประกอบอื่น ๆ อีกมากมายเพื่อให้ได้รูปแบบและสไตล์ที่สะดวก สิ่งนี้นำไปสู่การละเมิดองค์ประกอบ Div เราใช้พื้นที่ที่ต้องการและพื้นที่ที่ไม่จำเป็นอย่างสมบูรณ์
ในตัวอย่างที่แสดงด้านบนเราใช้ div (topnav) เพื่อบรรจุรายการ UL (bigbarnavigation) อย่างไรก็ตามทั้ง DIV และ UL เป็นองค์ประกอบบล็อกดังนั้นจึงไม่จำเป็นต้องใช้ DIV เพื่อห่อองค์ประกอบ UL
ทรัพยากรที่เกี่ยวข้อง:ตอนนี้เรามาพูดถึงการจัดการการตั้งชื่อ ในตัวอย่างที่กล่าวถึงในบทความก่อนหน้า UL ของเราใช้ชื่อ ID BigBarnavigation การนำทางอธิบายเนื้อหาของบล็อกเป็นอย่างดี แต่ Big และ Bar อธิบายการออกแบบมากกว่าเนื้อหา มันอาจจะบอกว่าเมนูนี้เป็นแถบเครื่องมือขนาดใหญ่ แต่ถ้าการออกแบบของเมนูนี้กลายเป็นแนวตั้งชื่อจะดูสับสนและไม่เกี่ยวข้อง
ชื่อที่เป็นมิตรและชื่อ ID เช่น Mainnav, Subnav, แถบด้านข้าง, ส่วนท้าย, ข้อมูลเมตาซึ่งอธิบายสิ่งที่รวมอยู่ด้วย ชื่อคลาสที่ไม่ดีและชื่อ ID อธิบายการออกแบบเช่น BigBoldHeader, LeftsideBar และ RoundedBox
Wulin.com หมายเหตุ : Chris เน้นว่าจะตั้งชื่อตามเนื้อหาหรือการออกแบบ โดยส่วนตัวแล้วฉันต้องการเพิ่ม ชื่อ ID และคลาสเพื่อใช้ประโยชน์หรือลดลง หรือใช้ประโยชน์จากตัวอักษรเริ่มต้นของคำ ก่อนอื่นคำที่เป็นตัวพิมพ์ใหญ่อย่างสมบูรณ์ไม่เอื้อต่อการอ่านและยกเว้น สำหรับการใช้ตัวอักษรตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ของตัวอักษรตัวแรกของคำนั้นขึ้นอยู่กับนิสัยส่วนตัวของคุณ เป็นสิ่งสำคัญที่ไม่ว่ากฎใดจะใช้มันควรจะสอดคล้องกัน อย่าเป็นตัวพิมพ์เล็กอย่างหมดจดและเป็นตัวพิมพ์ใหญ่ในจดหมายฉบับแรกในแต่ละครั้งมันจะสับสนมากนอกจากนี้สิ่งที่ฉันสับสนเป็นการส่วนตัวคือว่าจะขีดเส้นใต้ _ หรือยัติภังค์หรือไม่ใช้ชื่อที่ยาวขึ้น หรือบางทีฉันคิดว่ามันซับซ้อนเกินไป เป็นการดีที่จะใช้ทุกประเภทและก็โอเคที่จะทำให้มันสอดคล้องกัน
หน้าก่อนหน้า 1 2 หน้าถัดไปอ่านข้อความเต็ม