Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ href ของ HTML <a>

แอตทริบิวต์ href ขององค์ประกอบ <a> (anchor) ใช้สำหรับกำหนด ลิงก์ (URL) ของหน้าเว็บปลายทาง

ไวยากรณ์ (Syntax)

<a href="URL">

URL สามารถเป็น:

  • Absolute URL — URL เต็ม (เช่น https://tutorialspoint.com/java)
  • Relative URL — URL สัมพัทธ์ (เช่น /javascript, ../page.html)
  • Protocol links — mailto:email@example.com, tel:+123456789, javascript:alert()
  • Anchor links — #section-id (เลื่อนไปยังส่วนในหน้าเดียวกัน)

ตัวอย่าง 1: ลิงก์ทั่วไป

<!DOCTYPE html>
<html>
<body>
<h2>การเรียนรู้น่าสนุก</h2>
<p>
  เรียนรู้แนวคิดของ <a href="https://tutorialspoint.com/java">Java!</a>
  ลอง JavaScript จากเว็บไซต์เรา: <a href="/javascript">JavaScript!</a>
</p>
</body>
</html>

ตัวอย่าง 2: ลิงก์อีเมล (mailto)

<!DOCTYPE html>
<html>
<body>
<h2>การเรียนรู้น่าสนุก</h2>
<p>เรียนรู้แนวคิดของ <a href="https://tutorialspoint.com/java">Java!</a></p>
<p>สำหรับบทเรียนเพิ่มเติม กรุณา <a href="mailto:abcd@demo.com?cc=pqr@demo.com&subject=DEMO EMAIL">ส่งอีเมล</a></p>
</body>
</html>

ผลลัพธ์

ตัวอย่าง 1: ลิงก์ "Java!" ไปยัง tutorialspoint.com, ลิงก์ "JavaScript!" ไปยัง /javascript (relative)

ตัวอย่าง 2: ลิงก์ "ส่งอีเมล" จะเปิด email client (เช่น Outlook, Gmail) พร้อมกรอก to, cc, subject อัตโนมัติ

คำอธิบาย mailto parameters

พารามิเตอร์คำอธิบายตัวอย่าง
toผู้รับ (อยู่ใน href หลัง mailto:)mailto:user@example.com
ccผู้รับแบบคัดลอก?cc=copy@example.com
bccผู้รับแบบลับ&bcc=secret@example.com
subjectหัวข้ออีเมล&subject=Hello
bodyเนื้อหาอีเมล&body=Message%20here

แอตทริบิวต์เพิ่มเติมของ <a>: target="_blank" (เปิดแท็บใหม่), rel="noopener noreferrer" (ความปลอดภัย), download (ดาวน์โหลดไฟล์), hreflang, type