PricingLoginStart free
HTML Academy · บทเรียน

charset และการจัดการ Unicode: อักขระพิเศษ

ใช้ UTF-8 และเอนทิตี HTML เพื่อแสดงอักขระใด ๆ ได้อย่างถูกต้อง

บทเรียน 4 จาก 413 ขั้นตอน

charset และการจัดการ Unicode: อักขระพิเศษ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การประกาศการเข้ารหัสอักขระ

เอกสาร HTML ทุกฉบับต้องประกาศการเข้ารหัสอักขระ มาตรฐานคือ UTF-8: <meta charset="utf-8"> โดยควรเป็นองค์ประกอบแรกสุดของ <head> หากไม่มีการประกาศนี้ เบราว์เซอร์จะเดาการเข้ารหัส ซึ่งมักผิดพลาดกับข้อความที่ไม่ใช่ ASCII

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page</title>

เหตุใดจึงใช้ UTF-8

UTF-8 เข้ารหัสอักขระ Unicode ได้ทุกตัว ไม่ว่าจะเป็นอักษรจากภาษาใด อีโมจิ หรือสัญลักษณ์ใด ๆ ทั้งยังเข้ากันได้แบบย้อนหลังกับ ASCII (a-z และ 0-9 ยังคงใช้หนึ่งไบต์) และเป็นการเข้ารหัสหลักบนเว็บยุคใหม่ — ในปี 2024 หน้าเว็บมากกว่า 98% ใช้ UTF-8

ตำแหน่งมีความสำคัญอย่างยิ่ง

เมตาแท็ก charset ต้องปรากฏภายใน 1,024 ไบต์แรกของเอกสาร — โดยทั่วไปคือบรรทัดแรกของ <head> เบราว์เซอร์จะตรวจจับการเข้ารหัสจากไบต์เหล่านั้น การประกาศ charset ในภายหลังอาจไม่มีผลต่อผลการตรวจจับ

บันทึกไฟล์เป็น UTF-8

เมตาแท็กเป็นเพียงการประกาศการเข้ารหัส ส่วนเครื่องมือแก้ไขของคุณต้องบันทึกไฟล์ด้วยการเข้ารหัสนั้นจริง ๆ VS Code, IntelliJ และ Sublime ต่างใช้ UTF-8 เป็นค่าเริ่มต้นในรุ่นใหม่ ไฟล์ที่บันทึกเป็น Windows-1252 หรือ ISO-8859-1 จะทำให้เกิดอักขระเพี้ยน (ตัวอักษรอ่านไม่ออก) แม้จะมีเมตาแท็กที่ถูกต้องก็ตาม

เอนทิตีของ HTML

