ลิงค์ตัวยึด HTML5 คืออะไร?
idUp จนถึง HTML5 แท็กจำเป็นต้องระบุแอตทริบิวต์: href แต่ HTML5 ทำให้แอตทริบิวต์นั้นเป็นไปได้ เมื่อคุณเขียนแท็กโดยไม่มีแอตทริบิวต์ใด ๆ เรียกว่าลิงก์ตัวยึดตำแหน่ง
ลิงก์ตัวยึดตำแหน่งมีลักษณะดังนี้:
ก่อนหน้าการใช้ตัวยึดตำแหน่งระหว่างการพัฒนา
นักออกแบบเว็บไซต์เกือบทุกรายได้สร้างลิงก์ตัวยึดตำแหน่งไว้ในที่เดียวกันเพียงครั้งเดียวหรือขณะออกแบบและสร้างเว็บไซต์ ก่อน HTML5 เราจะเขียน:
เชื่อมโยงข้อความเป็นตัวยึดตำแหน่ง และฉันได้ส่งไซต์ mockup ไปยังลูกค้าด้วยตัวยึดตำแหน่งเพียงเพื่อให้ลูกค้าถามฉันว่า "ทำไมถึงไม่เชื่อมโยงกับข้อความ?"
ปัญหาเกี่ยวกับการใช้แฮชแท็ก (#) เป็นลิงก์ตัวยึดตำแหน่งคือลิงก์สามารถคลิกได้และอาจทำให้เกิดความสับสนสำหรับลูกค้าของคุณได้ และถ้ามีคนลืมอัปเดต URL ด้วย URL ที่ถูกต้องลิงก์เหล่านั้นอาจปรากฏบนเว็บไซต์ที่ไม่ทำงานได้เนื่องจากไม่ได้เชื่อมโยงกับอะไรเลย
คุณควรเริ่มใช้แท็กโดยไม่มีแอตทริบิวต์ใด ๆ คุณสามารถจัดรูปแบบเหล่านี้ให้มีลักษณะคล้ายกับลิงก์อื่น ๆ บนหน้าเว็บของคุณ แต่จะไม่สามารถคลิกได้เนื่องจากเป็นเพียงตัวยึดตำแหน่งเท่านั้น
การใช้ตัวยึดตำแหน่งลิงก์ในไซต์สด
แต่ลิงก์แทนที่มีสถานที่ในการออกแบบเว็บมากกว่าการพัฒนาเพียง ตำแหน่งเดียวที่ลิงก์ตัวยึดตำแหน่งสามารถส่องแสงอยู่ในการนำทาง ในหลาย ๆ กรณีรายการการนำทางเว็บไซต์มีวิธีระบุว่าคุณต้องการให้หน้าเว็บใด เหล่านี้มักเรียกว่าตัวบ่งชี้ "คุณอยู่ที่นี่"
เว็บไซต์ส่วนใหญ่อาศัยค่าแอตทริบิวต์ id ในองค์ประกอบที่ต้องการเครื่องหมาย "คุณอยู่ที่นี่" แต่บางส่วนใช้แอตทริบิวต์ class เช่นกัน อย่างไรก็ตามแอตทริบิวต์ที่คุณใช้คุณต้องทำพวงของการทำงานไปยังทุกๆหน้าที่มีการนำทางนั้นเพิ่มและลบแอ็ตทริบิวต์จากองค์ประกอบที่ถูกต้อง
ด้วยลิงก์ตัวยึดตำแหน่งคุณสามารถเขียนการนาวิเกตได้ตามต้องการแล้วเพียงแค่นำแอ็ตทริบิวต์ href ออกจากลิงก์ที่เหมาะสมเมื่อคุณเพิ่มการนำทางไปยังเพจ ฉันเก็บรายการการนำทางทั้งหมดเป็นตัวอย่างในเครื่องมือแก้ไขของฉันดังนั้นจึงเป็นเพียงแค่การคัดลอกวางอย่างรวดเร็วแล้วลบ href นอกจากนี้คุณยังสามารถรับ CMS ของคุณเพื่อทำสิ่งเดียวกัน
นอกจากการเพิ่มรูปแบบพิเศษ (ฉันจะแสดงวิธีด้านล่าง) ไปยังลิงก์ตัวยึดตำแหน่งลิงก์นั้นจะไม่สามารถคลิกได้ เพื่อให้ลูกค้าไม่สับสนกับการคิดว่าอาจได้รับอย่างอื่นหากคลิกลิงก์การนำทางที่พวกเขาอยู่ในปัจจุบัน
การจัดตำแหน่งสไตล์ตัวยึด
ลิงก์ตัวยึดตำแหน่งใช้งานง่ายและมีสไตล์แตกต่างจากลิงก์อื่น ๆ บนหน้าเว็บของคุณ เพียงแค่ต้องแน่ใจทั้งสไตล์แท็กและ a: link tag ตัวอย่างเช่น:
a {color: red; แบบอักษร: หนา; ตกแต่งข้อความ: ไม่มี; } a: link {color: blue; font-weight: ปกติ; text-decoration: ขีดเส้นใต้ }CSS นี้จะทำให้การเชื่อมโยงตัวยึดเป็นตัวหนาและสีแดงโดยไม่มีการขีดเส้นใต้ แม้ว่าการเชื่อมโยงปกติจะมีน้ำหนักปกติสีฟ้าและขีดเส้นใต้
อย่าลืมรีเซ็ตรูปแบบใด ๆ ที่คุณไม่ต้องการนำมาจากแท็ก ตัวอย่างเช่นฉันตั้งค่าแบบอักษรเป็นตัวหนาสำหรับการเชื่อมโยงตัวยึดดังนั้นฉันจึงต้องตั้งค่าให้เป็น:
font-weight: ปกติ;สำหรับลิงก์มาตรฐาน เช่นเดียวกับการตกแต่งข้อความโดยการเอาออกด้วยตัวเลือกก็จะถูกนำออกไปสำหรับ a: link selector ถ้าฉันไม่ได้นำกลับมา