คืออะไรเมื่อลิงก์มีเครื่องหมาย "#" เป็นปอนด์

97

ฉันได้ตรวจสอบบางไซต์แล้วและมีเครื่องหมายปอนด์ (#) ใน url มันทำอะไร?

 <a href="#" >Link name</a>

html

— ลูกา 101
แหล่งที่มา

107

มันเป็น "ส่วนย่อย" หรือ "จุดยึดที่มีชื่อ" คุณสามารถใช้เพื่อเชื่อมโยงไปยังส่วนหนึ่งของเอกสาร โดยทั่วไปเมื่อคุณลิงก์ไปยังเพจเบราว์เซอร์จะเปิดขึ้นที่ด้านบนสุดของหน้า แต่คุณเชื่อมโยงไปยังส่วนครึ่งทางคุณสามารถใช้ส่วนเพื่อเชื่อมโยงไปยังส่วนหัวนั้น (หรืออะไรก็ได้)

หากไม่มี<a name="whatever"/>แท็กในหน้าเว็บเบราว์เซอร์ก็จะลิงก์ไปที่ด้านบนของหน้า ถ้าส่วนนั้นว่างเปล่ามันก็จะเชื่อมโยงไปที่ด้านบนของหน้าด้วย

สำหรับส่วนย่อยเท่านั้น <a href="#">Link name</a>นั่นเป็นเพียงลิงก์ที่ไปที่ด้านบนสุดของหน้าปัจจุบัน

คุณมักจะเห็นลิงค์ประเภทนั้นที่ใช้ในการผันคำกริยากับจาวาสคริปต์ HTML ที่เป็นไปตามมาตรฐานจำเป็นต้องมีhrefแอตทริบิวต์ แต่หากคุณวางแผนที่จะจัดการคำขอด้วยจาวาสคริปต์ "#" จะทำหน้าที่เป็นตัวยึดที่เหมาะสม

— คณบดีฮาร์ดิง
แหล่งที่มา

1

+1 แม้ว่าคำที่เป็นทางการจะเป็นส่วนย่อยของ URL แต่ไม่ใช่ "การอ้างอิงแฮช": w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1

— Jason Hall

ใช่ฉันเปลี่ยนเป็น "ส่วน" ในคำตอบเพราะนั่นคือสิ่งที่คนส่วนใหญ่ใช้ ฉันไม่เคยรู้เลยว่ามันมีชื่อ "อย่างเป็นทางการ" ด้วยซ้ำ :)

— Dean Harding

2

เหตุใดเบราว์เซอร์จึงถือว่าเป็น "ไปที่ด้านบนสุดของหน้า" ในทางเทคนิคคุณเปลี่ยนหน้า หลังจากคลิกลิงก์คุณจะสังเกตเห็นว่ามีการเพิ่ม # ลงใน URL ในแถบที่อยู่และหากคุณคลิกปุ่มย้อนกลับมันจะลบออกอีกครั้ง ฉันจะไม่บอกว่ามันเป็นลิงก์ไปยังส่วนหนึ่งของเอกสารมากกว่าลิงก์ไปยังสถานที่ในเอกสาร ไม่อย่างนั้นก็เหมือนกับที่ฉันพิมพ์ ...

— animuson

URI ที่ลงท้ายด้วย # ได้รับอนุญาตโดยไวยากรณ์ทั่วไปและอาจถือได้ว่าเป็นส่วนว่างประเภทหนึ่ง ในเอกสารประเภท MIME เช่น text / html หรือ XML ประเภทใด ๆ ไม่อนุญาตให้ใช้ตัวระบุว่างที่ตรงกับโครงสร้างทางกฎหมายเชิงไวยากรณ์นี้ โดยทั่วไปเว็บเบราว์เซอร์จะแสดงส่วนบนของเอกสารสำหรับส่วนว่าง - en.wikipedia.org/wiki/Fragment_identifier

— IcyBrk