อักขระพิเศษของ HTML (<, >, &, ") ต้องทำการหลีกเพื่อป้องกันความสับสนของตัวแยกวิเคราะห์: ใช้ &lt; แทน <, &gt; แทน >, &amp; แทน & และ &quot; แทน ". ภายในค่าของแอตทริบิวต์ &quot; เป็นสิ่งที่ต้องมีเมื่อค่าดังกล่าวครอบด้วยเครื่องหมายคำพูดคู่

การอ้างอิงอักขระด้วยตัวเลข

สามารถอ้างอิงอักขระ Unicode ใด ๆ ด้วยจุดรหัสของอักขระนั้น: &#9731; หรือ &#x2603; สำหรับตุ๊กตาหิมะ (☃) ควรใช้วิธีนี้เมื่อไม่สะดวกพิมพ์อักขระโดยตรง (เช่น สัญลักษณ์หายากหรืออักขระควบคุม) แต่หากเครื่องมือแก้ไขรองรับ ควรใช้อักขระ Unicode จริงมากกว่า

อีโมจิและคู่ตัวแทน

อีโมจิเป็นอักขระ Unicode ที่อยู่เหนือ U+FFFF และแสดงแทนด้วยคู่ตัวแทนใน UTF-16 (การเข้ารหัสที่ใช้ภายในสตริง JavaScript) ส่วน UTF-8 จะเข้ารหัสอีโมจิเหล่านี้เป็นลำดับขนาด 4 ไบต์ เมื่อกำหนด charset="utf-8" ไว้ อีโมจิจะแสดงผลได้โดยตรงโดยไม่ต้องใช้เอนทิตี

ข้อผิดพลาดในการเข้ารหัสที่พบบ่อย

การที่ "Don't" แสดงผลเป็น "Don’t" หมายความว่าไฟล์กำลังถูกตีความเป็น Latin-1 แต่ถูกบันทึกเป็น UTF-8 แก้ไขโดยบันทึกไฟล์เป็น UTF-8 และตรวจสอบว่ามี <meta charset="utf-8"> อยู่ เบราว์เซอร์รุ่นใหม่จะใช้ UTF-8 เป็นค่าเริ่มต้นก็ต่อเมื่อไม่มีเมตาแท็ก AND ไฟล์นั้นมีแนวโน้มว่าเป็น UTF-8

ส่วนหัว Content-Type ของ HTTP

เซิร์ฟเวอร์ยังสามารถประกาศการเข้ารหัสผ่านส่วนหัวของการตอบกลับได้ด้วย: Content-Type: text/html; charset=utf-8 ส่วนหัวมีลำดับความสำคัญเหนือเมตาแท็ก ดังนั้นเซิร์ฟเวอร์ที่กำหนดค่าไม่ถูกต้องอาจทำให้เกิดข้อผิดพลาดในการเข้ารหัส แม้ HTML จะเขียนไว้อย่างถูกต้องก็ตาม

การทำงานกับแบบฟอร์ม

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

หลีกเลี่ยง BOM

ไฟล์ UTF-8 อาจเริ่มต้นด้วยเครื่องหมายลำดับไบต์ (BOM, 0xEF 0xBB 0xBF) เบราว์เซอร์ส่วนใหญ่ยอมรับได้ แต่เครื่องมือและ CDN บางชนิดไม่รองรับ และ BOM อาจปรากฏเป็นอักขระที่มองเห็นได้ในเครื่องมือแก้ไขข้อความบางตัว บันทึกไฟล์เป็น "UTF-8 without BOM" เพื่อหลีกเลี่ยงปัญหาที่ไม่คาดคิด

ตรวจสอบความรู้

เหตุใด <meta charset="utf-8"> จึงต้องอยู่ภายใน 1,024 ไบต์แรกของเอกสาร HTML

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

ประกาศ <meta charset="utf-8"> เป็นองค์ประกอบลูกตัวแรกของ <head> และบันทึกไฟล์เป็น UTF-8 UTF-8 เข้ารหัสอักขระ Unicode ได้ทุกตัว รวมถึงอีโมจิและอักษรจากทุกภาษา ทำการหลีกอักขระ <, >, & และ " เป็นเอนทิตี ใช้การอ้างอิงด้วยตัวเลขสำหรับอักขระหายาก ระวังส่วนหัว Content-Type ของ HTTP ที่อาจมีผลเหนือเมตาแท็ก และ BOM ที่อาจปรากฏเป็นอักขระที่มองเห็นได้ในเครื่องมือบางชนิด

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
40
บทเรียน
159
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “charset และการจัดการ Unicode: อักขระพิเศษ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “charset และการจัดการ Unicode: อักขระพิเศษ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “charset และการจัดการ Unicode: อักขระพิเศษ”

ใช้ UTF-8 และเอนทิตี HTML เพื่อแสดงอักขระใด ๆ ได้อย่างถูกต้อง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “charset และการจัดการ Unicode: อักขระพิเศษ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ
  2. dir=rtl สำหรับข้อความจากขวาไปซ้าย
  3. องค์ประกอบ bdi และ bdo
  4. charset และการจัดการ Unicode: อักขระพิเศษ
← กลับไปที่ HTML Academy