การระบุ URL ฐานของเอกสารด้วยองค์ประกอบ HTML

เว็บไซต์ถูกสร้างขึ้นด้วยชุดลิงก์ชี้ไปที่หน้าและแหล่งที่มาเช่นรูปภาพและสไตล์ มีสองวิธีคือ ระบุ URL ที่เชื่อมโยงไปยังแหล่งข้อมูลเหล่านี้: ใช้เส้นทางสัมบูรณ์หรือเส้นทางสัมพัทธ์.

เส้นทางที่แน่นอนหมายถึงปลายทางที่เฉพาะเจาะจงโดยทั่วไปจะเริ่มต้นด้วยชื่อโดเมน (พร้อมกับ HTTP) เช่น www.domain.com/destination/source.jpg. เส้นทางสัมพัทธ์นั้นตรงกันข้าม: ปลายทางของลิงก์ขึ้นอยู่กับตำแหน่งรูทหรือในกรณีส่วนใหญ่ชื่อโดเมนของเว็บไซต์ของคุณ.

เส้นทางสัมพัทธ์ทั่วไปจะมีลักษณะดังนี้ด้านล่าง:

ตัวอย่างเช่นหากโดเมนเว็บไซต์ของคุณเป็นเช่นนั้น, hongkiat.com เส้นทางภาพจะแก้ไข hongkiat.comimages_2 / ระบุเอกสารฐาน-URL ที่มี HTML-ฐาน element.png. คุณควรเข้าใจสิ่งนี้หากคุณพัฒนาเว็บไซต์มาระยะหนึ่งแล้ว.

แต่ส่วนใหญ่คุณอาจไม่เคยได้ยินเกี่ยวกับ ธาตุ. แท็ก HTML นี้มีมาตั้งแต่ HTML4 แต่มีน้อยมากที่จะเห็นการติดตั้งใช้งานอย่างรวดเร็ว W3C อธิบายองค์ประกอบนี้เป็น:

“องค์ประกอบพื้นฐานช่วยให้ผู้เขียนระบุ URL ฐานของเอกสาร สำหรับวัตถุประสงค์ในการแก้ไข URL ที่เกี่ยวข้องและชื่อของ บริบทการสืบค้นเริ่มต้น เพื่อวัตถุประสงค์ในการเชื่อมโยงหลายมิติต่อไปนี้.”

นี้ องค์ประกอบโดยทั่วไปจะตัดสินใจ URL ฐานสำหรับเส้นทางญาติในหน้าเว็บ แทนที่จะขึ้นอยู่กับที่ตั้งรูทหรือโดเมนของเว็บไซต์ของคุณคุณสามารถชี้ไปที่อื่นหรืออาจจะเป็น URL ที่ทรัพยากรของคุณอยู่ใน CDN (เครือข่ายการจัดส่งเนื้อหา) เรามาดูกันว่ามันใช้งานได้จริงอย่างไร.

การใช้องค์ประกอบพื้นฐาน

ถูกกำหนดไว้ด้านข้าง และ แท็กภายใน . จากตัวอย่างต่อไปนี้เราได้ตั้งค่า URL พื้นฐานเป็น Google.

ข้อมูลจำเพาะนี้จะส่งผลต่อเส้นทางทั้งหมดภายในเอกสารรวมถึงเส้นทางที่ระบุไว้ใน href คุณลักษณะและ src ของภาพ ดังนั้นสมมติว่าเรามีสไตล์ชีทรูปภาพและลิงค์ในชุดเอกสารที่มีเส้นทางสัมพัทธ์เช่นนี้ตัวอย่างเช่น:

  ลิงค์ Anchor  

แม้ว่าหน้าเว็บของเราจะอยู่ภายใต้ demo.hongkiat.com เส้นทางสัมพัทธ์จะอ้างถึง hongkiat.maxcdn.com, ติดตามเส้นทางพื้นฐานที่ระบุใน แท็ก ลองโฮเวอร์เหนือลิงก์จากนั้นเบราว์เซอร์จะแสดงตำแหน่งของเส้นทางที่ตรง.

เส้นทางสัมพัทธ์ทั้งหมดจะเป็น:

  ลิงค์ Anchor  

การตั้งค่าเป้าหมายลิงค์เริ่มต้น

นอกเหนือจากการกำหนด URL พื้นฐานแล้ว แท็กยังสามารถตั้งค่าเป้าหมายลิงก์เริ่มต้นผ่าน เป้า คุณลักษณะ สมมติว่าคุณต้องการให้ลิงก์ทั้งหมดในเอกสารเปิดขึ้น ในแท็บใหม่ของเบราว์เซอร์, ตั้งค่า เป้า กับ _ blank, ชอบมาก.

ข้อ จำกัด

อย่างไรก็ตามมีแท็กบางประการในบางกรณี:

ก่อนอื่น การสนับสนุนเบราว์เซอร์ดีมาก มันทำงานได้ใน IE6 แต่ IE6 คิดว่าต้องใช้แท็กปิด . นี่อาจทำให้เกิดปัญหาลำดับชั้นในเอกสารหากแท็กปิดไม่มีการระบุ วิธีที่รวดเร็วในการแก้ไขปัญหานี้คือการเพิ่ม ปิดภายในความคิดเห็น, .

หากคุณกำลังใช้ # ร่วมกับ เพื่อเชื่อมโยงไปยังส่วนต่างๆภายในเอกสารคุณอาจพบปัญหาใน Internet Explorer 9 แทนที่จะข้ามไปยังส่วนที่อ้างถึง Internet Explorer 9 จะโหลดหน้าเว็บซ้ำ.

นอกจากนี้ช่องว่าง href จะส่งผลให้ URL ฐานแทนการเชื่อมโยงไปยังไดเรกทอรีปัจจุบันที่มีอยู่หน้า (นี่คือพฤติกรรมเบราว์เซอร์เริ่มต้น) ซึ่งอาจทำให้เกิดปัญหาการอ้างอิงที่ไม่คาดคิด.

สรุป

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

• URL แบบสัมบูรณ์และแบบสัมพัทธ์ - MSDN
• องค์ประกอบพื้นฐาน HTML - W3C