เมื่อใดก็ตามที่ฉันเยี่ยมชมเว็บไซต์ที่สวยงาม ฉันอดไม่ได้ที่จะดูซอร์สโค้ด มันเหมือนกับการมีแว่นตาเอ็กซ์เรย์และสามารถมองเห็นใครก็ได้ แม้จะมองผ่านใบมะเดื่อก็ตาม นี่เป็นเพียงเรื่องของหลักสูตร! ฉันแทบรอไม่ไหวที่จะทราบว่าเว็บไซต์ที่สวยงามนี้เขียนด้วยโค้ดที่สวยงามเหมือนกันหรือเป็นเพียงความงามในความงามเท่านั้น รหัส? ความงาม? แน่นอน! ท้ายที่สุดแล้ว รหัสก็เหมือนกับบทกวี (หมายเหตุการแปล: "รหัสคือบทกวี" เป็นสโลแกนของระบบบล็อกชื่อดัง WordPress) นี่เป็นเพียง HTML พื้นฐานที่สุด โดยธรรมชาติแล้วมันไม่ซับซ้อนและสง่างามเท่ากับภาษาไดนามิกอื่น ๆ แต่ยังคงรักษาเสน่ห์ที่ได้รับจากมัน ผู้สร้าง จังหวะศิลปะ
ทำให้ผมเริ่มคิดว่าจะทำ Code ให้สวยงามได้อย่างไร? ด้วย HTML นี่เป็นการทำงานด้วยตนเองทั้งหมด มาดูกันว่าภาษามาร์กอัปสามารถเข้าถึงความสวยงามได้อย่างไร
รูปภาพมีขนาดใหญ่พอ (2000x2000) ที่คุณสามารถพิมพ์ออกมาและติดไว้ในตู้เก็บของส่วนตัวและสร้างความประทับใจให้เพื่อนของคุณ ต้องบอกว่านี่เป็นขนาดที่น่าสับสนจริงๆ ฉันจะปล่อยภาพ PSD ต้นฉบับให้ทุกคนได้แก้ไข
HTML5 - HTML5 และองค์ประกอบใหม่นำมาซึ่งความสวยงามอย่างที่ไม่เคยมีมาก่อน
DOCTYPE - HTML5 มี ประเภทเอกสาร ที่ดีที่สุด
การเยื้อง - แท็บและช่องว่างใช้ใน การเยื้อง โค้ดเพื่อแสดงความสัมพันธ์ระหว่างแท็กระดับพาเรนต์และรองอย่างถูกต้อง และเน้นโครงสร้างแบบลำดับชั้น
ชุดอักขระ - การประกาศ ชุดอักขระ ต้องทำในส่วนหัวก่อนเนื้อหาทั้งหมด
ชื่อเรื่อง - ชื่อ เว็บไซต์เรียบง่ายและชัดเจน เริ่มต้นด้วยการอธิบายฟังก์ชันของเพจ ตามหลังตัวคั่น และปิดท้ายด้วยชื่อเว็บไซต์
CSS - ใช้เฉพาะ สไตล์ชีต ธรรมดา (ประเภทสื่อได้รับการประกาศในสไตล์ชีต) และกำหนดเป้าหมายไปที่เบราว์เซอร์ที่ดีเท่านั้น IE6 และต่ำกว่าจะได้รับสไตล์ชีททั่วไป
เนื้อความ - ด้วยการให้ ID แก่เนื้อความ คุณสามารถจัดรูปแบบเฉพาะสำหรับหน้าต่างๆ ได้โดยไม่จำเป็นต้องมาร์กอัปเพิ่มเติม
JavaScript - เรียกว่า jQuery (ไลบรารีสคริปต์ JavaScript ที่สวยที่สุด) จาก Google มีการโหลดไฟล์ JavaScript เพียงไฟล์เดียวเท่านั้น แต่ละสคริปต์มีการอ้างอิงที่ด้านล่างของหน้า
เส้นทางของไฟล์ - เพื่อประสิทธิภาพ ให้ใช้ เส้นทาง สัมพัทธ์สำหรับทรัพยากรของไซต์ จากมุมมองของการปรับให้เข้ากับการพิมพ์ซ้ำ ไฟล์เนื้อหา (เช่น รูปภาพ) จะใช้เส้นทางที่แน่นอน
แอตทริบิวต์รูปภาพ - รูปภาพ มีข้อความแสดงแทน ซึ่งส่วนใหญ่ใช้ในกรณีที่รูปภาพหายไป แต่ก็สามารถใช้เพื่อยืนยันได้เช่นกัน เพื่อปรับปรุงประสิทธิภาพการเรนเดอร์ วิธีที่ดีที่สุดคือระบุความกว้างและความสูงของรูปภาพ
เนื้อหาหลักต้องมาก่อน - เนื้อหาหลักของหน้าควรอยู่หลังมาร์กอัปและการนำทางพื้นฐาน และก่อนเนื้อหาเสริมใดๆ (เช่น แถบด้านข้าง)
องค์ประกอบระดับบล็อกเชิงพรรณนาที่เหมาะสม - HEADER, NAV, SECTION, ARTICLE, ASIDE - " ส่วนคำอธิบาย " ใหม่เหล่านี้จะอธิบายเนื้อหาได้ดีกว่า DIV ก่อนหน้า
ลำดับชั้น – การใช้แท็กชื่อให้เป็นตัวพิมพ์ใหญ่จะมีประสิทธิภาพและเป็นไปตาม " ลำดับชั้น " ที่ชัดเจน
แท็กที่สื่อความหมายที่เหมาะสม - รายการจะ ถูกแท็ก ตามความต้องการที่แตกต่างกัน: รายการที่ไม่ได้เรียงลำดับ เรียงลำดับ และกำหนดเองที่ไม่ได้ใช้กันทั่วไป
รวมเนื้อหาทั่วไป – เนื้อหาเดียวกันที่ปรากฏบนหน้าต่างๆ จะรวมไว้ในหน้าจากฝั่งเซิร์ฟเวอร์ได้ดีที่สุด (ไม่ว่าจะด้วยวิธีใดก็ตาม ภาษา CMS อะไรก็ตามที่เหมาะกับคุณ)
คลาสความหมาย – ไม่เพียงแต่จำเป็นต้องตั้งชื่อองค์ประกอบที่ถูกต้องเท่านั้น แต่ยังต้อง แน่ใจว่าชื่อของคลาสและ ID มีความหมายด้วย โดยสามารถมีบทบาทในการอธิบายได้แม้จะไม่มีคำสั่งเฉพาะก็ตาม (เช่น "col" ดีกว่า "left")
คลาส – เมื่อหลายองค์ประกอบจำเป็นต้องใช้สไตล์ที่คล้ายกัน ให้พยายามกำหนดคลาสเดียวกันสำหรับองค์ประกอบเหล่านั้น (การนำกลับมาใช้ใหม่)
รหัส – เมื่อองค์ประกอบปรากฏเพียงครั้งเดียวในหน้าเว็บ ให้พยายามกำหนด รหัส สำหรับองค์ประกอบเหล่านั้น และอย่ากำหนดรหัสเดียวกันสำหรับองค์ประกอบที่แตกต่างกัน
องค์ประกอบไดนามิก – เอฟเฟกต์ไดนามิก จะถูกเพิ่มเมื่อจำเป็นจริงๆ เท่านั้น
เข้ารหัสอักขระ – เมื่ออักขระพิเศษปรากฏขึ้น โปรดใส่ใจกับ การเข้ารหัสอักขระ
อิสระจากการจัดสไตล์ - ทุกอย่างบนเพจ ไม่เกี่ยวกับการจัดสไตล์ และคุณไม่จำเป็นต้องระบุด้วยซ้ำว่าต้องการสไตล์ใด ทุกอย่างบนเพจถูกจำกัดไว้เพียงสามรายการต่อไปนี้: ทรัพยากรของไซต์ที่จำเป็น เนื้อหา คำอธิบาย
ความคิดเห็น - เมื่อดูโค้ด เนื้อหาที่ไม่จำเป็นต้องเน้นเป็นพิเศษหรือไม่ชัดเจนเป็นพิเศษจะถูกรวมไว้ใน ความคิดเห็น
ถูกต้อง - มาร์กอัปทั่วทั้งไซต์สอดคล้องกับ การตรวจสอบความถูกต้อง ของ W3C ใส่ใจกับการปิดแท็ก ตรวจสอบให้แน่ใจว่ามีแอตทริบิวต์ที่จำเป็น หลีกเลี่ยงวิธีการที่ล้าสมัย ฯลฯ