ใน HTML แท็ก link เป็นองค์ประกอบที่ปิดตัวเอง โดยปกติจะอยู่ที่ส่วน head ของเอกสาร ใช้เพื่อสร้างการเชื่อมโยงกับทรัพยากรภายนอก เช่น สไตล์ชีท ไอคอน ฯลฯ แท็ก link มีหลายแอตทริบิวต์ โดยที่ rel และ href ถูกใช้บ่อยที่สุด
แอตทริบิวต์ rel กำหนดความสัมพันธ์ระหว่างเอกสารปัจจุบันและทรัพยากรที่เชื่อมโยง ค่าแอตทริบิวต์ rel ทั่วไปคือ:
stylesheet : แสดงถึงลิงก์ไปยังสไตล์ชีต CSS ภายนอก icon : หมายถึงไอคอนที่เชื่อมโยงกับเว็บไซต์ เช่น ไอคอนประจำเว็บไซต์ แอตทริบิวต์ href ใช้เพื่อระบุ URL ของทรัพยากรที่เชื่อมโยง
ตัวอย่างแท็ก link ทั่วไปคือ:
<!DOCTYPE html> <html> <หัว> <meta charset="UTF-8"> <title>เว็บไซต์ของฉัน</title> <!-- ลิงก์ไปยังสไตล์ชีต CSS ภายนอก --> <link rel="stylesheet" href="styles.css"> <!-- ลิงค์ไปยังไอคอนเว็บไซต์ --> <link rel="icon" href="favicon.ico"> </หัว> <ร่างกาย> <h1>ลิงก์!</h1> <p>นี่คือข้อมูลเบื้องต้นเกี่ยวกับลิงก์ </p> </ร่างกาย> </html>
ในตัวอย่างนี้ เราใช้แท็ link สองแท็ก แท็ก link แรกเชื่อมโยงเอกสาร HTML กับสไตล์ชีต CSS ภายนอก styles.css ซึ่งใช้เพื่อกำหนดสไตล์ของเพจ แท็ก link ที่สองเชื่อมโยงเอกสาร HTML กับเว็บไซต์ favicon.ico ซึ่งจะแสดงเมื่อผู้ใช้เปิดเว็บไซต์ในเบราว์เซอร์
แน่นอนว่าแท็ก link มีคุณลักษณะและการใช้งานอื่นๆ ต่อไปนี้คือคุณลักษณะและกรณีการใช้งานทั่วไปบางส่วน:
type : คุณลักษณะนี้ใช้เพื่อระบุประเภท MIME ของทรัพยากรที่เชื่อมโยง ตัวอย่างเช่น เมื่อลิงก์ไปยังสไตล์ชีต CSS คุณสามารถระบุประเภทเป็น text/css ในกรณีส่วนใหญ่ เบราว์เซอร์สามารถระบุประเภททรัพยากรได้โดยอัตโนมัติ ดังนั้นจึงไม่จำเป็นต้องระบุแอตทริบิวต์ type ตัวอย่าง:
<link rel="stylesheet" href="styles.css" type="text/css">
media : คุณลักษณะนี้ช่วยให้คุณระบุประเภทสื่อที่จะใช้กับสไตล์ชีต ตัวอย่างเช่น คุณสามารถสร้างสไตล์ชีตเฉพาะการพิมพ์ที่ใช้เมื่อผู้ใช้พิมพ์เพจ ตัวอย่าง:
<link rel="stylesheet" href="print.css" media="print">
sizes : เมื่อใช้แท็ก link เพื่อลิงก์ไปยังไอคอนหลายขนาด คุณสามารถใช้แอตทริบิวต์ sizes เพื่อระบุขนาดของไอคอนได้ สิ่งนี้มีประโยชน์สำหรับสถานการณ์ที่แสดงไอคอนในขนาดที่แตกต่างกันขึ้นอยู่กับอุปกรณ์ ตัวอย่าง:
<link rel="icon" href="icon-48x48.png" size="48x48"> <link rel="icon" href="icon-96x96.png" size="96x96">
crossorigin : เมื่อลิงก์ไปยังทรัพยากรข้ามต้นทาง คุณสามารถใช้แอตทริบิวต์ crossorigin เพื่อระบุการตั้งค่า CORS (การแชร์ทรัพยากรข้ามต้นทาง) สำหรับทรัพยากรได้ ตัวอย่าง:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : คุณลักษณะนี้ใช้เพื่อรับรองความสมบูรณ์ของทรัพยากรภายนอก และสามารถใช้ร่วมกับแอตทริบิวต์ crossorigin ได้ ด้วยการให้แฮชตามเนื้อหาแก่ทรัพยากร (เช่น SHA-256) คุณสามารถมั่นใจได้ว่าทรัพยากรจะไม่ถูกแก้ไข ตัวอย่าง:
<link rel = "stylesheet" href = "https://link.com/styles.css" crossorigin = "ไม่ระบุชื่อ" ความสมบูรณ์ = "sha256-base64-encoded-hash">
preload : rel="preload" สามารถใช้เพื่อโหลดทรัพยากรที่สำคัญล่วงหน้า เช่น แบบอักษร รูปภาพ หรือสคริปต์ สิ่งนี้จะช่วยเพิ่มประสิทธิภาพในการโหลดหน้าเว็บ ตัวอย่าง:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" ครอสโอริจิน>
ต่อไปนี้เป็นคุณลักษณะทั่วไปและการใช้แท็ก link
นอกเหนือจากที่กล่าวไปแล้ว rel ยังมีค่าแอตทริบิวต์เพิ่มเติมอีกด้วย:
alternate : ใช้ rel="alternate" เพื่อจัดเตรียมเอกสารเวอร์ชันอื่น เช่น หน้าในภาษาอื่นหรือสำหรับอุปกรณ์อื่น ตัวอย่าง:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="เฉพาะหน้าจอและ (ความกว้างสูงสุด: 640px)" href="https://link.com/mobile/a">
dns-prefetch : ชื่อโดเมนสามารถแก้ไขได้ล่วงหน้าผ่าน rel="dns-prefetch" เพื่อลดเวลาในการค้นหา DNS และเพิ่มความเร็วในการโหลดทรัพยากร ตัวอย่าง:
<link rel="dns-prefetch" href="//link.com">
preconnect : เช่นเดียวกับ dns-prefetch rel="preconnect" สามารถสร้างการเชื่อมต่อ TCP ล่วงหน้ากับทรัพยากรบุคคลที่สาม ซึ่งช่วยลดเวลาที่ต้องใช้ในการสร้างการเชื่อมต่อ ตัวอย่าง:
<link rel="เชื่อมต่อล่วงหน้า" href="https://link.com">
prefetch : ใช้ rel="prefetch" เพื่อดึงข้อมูลล่วงหน้าและแคชทรัพยากรเพื่อใช้ในหน้าถัดไป สิ่งนี้มีประโยชน์สำหรับการโหลดทรัพยากรล่วงหน้าที่อาจใช้ในเพจ ตัวอย่าง:
<link rel="prefetch" href="pre-page.html">
canonical : การใช้ rel="canonical" ช่วยให้เครื่องมือค้นหามี URL ตามรูปแบบบัญญัติของหน้าเว็บได้ ซึ่งช่วยหลีกเลี่ยงปัญหาเนื้อหาที่ซ้ำกัน ตัวอย่าง:
<link rel="canonical" href="https://link.com/a/post">
license : ใช้ rel="license" เพื่อระบุ URL ใบอนุญาตของเอกสาร ตัวอย่าง:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : ใช้ rel="manifest" เพื่อเชื่อมโยงไฟล์ Manifest ของแอปพลิเคชันเว็บ (โดยปกติจะอยู่ในรูปแบบ JSON) ไปยังเอกสาร HTML ไฟล์ Manifest ประกอบด้วยข้อมูลเมตาของเว็บแอปพลิเคชัน เช่น ชื่อ คำอธิบาย ไอคอน ฯลฯ ตัวอย่าง:
<link rel="manifest" href="manifest.json">
โปรดทราบว่าเบราว์เซอร์ที่แตกต่างกันอาจมีระดับการสนับสนุนที่แตกต่างกันสำหรับคุณสมบัติและฟังก์ชันเหล่านี้ ขอแนะนำให้อ่านเอกสารที่เกี่ยวข้องเมื่อใช้คุณสมบัติใหม่เพื่อให้มั่นใจถึงความเข้ากันได้และฟังก์ชันการทำงาน
นี่เป็นการสรุปบทความนี้เกี่ยวกับการใช้งานแอตทริบิวต์แท็กลิงก์ใน HTML สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์แท็กลิงก์ HTML โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่างต่อไป ฉันหวังว่าคุณจะสนับสนุนฉัน อนาคต downcodes.com!