URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์
ทำความเข้าใจความแตกต่างระหว่างเส้นทางแบบสัมบูรณ์และแบบสัมพัทธ์
URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
ที่อยู่เว็บคืออะไร
ที่อยู่เว็บ (ตัวระบุตำแหน่งทรัพยากรแบบเดียวกัน) คือที่อยู่เต็มของทรัพยากรบนเว็บ
ที่อยู่เว็บประกอบด้วยส่วนต่าง ๆ ดังนี้:
https://example.com:443/products/widget?color=red#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment
│ │ │ │ └─ Query string
│ │ │ └─ Path
│ │ └─ Port
│ └─ Domain
└─ Protocolที่อยู่เว็บแบบสัมบูรณ์
ที่อยู่เว็บแบบสัมบูรณ์มีที่อยู่เต็ม ซึ่งประกอบด้วยโพรโทคอล โดเมน และเส้นทาง:
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->ที่อยู่เว็บแบบสัมพัทธ์
ที่อยู่เว็บแบบสัมพัทธ์อ้างอิงจากตำแหน่งของหน้าปัจจุบัน จึงไม่จำเป็นต้องระบุโพรโทคอลหรือโดเมน:
<!-- Current page: https://example.com/blog/post.html -->
<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->
<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->
<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->ที่อยู่เว็บแบบสัมพัทธ์สามรูปแบบ
ที่อยู่เว็บแบบสัมพัทธ์มีสามรูปแบบ:
<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>
<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>
<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">การนำทางด้วย ../ --
ใช้ ../ เพื่อย้อนขึ้นไปหนึ่งระดับของไดเรกทอรี:
<!-- File structure:
/
├── index.html
├── about.html
└── blog/
├── post1.html
└── post2.html
-->
<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a> <!-- same folder -->
<a href="../">Home</a> <!-- up one level -->
<a href="../about.html">About</a> <!-- up then file -->ควรใช้ที่อยู่เว็บแบบสัมบูรณ์หรือแบบสัมพัทธ์เมื่อใด
แนวทาง:
- ทรัพยากรภายนอก — ใช้แบบสัมบูรณ์เสมอ:
https://... - ทรัพยากรจาก CDN — ใช้แบบสัมบูรณ์หรือแบบอ้างอิงโพรโทคอลได้
- การนำทางภายใน — แบบสัมพัทธ์จากราก (
/page) ปลอดภัยที่สุด - ไดเรกทอรีเดียวกัน — แบบสัมพัทธ์ (
page.html) สะดวกกว่า
แบบสัมพัทธ์จากรากย้ายได้
ที่อยู่เว็บแบบสัมพัทธ์จากราก (/path) ยังคงใช้ได้แม้ย้ายหน้าไปที่อื่น:
<!-- If this page moves from /blog/post.html to /articles/post.html -->
<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a> <!-- always → example.com/contact -->
<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a> <!-- different result in new location -->องค์ประกอบสำหรับกำหนดฐาน
องค์ประกอบ <base> ใน <head> ใช้กำหนดที่อยู่เว็บฐานสำหรับลิงก์แบบสัมพัทธ์ทั้งหมด:
<head>
<base href="https://example.com/docs/">
</head>
<body>
<!-- This resolves to: https://example.com/docs/guide.html -->
<a href="guide.html">Guide</a>
</body>การเข้ารหัสที่อยู่เว็บ
อักขระพิเศษในที่อยู่เว็บต้องเข้ารหัสแบบเปอร์เซ็นต์:
<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>
<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>
<!-- Common encodings:
space → %20
& → %26
= → %3D
# → %23
-->ที่อยู่เว็บหลัก
เมื่อเข้าถึงหน้าเว็บได้จากหลายที่อยู่เว็บ ให้ใช้แท็กสำหรับประกาศที่อยู่เว็บหลักที่ต้องการ:
<head>
<!-- Prevents duplicate content SEO penalty -->
<link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->แนวทางปฏิบัติที่ดีสำหรับที่อยู่เว็บ
ปฏิบัติตามหลักการตั้งที่อยู่เว็บเหล่านี้:
- ใช้ตัวอักษรพิมพ์เล็กเท่านั้น
- ใช้ยัติภังค์ ไม่ใช่ขีดล่าง เพื่อคั่นคำ
- ทำให้ที่อยู่เว็บสั้นและสื่อความหมาย
- หลีกเลี่ยงอักขระพิเศษ — ให้เข้ารหัสอักขระเหล่านั้น
- ใช้รูปแบบสัมพัทธ์จากรากสำหรับลิงก์ภายใน
ตรวจสอบอย่างรวดเร็ว
คุณมีไฟล์อยู่ที่ /blog/post.html และต้องการสร้างลิงก์ไปยัง /about.html ที่อยู่เว็บแบบสัมพัทธ์ใดปลอดภัยที่สุด
สรุป: ที่อยู่เว็บแบบสัมบูรณ์และแบบสัมพัทธ์
สรุปประเภทของที่อยู่เว็บ:
- แบบสัมบูรณ์ — ที่อยู่เว็บเต็มซึ่งรวมโพรโทคอลและโดเมน
- แบบสัมพัทธ์จากราก — เริ่มต้นด้วย
/และอ้างอิงจากรากของโดเมน - แบบสัมพัทธ์ — อ้างอิงจากตำแหน่งของไฟล์ปัจจุบัน
../— ย้อนขึ้นไปหนึ่งระดับของไดเรกทอรี<base href>— กำหนดฐานสำหรับที่อยู่เว็บแบบสัมพัทธ์ทั้งหมด
คำถามที่พบบ่อย
บทเรียน “URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์”
ทำความเข้าใจความแตกต่างระหว่างเส้นทางแบบสัมบูรณ์และแบบสัมพัทธ์ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- องค์ประกอบ anchor และแอตทริบิวต์ href
- URL แบบสัมบูรณ์เทียบกับแบบสัมพัทธ์
- การเปิดลิงก์ในแท็บใหม่และแอตทริบิวต์ download
- การเชื่อมโยงไปยังส่วนต่าง ๆ ด้วยตัวระบุแฟรกเมนต์