รหัสประจำตัวที่ไม่ซ้ำภายในเว็บเพจ
ตาม W3C แอตทริบิวต์ ID ใน HTML คือ:
ตัวระบุที่ไม่ซ้ำกันสำหรับองค์ประกอบ
นี่เป็นคำอธิบายง่ายๆของแอตทริบิวต์ที่มีประสิทธิภาพมาก แอ็ตทริบิวต์ ID สามารถทำการดำเนินการได้หลายอย่างสำหรับเว็บเพจ:
- ตัวเลือกสไตล์ชีต - เป็นฟังก์ชันที่คนส่วนใหญ่ใช้แอตทริบิวต์ ID สำหรับ เนื่องจากมีเอกลักษณ์เฉพาะคุณจึงมั่นใจได้ว่าคุณจะจัดรูปแบบเฉพาะหนึ่งรายการในเว็บเพจของคุณเมื่อคุณใช้คุณสมบัติรหัส ข้อเสียในการใช้รหัสเพื่อจัดรูปแบบคือมีความเฉพาะเจาะจงสูงมากซึ่งอาจทำให้เป็นเรื่องท้าทายมากถ้าคุณต้องการแทนที่สไตล์ด้วยเหตุผลบางอย่างในสไตล์ชีต ด้วยเหตุนี้การปฏิบัติเว็บในปัจจุบันจึงผันแปรไปสู่การใช้คลาสและตัวเลือกชั้นเรียนแทน ID และตัวเลือก ID สำหรับวัตถุประสงค์ในการจัดรูปแบบทั่วไป
- เบรกเกอร์ที่มี ชื่อสำหรับการเชื่อมโยงไปยัง - เว็บเบราว์เซอร์อนุญาตให้คุณกำหนดเป้าหมายไปยังตำแหน่งที่แม่นยำในเอกสารทางเว็บของคุณโดยชี้ไปที่ ID ที่ท้าย URL คุณเพียงแค่เพิ่มรหัสลงในตอนท้ายของ URL ของหน้าโดยมีเครื่องหมายปอนด์ (#) นอกจากนี้คุณสามารถเชื่อมโยงไปยัง anchor เหล่านี้กับเพจด้วยการเพิ่มเครื่องหมายปอนด์ (#) และชื่อ ID ในแอตทริบิวต์ href สำหรับองค์ประกอบ ตัวอย่างเช่นถ้าคุณมีส่วนที่มี ID ของที่ ติดต่อ คุณสามารถเชื่อมโยงไปยังหน้านั้นได้ด้วย:
นี่คือข้อความลิงค์ - การอ้างอิงสำหรับสคริปต์ - หากคุณเขียนฟังก์ชัน Javascript ใด ๆ คุณจะต้องใช้แอตทริบิวต์ ID เพื่อให้คุณสามารถแก้ไของค์ประกอบที่แม่นยำบนหน้าเว็บด้วยสคริปต์ของคุณ
- การประมวลผลอื่น ๆ - id ช่วยให้คุณสามารถประมวลผลเอกสารเว็บของคุณได้ไม่ว่าคุณจะต้องการอะไรก็ตาม ตัวอย่างเช่นคุณอาจแยก HTML ลงในฐานข้อมูลและแอตทริบิวต์ ID ระบุฟิลด์
กฎสำหรับการใช้แอตทริบิวต์รหัส
มีกฎบางประการที่คุณต้องปฏิบัติตามเพื่อให้มีเอกสารที่ถูกต้องซึ่งใช้แอตทริบิวต์ id ในเอกสาร:
- ID ต้องขึ้นต้นด้วยตัวอักษร (az หรือ AZ)
- อักขระที่ตามมาทั้งหมดอาจเป็นตัวอักษรตัวเลข (0-9) เครื่องหมายยัติภังค์ (-) เครื่องหมายขีดล่าง (_) เครื่องหมายทวิภาค (:) และเครื่องหมาย ()
- แต่ละรหัสต้องไม่ซ้ำกันภายในเอกสาร ทำไม?
ใช้แอตทริบิวต์รหัส
เมื่อคุณได้ระบุองค์ประกอบที่ไม่ซ้ำกันของเว็บไซต์ของคุณแล้วคุณสามารถใช้สไตล์ชีตเพื่อจัดองค์ประกอบขององค์ประกอบนั้นได้
ติดต่อเรา
มีเนื้อหาข้อความอยู่ที่นี่
div # contact-section {background: # 0cf;}
- หรือ -
# contact-section {background: # 0cf;}
ทั้งสอง selectors จะทำงาน ส่วนแรก (div # contact-section) จะกำหนดเป้าหมายเป็นส่วนที่มีแอตทริบิวต์ ID ของ "contact-section" ส่วนที่สอง (# contact-section) จะยังคงกำหนดเป้าหมายองค์ประกอบที่มี ID ของ "contact-section" แต่ก็ไม่ทราบว่าสิ่งที่ต้องการคือส่วนใดส่วนหนึ่ง ผลลัพธ์สุดท้ายของการจัดแต่งทรงผมจะเหมือนกัน
นอกจากนี้คุณยังสามารถเชื่อมโยงไปยังองค์ประกอบเฉพาะได้โดยไม่ต้องเพิ่มแท็กใด ๆ :
เชื่อมโยงไปยังข้อมูลการติดต่อ
อ้างอิงย่อหน้านั้นในสคริปต์ของคุณด้วยเมธอด JavaScript "getElementById":
document.getElementById ( "ติดต่อส่วน")
แอตทริบิวต์รหัสยังคงเป็นประโยชน์ในรูปแบบ HTML แม้ว่าจะมีการเปลี่ยนตัวเลือกระดับชั้นสำหรับวัตถุประสงค์ในการออกแบบโดยทั่วไป ความสามารถในการใช้แอตทริบิวต์ ID เป็นเบ็ดสำหรับสไตล์ในขณะที่ยังใช้เป็น anchor สำหรับลิงก์หรือเป้าหมายของสคริปต์ซึ่งหมายความว่าพวกเขายังมีที่สำคัญในการออกแบบเว็บในวันนี้
แก้ไขโดย Jeremy Girard