HTML

โครงสร้างของทุกหน้าเว็บ

HTML อธิบายเนื้อหาและโครงสร้างของทุกหน้าเว็บ ตั้งแต่แท็กแรกของคุณไปจนถึงฟอร์มที่เข้าถึงได้และ HTML เชิงความหมาย เส้นทางนี้มอบพื้นฐานที่มั่นคงสำหรับทุกอย่างในการพัฒนาเว็บ

พื้นฐาน

ผู้เริ่มต้น - เรียนพื้นฐานทีละขั้น

• HTML คืออะไร? แท็กและแอตทริบิวต์ทำความรู้จักว่า HTML คืออะไร และเรียนรู้ที่จะจดจำแท็กและแอตทริบิวต์
• การจัดโครงสร้างข้อความ: หัวเรื่อง ย่อหน้า และรายการเรียนรู้การจัดระเบียบข้อความด้วยลำดับชั้นของหัวเรื่อง ย่อหน้า และรายการ
• ลิงก์และรูปภาพสร้างลิงก์ไปยังหน้าอื่น และแสดงรูปภาพด้วยแท็ก a และ img
• ตารางอย่างง่ายนำเสนอข้อมูลในรูปแบบแถวและคอลัมน์ด้วยแท็ก table, tr, th และ td
• โครงร่างที่สมบูรณ์ของหน้า HTMLประกอบหน้าเว็บที่สมบูรณ์ด้วย doctype และแท็ก html, head, meta และ body

ก้าวหน้า

ระดับกลาง - สร้างโปรเจกต์จริง

• ฟอร์ม: input, label, select, textarea, buttonสร้างฟอร์มที่สมบูรณ์ เข้าถึงได้ และพร้อมใช้งานจริง
• HTML เชิงความหมาย: การจัดโครงสร้างหน้าเว็บจริงแทนที่ div ที่ไร้ชื่อของคุณด้วยแท็กที่ให้ความหมายแก่โครงสร้าง
• สื่อ: audio, video, figure และ figcaptionฝังเสียง วิดีโอ และภาพประกอบที่มีคำบรรยาย โดยไม่ต้องใช้ปลั๊กอินใดๆ
• แอตทริบิวต์สากลและ data-*ใช้ประโยชน์จากแอตทริบิวต์ที่ทำงานได้ทุกที่ และเก็บข้อมูลของคุณเองไว้ใน HTML
• เตรียมหน้าเว็บของคุณให้พร้อมสำหรับเว็บขัดเกลาส่วน head ของหน้า: title, description, favicon และลิงก์ภายนอกที่ปลอดภัย

ขั้นสูง

ชำนาญ - แพตเทิร์นขั้นสูงและประสิทธิภาพ

• การเข้าถึง: alt, ลำดับชั้นของหัวข้อ และ ARIAเชี่ยวชาญข้อความทางเลือก ลำดับชั้นของหัวข้อที่โปรแกรมอ่านหน้าจอนำทางได้จริง และการใช้ ARIA เฉพาะกรณีที่ HTML แบบเนทีฟทำไม่ได้
• ฟอร์มขั้นสูงและการตรวจสอบแบบเนทีฟใช้ประโยชน์จาก required, pattern, inputmode และ Constraint Validation API เพื่อฟอร์มที่แข็งแรงโดยไม่ต้องใช้ไลบรารีภายนอกใด ๆ
• รูปภาพแบบตอบสนอง: srcset, sizes และ pictureส่งรูปภาพที่เหมาะสมให้กับหน้าจอที่เหมาะสมด้วย srcset และ sizes, สงวน picture ไว้สำหรับการกำกับศิลป์ และเชี่ยวชาญการโหลดแบบขี้เกียจ
• SEO เชิงเทคนิค: Open Graph และข้อมูลที่มีโครงสร้างควบคุมว่าหน้าเว็บของคุณแสดงตัวอย่างบนโซเชียลเน็ตเวิร์กอย่างไรด้วย Open Graph และมุ่งสู่ผลลัพธ์แบบ rich results ด้วย schema.org ในรูปแบบ JSON-LD
• ประสิทธิภาพการโหลด: defer, async, preload และ prefetchจัดลำดับการรันสคริปต์ของคุณด้วย defer และ async จากนั้นบังคับเครือข่ายด้วย preload, preconnect และ prefetch

เชี่ยวชาญ

ผู้เชี่ยวชาญ - สถาปัตยกรรม กลไกภายใน และกรณีขอบ

• จาก HTML สู่ DOM: การ parse และการกู้คืนจากข้อผิดพลาดทำความเข้าใจว่าเบราว์เซอร์เปลี่ยนสตรีม HTML ใด ๆ แม้แต่สตรีมที่ผิดรูปแบบ ให้กลายเป็นต้นไม้ DOM ที่แน่นอนได้อย่างไร
• Web Components: custom elements, shadow DOM และ slotsเชี่ยวชาญวงจรชีวิตของ custom element การห่อหุ้มด้วย shadow DOM และการฉายเนื้อหาผ่าน slots
• การทำสากลานุวัตร (Internationalization): lang, dir, charset และกับดัก Unicodeใช้ lang, dir และการประกาศการเข้ารหัสอย่างชาญฉลาด และเอาชนะกับดักการทำ normalization ของ Unicode และทิศทางการอ่าน
• ความปลอดภัยฝั่ง HTML: XSS, sandbox, noopener และ CSPระบุเวกเตอร์ XSS ที่เฉพาะเจาะจงกับมาร์กอัป และปรับใช้การป้องกันเนทีฟของ HTML: sandbox, noopener และ Content Security Policy
• HTML เชิงโต้ตอบสมัยใหม่: dialog, details, popover, contenteditableแทนที่ไลบรารี UI ของคุณด้วยองค์ประกอบพื้นฐานเนทีฟของ HTML สมัยใหม่: modal dialog, accordion แบบเอกสิทธิ์, popover และพื้นที่แก้ไขได้