จุดยึดบนไซต์มีประโยชน์มากหากคุณต้องการให้บทความในไซต์ของคุณมีการเปลี่ยนระหว่างรายการได้อย่างสะดวก พวกเขาเปลี่ยนหน้าไปยังจุดที่ต้องการหรือเปิดหน้าที่ต้องการ ช่วยให้ผู้ใช้ค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
หากคุณกำลังเขียนไซต์ของคุณเอง คุณควรคิดเกี่ยวกับวิธีทำให้การนำทางไซต์ของคุณสะดวกยิ่งขึ้น เพื่อให้ผู้ใช้ไม่ต้องค้นหาข้อมูลที่ต้องการจากทุกหน้าในไซต์ของคุณ ควรใช้เทคนิค "anchor" มันจะสร้างลิงค์ไปยังข้อมูลหรือเอกสารใด ๆ ที่ใดก็ได้ในเว็บไซต์ของคุณ
ทฤษฎี
ในการสร้างจุดยึด คุณต้องมีองค์ประกอบสองประการ:
- ส่วนของรหัสซึ่งระบุลิงก์ไปยังจุดยึดของเรา ถูกทิ้งไว้ในส่วนอื่นของเว็บไซต์
- ส่วนใดๆ ของรหัสที่สามารถระบุตัวระบุได้คือจุดยึดของเรา
ก่อนอื่นคุณต้องสร้างส่วนแรกของสมอ - ลิงก์ไปยังส่วนนั้น ลิงค์สมอมีสองส่วน: ลิงค์เพจและลิงค์สมอ
- สร้างแท็ก "a" หรือแท็กอื่นใดที่สนับสนุนแอตทริบิวต์ "href"
- ในแท็กนี้สร้างแอตทริบิวต์ "href"
- ระบุลิงก์ไปยังหน้าเว็บไซต์ในค่าแอตทริบิวต์
- หลังลิงก์ ระบุลิงก์ไปยังจุดยึดโดยใช้สัญลักษณ์ "#" และชื่อใดๆ ของจุดยึด (เขียนรวมกัน เช่น "#anchor")
หากคุณข้ามจุดที่ 3 และไม่ระบุลิงก์ไปยังหน้าเว็บไซต์ ระบบจะค้นหาจุดยึดในหน้าปัจจุบัน นั่นคือ หากคุณต้องการสร้างลิงก์ไปยังจุดยึดที่อยู่ในหน้าเดียวกัน คุณสามารถละเว้นลิงก์ไปยังหน้านั้นได้
มันยังคงสร้างส่วนที่สองของสมอ - ตัวระบุ หมายถึงแท็กใดๆ ในโค้ดของไซต์ที่สนับสนุนแอตทริบิวต์ id ในการสร้างสมอคุณต้อง:
- สร้างแอตทริบิวต์ "id" ในแท็กที่จำเป็น
- ในแอตทริบิวต์ "id" ระบุค่าของชื่อ anchor ที่ระบุในขั้นตอนก่อนหน้า (ตัวอย่าง:)
หลังจากสองขั้นตอนนี้ ลิงก์จะปรากฏขึ้นบนไซต์ซึ่งจะนำคุณไปยังจุดยึดที่ระบุ
ฝึกฝน
ลองพิจารณาวิธีสร้างจุดยึดโดยใช้ตัวอย่างเฉพาะ
เรามีหน้าง่ายๆดังนี้
เรามีข้อความที่ด้านบนและด้านล่างของหน้า แท็ก "br" จำนวนมากที่สร้างช่องว่างระหว่างข้อความ เราจำเป็นต้องสร้างจุดยึดเพื่อให้สามารถดูข้อความที่อยู่ด้านล่างได้อย่างรวดเร็ว
เมื่อต้องการทำสิ่งนี้ ให้สร้างแท็กใหม่ - "a" หลังคำจารึก "text at the top" ในนั้นเราสร้างแอตทริบิวต์ "href" เพื่อให้สมอสะดวกยิ่งขึ้นเราจะเขียน "ลง" ในลิงค์
ตอนนี้เราระบุค่า "#yakor" ในแอตทริบิวต์ - นี่จะเป็นลิงก์ไปยังชื่อของสมอ
ส่วนแรกของสมอ - ลิงก์ไปยังมัน - พร้อมแล้ว ตอนนี้สิ่งที่เหลืออยู่คือการสร้างสมอตัวเอง เราผ่านไปยังส่วนที่ต้องการของหน้า ในกรณีนี้ จะเป็น "ข้อความที่ด้านล่าง" เนื่องจากนี่เป็นข้อความธรรมดาที่ไม่มีแท็ก เราจึงต้องสร้างมันขึ้นมา เมื่อต้องการทำสิ่งนี้ ให้ใส่ข้อความใน "ย่อหน้า" - แท็ก "p"
ในแท็กนี้ เราสร้างแอตทริบิวต์ "id" และป้อนค่า "yakor" ลงไป ค่า "yakor" ตรงกับชื่อสมอที่ระบุในลิงก์
ตอนนี้สมอของเราทำงานตามที่ควรจะเป็น
