ด้านบน: ภาษามาร์กอัป - องค์ประกอบวลี
แหล่งต้นฉบับบทที่ 7 จุดยึดจุด
วิธีที่ถูกต้องในการพูดลิงก์ใน HTML ควรเรียกว่าจุดยึด พวกเขาไม่เพียง แต่อนุญาตให้เราชี้ไปที่เอกสาร แต่ยังรวมถึงย่อหน้าที่เฉพาะเจาะจงในหน้าและยังสามารถใช้เป็นเครื่องมือที่สะดวกสำหรับการเชื่อมโยงที่แม่นยำ ปล่อยให้วัตถุลิงก์เข้าใกล้โฟกัสมากขึ้น ในบทนี้เราจะเห็นแนวทางปฏิบัติที่แตกต่างกันสี่แบบอธิบายข้อดีของแต่ละวิธีและยังแนะนำว่าแอตทริบิวต์ชื่อเรื่องสามารถปรับปรุงความสะดวกในการใช้ลิงก์ได้อย่างไร นอกจากนี้เราจะใช้ CSS เพื่อออกแบบสไตล์สำหรับลิงก์ เมื่อคุณต้องการระบุส่วนที่เฉพาะเจาะจงของหน้าการทำเครื่องหมายจุดยึดเป็นวิธีที่ดีที่สุดในการทำ
นี่เป็นสถานการณ์ทั่วไปเมื่อออกแบบเว็บไซต์ คุณต้องการเชื่อมโยงไปยังส่วนที่เฉพาะเจาะจงของหน้าหนึ่ง แต่ผู้ใช้อาจอ่านในหน้าอื่น เลือกวิธีการใด ๆ ที่กล่าวถึงถัดไปเพื่อให้คุณบรรลุเป้าหมาย
ในตัวอย่างสมมติว่าเราตั้งใจที่จะเชื่อมโยงไปยังชื่อเฉพาะในหน้าเดียวกัน: วิธี A: ชื่อของหลุม
<p> <a href =#ส้ม> เกี่ยวกับส้ม </a> </p>
... บางข้อความ ...
<ชื่อ = ส้ม> </a>
<h2> ส้มอร่อย </h2>
... ข้อความเพิ่มเติม ...
ใช้แท็กสมอพร้อมเนื้อหาว่างเปล่าและแอตทริบิวต์ชื่อเพื่อทำเครื่องหมายจุดลิงก์เฉพาะ บางทีนี่อาจเป็นวิธีที่คุณคุ้นเคย ใส่เนื้อหาที่ว่างเปล่า <a> ด้านหน้าของชื่อและเชื่อมต่อ (ใช้สัญลักษณ์ # ตามด้วยค่าของแอตทริบิวต์ชื่อ) ซึ่งช่วยให้เราสามารถเชื่อมต่อกับส่วนที่เฉพาะเจาะจงของหน้า เมื่อหน้ามีรายการยาวของรายการที่จำเป็นต้องเลื่อนเราสามารถเชื่อมต่อกับโครงการเฉพาะด้วยวิธีนี้ได้อย่างง่ายดาย
รูปที่ 7-1 แสดงผลลัพธ์หลังจากคลิกที่ลิงค์เกี่ยวกับส้มซึ่งหมายถึงการกระโดดไปยังสถานที่ที่เราระบุ <a name = oranges> </a> ซึ่งอยู่ในชื่อ
รูปที่ 7-1 ตัวอย่างการคลิกเพื่อเชื่อมต่อกับลิงค์สมอเฉพาะ
เอฟเฟกต์นั้นดี แต่การสูญเสียแท็กเปล่าเพื่อระบุตำแหน่งลิงก์นั้นไม่สอดคล้องกับความหมายเล็กน้อย วิธี B สามารถปรับปรุงสิ่งนี้ได้ วิธี B: ทั้งหมดภายในชื่อ
<p> <a href =#ส้ม> เกี่ยวกับส้ม </a> </p>
... บางข้อความ ...
<h2> <a name = oranges> roanges อร่อย </a> </h2>
... ข้อความเพิ่มเติม ...
เช่นเดียวกับวิธี A เรายังคงใช้แท็ก <a> กับแอตทริบิวต์ชื่อ แต่คราวนี้เราห่อมันไว้นอกชื่อที่ฉันต้องการเชื่อมโยงไป สิ่งนี้ดูมีความหมายมากขึ้น ในวิธี A วัตถุการเชื่อมต่อของเราคือ ... ไม่มีอะไร แต่ในวิธี B เราไม่เพียง แต่อธิบายว่าข้อความนี้เป็นส่วนหนึ่งของแท็กชื่อเรื่อง แต่ยังรวมถึงหนึ่งในจุดยึดการเชื่อมต่อของหน้านี้ ระวังสไตล์โลกของ <a>
หากใช้วิธี B มีสถานที่ที่คุณต้องใส่ใจ หากคุณระบุสไตล์ CSS ทั่วโลกสำหรับองค์ประกอบทั้งหมด <a> (สีขนาดข้อความการตกแต่งข้อความ ฯลฯ ) สไตล์เหล่านี้จะแทนที่สไตล์ที่คุณระบุสำหรับองค์ประกอบ <h2> เหตุผลที่เกิดขึ้นคือในตัวอย่างนี้แท็ก <a> เป็นองค์ประกอบของเด็กที่อยู่ภายในแท็ก <H2> ที่ล้อมรอบ
ตัวอย่างเช่นหากคุณมีคำสั่งเช่นนี้ใน CSS ของคุณ:
A {
สี: สีเขียว;
Font-Weight: ตัวหนา;
การตกแต่งข้อความ: ขีดเส้นใต้;
-
Method B และ CSS นี้จะทำให้ชื่อ Turn Green, ตัวหนาและขีดเส้นใต้เหมือน <a> ในหน้าอื่น ๆ อาจแตกต่างจากสไตล์ <H2> ที่คุณคาดหวัง
เราสามารถใช้: ลิงค์หลอกชั้นของ <a> เพื่อหลีกเลี่ยงปรากฏการณ์นี้ (และยังได้รับประโยชน์อื่น ๆ ) ซึ่งจะกล่าวถึงในรายละเอียดในภายหลังในบทนี้ แอตทริบิวต์ชื่อที่สมบูรณ์ยิ่งขึ้น
ข้อดีอย่างหนึ่งของการใช้วิธี B (และวิธี A) คือแอตทริบิวต์ชื่อสามารถจัดการชื่อสมอที่อุดมสมบูรณ์ได้มากขึ้น โดยเฉพาะอย่างยิ่งมันเป็นความสามารถในการใช้สัญลักษณ์ภายในชื่อ
ตัวอย่างเช่นหากคุณใช้วิธี B คุณสามารถทำได้ (ที่นี่แสดงถึงสัญลักษณ์ e):
<p> <a href =#resum é> resum ของฉัน é </a> </p>
... บางข้อความ ...
<h2> <a name = resum é> resum ของ Dan é </a> </h2>
... ข้อความเพิ่มเติม ...
ฟังก์ชั่นนี้มีความสำคัญมากเมื่อจัดการกับตัวละครที่ไม่ได้เป็นตัวอักษรภาษาอังกฤษ
แต่มีหลายวิธีที่ควรค่าแก่การกล่าวถึง วิธีการต่อไปนี้ไม่จำเป็นต้องใช้ <a> เพื่อตั้งค่าจุดยึด มาดูวิธี C
วิธี C: ทิ้งชื่อ
<p> <a href =#ส้ม> เกี่ยวกับส้ม </a> </p>
... บางข้อความ ...
<h2 id = ส้ม> ส้มอร่อย </h2>
... ข้อความเพิ่มเติม ...
AH ฟังก์ชั่นของแอตทริบิวต์ ID เป็นเหมือนแอตทริบิวต์ชื่อซึ่งยังสามารถระบุจุดยึดจุดสำหรับหน้า นอกจากนี้เมธอด C ยังกำจัดวิธี A และ B ใช้แอตทริบิวต์ชื่อเป็นแท็ก <a> เพิ่มเติม เราได้ลดซอร์สโค้ดซึ่งเป็นสิ่งที่ดีเสมอ
เนื่องจากแอตทริบิวต์ ID สามารถเพิ่มลงในแท็กใดก็ได้เราจึงสามารถเพิ่มจุดยึดในองค์ประกอบใด ๆ ในหน้าได้อย่างง่ายดาย ในตัวอย่างนี้เราเลือกที่จะเพิ่มแองเคอร์ลงในชื่อ แต่เรายังสามารถเพิ่มแองเคอร์ลงใน <div>, <form>, <p>, <ul> ... และแท็กอื่น ๆ ทั้งหมด หนึ่งฆ่านกสองตัวที่มีนกหนึ่งตัว
ในความเป็นจริงในกรณีส่วนใหญ่เราสามารถเพิ่มรูปแบบหรือการเขียนสคริปต์ลงในแอตทริบิวต์ ID ที่มีอยู่ก่อนซึ่งเป็นประโยชน์อีกวิธีหนึ่งของวิธีการ C ด้วยเหตุนี้เราไม่จำเป็นต้องเพิ่มรหัสพิเศษเพื่อตั้งค่าจุดยึด
ตัวอย่างเช่นสมมติว่าคุณมีแบบฟอร์มที่จะแสดงความคิดเห็นที่ด้านล่างของหน้ายาวและคุณต้องการเพิ่มลิงค์ไปด้านบนของหน้า แบบฟอร์มนี้ได้ตั้งค่า ID = ความคิดเห็นเพื่อระบุสไตล์ที่ไม่ซ้ำกัน นี่คือวิธีที่เราสามารถเชื่อมต่อ ID โดยตรงเป็นจุดยึดโดยไม่ต้องเพิ่มแท็ก <a> ด้วยแอตทริบิวต์ชื่อ
รหัสมีลักษณะเช่นนี้:
<p> <a href =#ความคิดเห็น> เพิ่มความคิดเห็น! </a> </p>
... ข้อความมากมาย ...
<ฟอร์ม ID = ความคิดเห็น action =/path/to/script>
... รูปแบบองค์ประกอบ ...
</form>
นอกจากนี้หากหน้าของคุณยาวคุณจะเพิ่มลิงค์ไปยังจุดยึดด้านบนที่ด้านล่างเพื่อให้ผู้ใช้สามารถกลับไปด้านบนได้
เป็นเรื่องที่ควรค่าแก่การกล่าวถึงว่าแม้ว่ามันจะดูเหมาะสมมาก แต่ก็เป็นการดีที่สุดที่จะหลีกเลี่ยงการใช้ด้านบนเมื่อระบุชื่อสมอ เบราว์เซอร์บางตัวเก็บชื่อนี้ไว้เพื่อวัตถุประสงค์พิเศษ การใช้ชื่อนี้อาจทำให้เกิดผลลัพธ์ที่ไม่สอดคล้องกัน เป็นการดีที่สุดที่จะเลือกชื่อที่คล้ายกัน แต่ไม่ทำให้เกิดปัญหา อาจใช้ #Gemesis? หรือ #โดยสุด? คุณมีความคิดของคุณเอง
เบราว์เซอร์โบราณที่มีคุณสมบัติ ID
เมื่อใช้เฉพาะแอตทริบิวต์ ID เป็นจุดยึดมีข้อเสียที่สำคัญที่ควรค่าแก่การกล่าวถึงนั่นคือเบราว์เซอร์โบราณบางตัวไม่สนับสนุนวิธีนี้ โอ้นี่เป็นสิ่งที่ต้องพิจารณาเมื่อระบุจุดยึดของคุณเองและมันก็เป็นตัวอย่างที่โชคร้ายของความเข้ากันได้ไปข้างหน้า มาดูตัวอย่างสุดท้ายวิธี D. วิธี D: ร่วมกัน
<p> <a href =#ส้ม> เกี่ยวกับส้ม </a> </p>
... บางข้อความ ...
<h2> <a id = jrames name = oranges> ส้มอร่อย </a> </h2>
... ข้อความเพิ่มเติม ...
หากคุณต้องการบรรลุความเข้ากันได้ไปข้างหน้าและความเข้ากันได้ย้อนกลับเมื่อติดแท็กจุดยึดคุณอาจชอบวิธีนี้ ทั้งเบราว์เซอร์โบราณและอนาคตสามารถระบุแท็ก Anchor ชื่อได้อย่างถูกต้อง แต่เนื่องจาก W3C ไม่แนะนำแอตทริบิวต์ชื่อ (http://www.w3.org/tr/xhtml1/#c_8) ในการแนะนำ XHTML1.0
เช่นเดียวกับวิธี B เราต้องให้ความสนใจกับสไตล์ระดับโลกที่มีผลต่อแท็ก <a>
ชื่อที่ใช้ร่วมกัน
หากคุณเลือกที่จะใช้เมธอด D เป็นที่ยอมรับได้ในการเลือกชื่อเดียวกันสำหรับแอตทริบิวต์ ID และชื่อ (อาจสะดวกมาก) แต่นี่เป็นไปได้ก็ต่อเมื่อพวกเขาอยู่ในแท็กเดียวกัน นอกจากนี้ยังมีแท็กเฉพาะเพียงไม่กี่แท็กที่อนุญาตให้สิ่งนี้ซึ่งมีความแม่นยำรวมถึง <a>, <Applet>, <Applet>, <MG>, <MAP> ดังนั้นเราย้าย ID = ส้มจาก <H2> ไปยังแท็กสมอ
ตอนนี้เราได้เห็นสี่วิธีในการสร้างจุดยึดให้สรุปข้อดีและข้อเสียของแต่ละวิธี
หน้าก่อนหน้า 1 2 3 หน้าถัดไปอ่านข้อความเต็ม