นอกจากนี้โดย "หากไม่มีการนำเสนอดังกล่าวความหมายของส่วนจะถูกพิจารณาว่าไม่ทราบและไม่มีข้อ จำกัด อย่างมีประสิทธิภาพ" จาก rfc3986 ( tools.ietf.org/html/rfc3986#page-24 )

— IcyBrk

23

... เพียงเพื่อเพิ่มเคล็ดลับที่เป็นประโยชน์เพิ่มเติม

คุณสามารถเข้าถึงและเปลี่ยนแปลงได้document.location.hashใน JavaScript

มันสามารถชี้ไปที่จุดยึดที่มีชื่อ (เช่น<a name="top"></a>) หรือไปยังองค์ประกอบที่มี id ที่เกี่ยวข้อง (เช่น<div id="top"></div>)

การมองเห็นด้วยตัวเอง (เช่น<a href="#" onclick="pop()">popup</a>) โดยทั่วไปหมายถึงการใช้ลิงก์เพื่อเรียกใช้ JavaScript โดยเฉพาะ นี่คือการปฏิบัติที่ไม่ดี

aองค์ประกอบใด ๆควรมีhrefที่ชี้ไปยังทรัพยากรที่ถูกต้อง buttonหากหนึ่งไม่ได้อยู่พิจารณาใช้องค์ประกอบอื่นเช่น

— อเล็กซ์
แหล่งที่มา

1

นั่นเป็นจุดที่ดีเกี่ยวกับการปฏิบัติที่ไม่ดีเป็นพิเศษ ... แต่เพียงเพราะมันไม่ดีไม่ได้หมายความว่าคุณจะไม่พบว่ามีการใช้แบบนั้นทั่วทุกแห่ง :)

— Dean Harding

1

@alex หากเป็นการปฏิบัติที่ไม่ดีโปรดบอกเราว่าแนวทางปฏิบัติที่ดีจะใช้แทนอะไร

— Ryan Lundy

@Kyralessa มันอยู่ตรงนั้นในย่อหน้าถัดไป อย่างไรก็ตามฉันทำการแก้ไขดังนั้นหวังว่าจะชัดเจนกว่านี้

— alex

2

@alex น่าจะเป็นเหตุผลหนึ่งที่ผู้คนใช้ลิงก์แทนปุ่มก็คือพวกเขาต้องการรูปลักษณ์ของลิงก์ ลิงก์ไปยังหน้าที่อธิบายวิธีทำให้ปุ่มดูเหมือนลิงก์ได้อย่างไร เช่นการทดสอบปุ่ม HTML

— Ryan Lundy

1

@alex ไม่มากไปกว่าการบอกว่าการใช้ # บนลิงก์เป็นการปฏิบัติที่ไม่ดี OP ทั้งหมดที่ถามคือมันทำอะไร

— Ryan Lundy

11

# บ่งชี้ลิงค์ไปยังจุดยึด

ฉันจะพูดถึงอย่างอื่นด้วย:

การใช้ "#" เป็น href สำหรับลิงก์ที่เปิดใช้งาน JavaScript นั้นไม่ดีเนื่องจากเลื่อนหน้าไปด้านบนซึ่งอาจไม่ใช่สิ่งที่คุณต้องการ ให้ใช้javascript:void(0)ไฟล์.

— นาธานอุสมาน
แหล่งที่มา

+1 สำหรับการระบุว่าการคลิกลิงก์เหล่านี้บังคับให้เลื่อนหน้าไปด้านบน

— Chris Calo

4

คุณไม่จำเป็นต้องมีจุดยึดอีกต่อไป เนื่องจาก HTML5 (และอาจเป็น HTML 4) องค์ประกอบใด ๆ ที่มีแท็ก <id> อาจถูกกำหนดเป้าหมายโดยตัวระบุส่วนย่อย ดูเอกสาร HTML5: whatwg.org/specs/web-apps/current-work/multipage/…

— Basil Bourque

2

อย่าใช้javascript:void(0)อย่างใดอย่างหนึ่ง - ใช้buttonถ้าไม่ใช่ลิงก์

— alex

11

เครื่องหมายปอนด์ ( #) ระบุเพื่อค้นหาจุดยึดบนหน้า ตัวอย่างเช่นหากคุณรวมสิ่งนี้ไว้ที่ใดในหน้า:

<a name="foo"></a>

หรือล่าสุด:

<div id="foo">*part of page*</div>

และคุณคลิกที่ลิงค์บนหน้าเว็บที่มี href ที่#fooมันจะนำทางไปยังผู้ประกาศข่าวที่มีชื่อหรือกับประชาชนได้divfoo

อย่างไรก็ตามหากคุณมี href #ก็จะไปที่ด้านบนสุดของหน้า

— อิเล็กโทรบิท
แหล่งที่มา

2

ลิงก์นี้กลับไปที่หน้าเว็บ มักใช้กับลิงก์ที่เรียกใช้ JavaScript บางส่วน