เรียนรู้วิธีใช้แอตทริบิวต์ HTML โดยดูจากชื่อและค่าแอตทริบิวต์ที่ใช้บ่อยที่สุด
แอตทริบิวต์ HTML คืออะไร
ใน HTML แอตทริบิวต์เป็นเครื่องมือปรับแต่งที่ใช้ในการเพิ่มข้อมูลเพิ่มเติมให้กับองค์ประกอบ HTML หรือเพื่อเปลี่ยนการทำงานเริ่มต้น (นอกกรอบ)
องค์ประกอบ HTML ที่ไม่มีแอตทริบิวต์เพิ่มมีลักษณะดังนี้:
<tag>Content</tag>องค์ประกอบ HTML พร้อมแอตทริบิวต์ ถูกกำหนดดังนี้:
<tag attribute="value">Content</tag>เมื่อคำนึงถึงโมเดลดังกล่าวแล้ว เรามาดูตัวอย่างแอตทริบิวต์ที่ใช้งานได้จริง
แอตทริบิวต์ href
href คุณลักษณะเป็นหนึ่งในคุณลักษณะที่สำคัญที่สุดใน HTML
href ใช้สำหรับระบุ URL สำหรับ:
- ไฮเปอร์ลิงก์ (เรียกอีกอย่างว่า “ลิงก์”)
- หรือสำหรับการนำเข้าทรัพยากรภายนอก เช่น สไตล์และสคริปต์
กรณีการใช้งานทั่วไปสำหรับ href คือการเพิ่ม URL ลิงค์บนองค์ประกอบสมอ :
<a href="url-path">Link text</a>ลิงก์เหล่านี้อนุญาตให้ผู้ใช้คลิกจากหน้าหนึ่งไปอีกหน้า ทั้งแบบภายใน (บนเว็บไซต์/โดเมนเดียวกัน) หรือ ภายนอก (ไปยังโดเมนเว็บไซต์อื่นๆ)
ลิงก์ภายใน
ลิงก์ภายในใช้เส้นทางสัมพัทธ์:
<a href="/">Home</a>
ตามมาตรฐาน "/" นำไปสู่หน้าแรกของเว็บไซต์ใด ๆ ซึ่งก็คือ index.html หน้า.
หากคุณมีเพจชื่อ เกี่ยวกับ และเอกสาร HTML ที่เกี่ยวข้องเรียกว่า about.html คุณสามารถเชื่อมโยงภายในเช่นนี้:
<a href="/about">About</a>ลิงก์นี้นำไปสู่หน้าเกี่ยวกับ TechStacker
ลิงก์ภายนอก
ลิงก์ภายนอกจำเป็นต้องมีเส้นทางที่แน่นอน:
<a href="https://www.youtube.com">Go to YouTube.com</a>แอตทริบิวต์เป้าหมาย
ในขณะที่เรากำลังทำงานกับองค์ประกอบจุดยึด มาดูแอตทริบิวต์องค์ประกอบจุดยึดที่สำคัญอื่น เป้าหมาย แอตทริบิวต์
เป้าหมาย แอตทริบิวต์ระบุ ที่ไหน เพื่อเปิดลิงก์เมื่อผู้ใช้คลิกลิงก์เหล่านั้น
ตัวอย่างเช่น หากคุณคลิกลิงก์ภายนอกด้านล่าง คุณจะเข้าสู่ YouTube.com ในส่วนเดียวกัน หน้าต่างแท็บเบราว์เซอร์ที่คุณอยู่ในตอนนี้:
<a href="https://www.youtube.com/">Go to YouTube.com</a>ไปที่ YouTube.com
สิ่งนี้เกิดขึ้นเพราะโดยค่าเริ่มต้น องค์ประกอบมี เป้าหมาย แอตทริบิวต์ที่มีค่า _self — ซึ่งหมายความว่ามันเปิด href ค่าลิงก์ในหน้าต่างเดียวกับที่ผู้ใช้อยู่
ดังนั้นองค์ประกอบลิงก์นี้:
<a href="https://www.youtube.com/"></a>คอมพิวเตอร์/เบราว์เซอร์อ่านดังนี้:
<a href="https://www.youtube.com/" target="_self"></a>แต่ถ้าคุณต้องการเปิดลิงก์ในแท็บเบราว์เซอร์ใหม่ล่ะ
ไม่มีปัญหา คุณสามารถแทนที่ค่าเริ่มต้น _self มีค่าด้วย _blank ค่า:
<a href="https://www.youtube.com" target="_blank" rel="noopener"
>Go to YouTube.com (opens in a new tab)</a
>ตอนนี้ลิงก์ YouTube จะเปิดขึ้นในแท็บเบราว์เซอร์ใหม่:
ไปที่ YouTube.com (แท็บใหม่)
ฉันจะใช้โอกาสนี้โปรโมตช่อง YouTube ของฉัน:
ลิงก์ไปยังช่อง YouTube ของฉัน (TechStacker)
อ่านเพิ่มเติมเกี่ยวกับองค์ประกอบสมอ/ลิงก์
แอตทริบิวต์ที่ไม่มีค่า
คุณลักษณะ โดยปกติ ประกอบด้วยชื่อแอตทริบิวต์และค่าแอตทริบิวต์ เช่น ในตัวอย่างองค์ประกอบจุดยึด
อย่างไรก็ตาม บางครั้ง ค่า (พฤติกรรม) มีอยู่ในชื่อแอตทริบิวต์
ตัวอย่างเช่น เลื่อน แอตทริบิวต์เพื่อแก้ไข HTML
