จากการศึกษาก่อนหน้านี้ เรามีความเข้าใจอย่างง่ายเกี่ยวกับแท็ก HTML และรู้ว่าเราสามารถเพิ่มแอตทริบิวต์บางอย่างให้กับแท็กได้ คุณลักษณะเหล่านี้มีข้อมูลเพิ่มเติมเกี่ยวกับแท็ก เช่น:
(1) คุณลักษณะ href สามารถระบุที่อยู่ลิงก์สำหรับแท็ก <a> ได้
(2) คุณลักษณะ src สามารถระบุเส้นทางของรูปภาพสำหรับแท็ก <img>
(3) แอตทริบิวต์ style สามารถกำหนดสไตล์ CSS สำหรับแท็กเกือบทั้งหมด
ในบทความนี้ เราจะอธิบายคำจำกัดความและการใช้งานแอตทริบิวต์แท็ก HTML
1. คุณสมบัติคืออะไร?
แอตทริบิวต์สามารถให้ข้อมูลเพิ่มเติมสำหรับแท็ก HTML หรือแก้ไขแท็ก HTML จำเป็นต้องเพิ่มแอตทริบิวต์ในแท็กเริ่มต้น และรูปแบบไวยากรณ์คือ:
attr=มูลค่า
attr แสดงถึงชื่อแอตทริบิวต์ และ value แสดงถึงค่าแอตทริบิวต์ ค่าแอตทริบิวต์จะต้องล้อมรอบด้วยเครื่องหมายคำพูดคู่หรือเครื่องหมายคำพูดเดี่ยว ' '
หมายเหตุ: แม้ว่าทั้งเครื่องหมายคำพูดคู่และเครื่องหมายคำพูดเดี่ยวสามารถล้อมรอบค่าแอตทริบิวต์ได้ แต่เพื่อเป็นมาตรฐานและความเป็นมืออาชีพ โปรดใช้เครื่องหมายคำพูดคู่ให้มากที่สุด
แท็กต้องไม่มีแอตทริบิวต์หรือแอตทริบิวต์ตั้งแต่หนึ่งรายการขึ้นไป
ตัวอย่างการใช้แอตทริบิวต์ HTML:
<pid=user-infoclass=color-red>ยินดีต้อนรับ <fontcolor=redsize=3>ชื่อผู้ใช้</font> สู่เครือข่ายภาษา C คุณใช้งานไซต์นี้มาเป็นเวลา 3 ปีแล้ว นี่คือการเข้าสู่ระบบครั้งที่ 264 ของคุณ <p><divclass=clearfloat><pclass=left>ข้อมูลบัญชีชื่อผู้ใช้</p><pclass=right>ลายเซ็นส่วนบุคคลของชื่อผู้ใช้</p></div>
แสดงด้านล่าง:
1. คุณสมบัติพิเศษ
มีแอตทริบิวต์ HTML มากมาย ซึ่งสามารถแบ่งคร่าวๆ ได้เป็น 2 ประเภท:
(1) คุณลักษณะบางอย่างใช้กับแท็ก HTML ส่วนใหญ่หรือทั้งหมด เราเรียกคุณลักษณะเหล่านี้ว่าคุณลักษณะสากล
(2) คุณลักษณะบางอย่างใช้ได้กับแท็ก HTML หนึ่งหรือหลายแท็กเท่านั้น เราเรียกคุณลักษณะเหล่านี้ว่าคุณลักษณะพิเศษ
แท็ก <img> ใน HTML มีคุณสมบัติพิเศษ 2 รายการ ได้แก่ src และ alt และแท็ก <a> ยังมีคุณลักษณะพิเศษ 2 รายการ ได้แก่ href และเป้าหมาย ดังที่แสดงในตัวอย่างต่อไปนี้:
<img src=./logo.png alt=C ความกว้างของโลโก้เครือข่ายภาษา=100 สูง=50>
<a href=http://c.biancheng.net/ target=_blank>เครือข่ายภาษา C</a>
คำอธิบายของรหัส:
แอตทริบิวต์ src ในแท็ก <img> ใช้เพื่อกำหนดเส้นทางของรูปภาพ และแอตทริบิวต์ alt ใช้เพื่อกำหนดข้อมูลคำอธิบายของรูปภาพ เมื่อรูปภาพผิดปกติและไม่สามารถแสดงได้ตามปกติ ข้อมูลใน alt จะ จะถูกแสดง
แอตทริบิวต์ href ของแท็ก <a> ใช้เพื่อกำหนดที่อยู่ของลิงก์ และแอตทริบิวต์เป้าหมายใช้เพื่อกำหนดวิธีการเปิดหน้าใหม่ในเบราว์เซอร์
2. คุณสมบัติที่กำหนดเอง
นอกเหนือจากคุณลักษณะของตัวเองแล้ว HTML ยังช่วยให้เราสามารถปรับแต่งคุณลักษณะได้อีกด้วย แม้ว่าเบราว์เซอร์จะรับรู้คุณลักษณะเหล่านี้ได้ แต่ก็ไม่ได้เพิ่มเอฟเฟกต์พิเศษใดๆ ไว้ แท็กหรือพฤติกรรม
2. คุณลักษณะ HTML
● องค์ประกอบ HTML สามารถกำหนดแอตทริบิวต์ได้
●แอตทริบิวต์สามารถเพิ่มข้อมูลเพิ่มเติมให้กับองค์ประกอบได้
●โดยทั่วไปจะมีการอธิบายคุณลักษณะไว้ในแท็กเปิด
●แอตทริบิวต์จะปรากฏในรูปแบบของคู่ชื่อ/ค่าเสมอ เช่น: name=value
สรุป: องค์ประกอบใน HTML สามารถให้ข้อมูลเพิ่มเติมสำหรับองค์ประกอบ HTML ได้โดยการตั้งค่าแอตทริบิวต์ คุณลักษณะคือคุณลักษณะที่เป็นขององค์ประกอบ
1. คุณลักษณะทั่วไป
คุณลักษณะต่อไปนี้ใช้กับองค์ประกอบ HTML ส่วนใหญ่
(1) ชั้นเรียน
กำหนดชื่อคลาสอย่างน้อยหนึ่งชื่อ (ชื่อคลาส) สำหรับองค์ประกอบ html (ชื่อคลาสถูกนำมาใช้จากไฟล์สไตล์)
คุณลักษณะ class สามารถใช้ได้หลายครั้ง นั่นคือ class=classname1 classname2 classname3... (สามารถกรอกแอตทริบิวต์ class ได้หลายรายการในเครื่องหมายคำพูด)
(2)รหัส
กำหนดรหัสเฉพาะขององค์ประกอบ
สามารถตั้งค่าแอตทริบิวต์ id ได้ทีละรายการเท่านั้น นั่นคือ id=myid (กรอกได้เพียงรายการเดียว และหลายรายการไม่ถูกต้อง)
(3) สไตล์
ระบุรูปแบบอินไลน์ขององค์ประกอบ
(4) ชื่อเรื่อง
อธิบายข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ (ใช้เป็นแถบเครื่องมือ)
2. ค่าแอตทริบิวต์อ้างอิงที่ใช้กันทั่วไปของแอตทริบิวต์ HTML
ค่าทรัพย์สินควรอยู่ในเครื่องหมายคำพูดเสมอ
เครื่องหมายคำพูดคู่มักใช้กันมากที่สุด แต่ไม่มีปัญหาในการใช้เครื่องหมายคำพูดเดี่ยว
เคล็ดลับ: ในบางกรณี เช่น ค่าแอตทริบิวต์นั้นมีเครื่องหมายคำพูดคู่ คุณต้องใช้เครื่องหมายคำพูดเดี่ยว ตัวอย่างเช่น
name='JohnShotGunNelson'
3. เคล็ดลับ HTML: ใช้แอตทริบิวต์ตัวพิมพ์เล็ก
คุณสมบัติและค่าคุณสมบัติไม่คำนึงถึงขนาดตัวพิมพ์
อย่างไรก็ตาม World Wide Web Consortium แนะนำแอตทริบิวต์ตัวพิมพ์เล็ก/ค่าแอตทริบิวต์ในคำแนะนำ HTML 4
(X)HTML เวอร์ชันใหม่ต้องใช้แอตทริบิวต์ตัวพิมพ์เล็ก
4. คู่มืออ้างอิงแอตทริบิวต์ HTML
ดูรายการแอตทริบิวต์ HTML ทั้งหมด: รายการแท็ก HTML
คุณลักษณะที่ใช้กับองค์ประกอบ HTML ส่วนใหญ่มีดังต่อไปนี้: