كيف أقوم بإنشاء رابط إلى حاشية سفلية في HTML؟

Question

على سبيل المثال:

هذا هو النص الرئيسي للمحتوى الخاص بي.لدي رابط حاشية لهذا الخط [1].ثم ، لدي المزيد من المحتوى.بعضها مثير للاهتمام وله بعض الحواشي أيضًا [2].

[1] هذه هي الحاشية الأولى لي.

[2] حاشية أخرى.

لذا، إذا نقرت على الرابط "[1]"، فإنه يوجه صفحة الويب إلى مرجع الحاشية السفلية الأول وهكذا.كيف يمكنني تحقيق ذلك بالضبط في HTML؟

Answer 1

أعطِ الحاوية معرفًا، ثم استخدمها # للإشارة إلى هذا المعرف.

على سبيل المثال

<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>

<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>

Answer 2

من الممارسات الجيدة توفير رابط من الحاشية السفلية إلى المكان المشار إليه (بافتراض وجود علاقة 1:1).يعد هذا مفيدًا لأن زر الرجوع سيعيد المستخدم إلى موضع التمرير الذي كان عليه سابقًا، مما يترك للقارئ فرصة العثور على مكانه في النص.يؤدي النقر فوق رابط الرجوع إلى المكان الذي تمت الإشارة فيه إلى الحاشية السفلية في النص إلى وضع هذا النص في أعلى النافذة، مما يسهل على القارئ المتابعة من حيث توقف.

Quirksmode لديه صفحة على الحواشي السفلية على الويب (على الرغم من أنه يقترح عليك استخدام الحواشي الجانبية بدلاً من الحواشي أعتقد أن الحواشي أكثر يمكن الوصول, ، مع رابط إلى الحاشية السفلية والحاشية السفلية متبوعة برابط العودة إلى النص، أظن أنه سيكون من الأسهل متابعتهما باستخدام قارئ الشاشة).

يقترح أحد الروابط من صفحة quirksmode وجود سهم، ↩، بعد نص الحاشية السفلية التي تربط مرة أخرى، واستخدام الكيان ↩لهذا.

على سبيل المثال:

This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.

<p id="footnote-1">
   1. Here is my first footnote. <a href="#footnote-1-ref">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

لست متأكدًا من كيفية تعامل قارئات الشاشة مع الكيان.يرتبط من تعليقات منشور Grubber هو مشاركة بوب إيسترن حول إمكانية الوصول إلى الحواشي السفلية مما يشير إلى أنه لم تتم قراءته، على الرغم من أن ذلك كان منذ عدة سنوات مضت، وآمل أن تكون قارئات الشاشة قد تحسنت الآن.لتسهيل الوصول، قد يكون من المفيد استخدام رابط نصي مثل "العودة إلى النص" أو ربما وضعه في سمة عنوان الرابط.قد يكون من المفيد أيضًا وضع واحدة على الحاشية السفلية الأصلية على الرغم من أنني لا أعرف كيف ستتعامل قارئات الشاشة مع ذلك.

This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.

<p id="footnote-1">
   1. Here is my first footnote.
      <a href="#footnote-1-ref" title="return to text">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(أنا أخمن فقط بشأن مشكلات إمكانية الوصول هنا، ولكن بما أنه لم يتم طرحها في أي من المقالات التي ذكرتها، فقد اعتقدت أن الأمر يستحق الطرح.إذا كان بإمكان أي شخص التحدث بمزيد من السلطة حول هذه القضية، سأكون مهتمًا بسماع ذلك.)

Answer 3

عليك أولاً الدخول ووضع علامة ربط مع سمة اسم أمام كل حاشية سفلية.

 <a name="footnote1">Footnote 1</a>
 <div>blah blah about stuff</div>

علامة الربط هذه لن تكون رابطًا.سيكون مجرد قسم مسمى من الصفحة.ثم تجعل علامة الحاشية السفلية علامة تشير إلى هذا القسم المسمى.للإشارة إلى قسم مسمى من الصفحة، يمكنك استخدام العلامة #.

 <p>So you can see that the candidate lied 
 <a href="#footnote1">[1]</a> 
 in his opening address</p>

إذا كنت تريد الارتباط بهذا القسم من صفحة أخرى، فيمكنك القيام بذلك أيضًا.ما عليك سوى ربط الصفحة ووضع اسم القسم عليها.

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>

Answer 4

ستحتاج إلى إعداد علامات ربط لجميع الحواشي السفلية.إن بادئتهم بشيء مثل هذا يجب أن يفعل ذلك:
< a name="FOOTNOTE-1">[ 1 ]< /a>

ثم في نص صفحتك، قم بربط الحاشية السفلية بهذا الشكل:
< a href="#FOOTNOTE-1">[ 1 ]< /a>
(لاحظ استخدام اسم مقابل href صفات)

بشكل أساسي، في أي وقت تقوم فيه بتعيين اسم لعلامة A، يمكنك بعد ذلك الوصول إليها عن طريق الارتباط بـ #NAME-USED-IN-TAG.

http://www.w3schools.com/HTML/html_links.asp لديه مزيد من المعلومات.

Answer 5

بالنسبة لحالتك، ربما يكون من الأفضل القيام بذلك باستخدام علامات a-href وعلامات a-name في الروابط والتذييلات، على التوالي.

في الحالة العامة للتمرير إلى عنصر DOM، يوجد البرنامج المساعد مسج.ولكن إذا كان الأداء يمثل مشكلة، فأنا أقترح القيام بذلك يدويًا.يتضمن ذلك خطوتين:

1. العثور على موضع العنصر الذي تقوم بالتمرير إليه.
2. التمرير إلى هذا الموقف.

وضع المراوغات يعطي شرحا جيدا للآلية الكامنة وراء السابق.إليك الحل المفضل لدي:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

يستخدم الصب من صفر إلى 0، وهو ليس آدابًا مناسبة في بعض الدوائر، لكني أحب ذلك :) الجزء الثاني يستخدم window.scroll.إذن باقي الحل هو:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

هاهو!

Answer 6

إجابة Peter Boughton جيدة، ولكن قد يكون من الأفضل أن تعلن عن "li" (عنصر قائمة) داخل "ol" (قائمة مرتبة) بدلاً من الإعلان عن الحاشية السفلية كـ "p" (فقرة):

This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.

<h2>References</h2>
<ol>
    <li id="footnote-1">Here is my first footnote.</li>
    <li id="footnote-2">Another footnote.</li>
</ol>

بهذه الطريقة، ليس هناك حاجة لكتابة الرقم في الأعلى، وفي الأسفل...طالما أن المراجع مدرجة بالترتيب الصحيح أدناه.

Answer 7

علامات الربط باستخدام المراسي المسماة

http://www.w3schools.com/HTML/html_links.asp

Answer 8

استخدام الإشارات المرجعية في علامات الربط...

    This is main body of my content. I have a footnote link for this 
line <a href="#foot1">[1]</a>. Then, I have some more content. 
Some of it is interesting and it has some footnotes as well 
<a href="#foot2">[2]</a>.

<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>

<div>
<a name="foot2">[2]</a> Another footnote.
</div>

Answer 9

هذا هو النص الرئيسي للمحتوى الخاص بي.لدي رابط حاشية لهذا السطر [1].ثم، لدي المزيد من المحتوى.وبعضها مثير للاهتمام، وفيها بعض الحواشي أيضًا[٢].

[1] هذه هي الحاشية الأولى لي.

[2] حاشية أخرى.

---

قم بعمل <a href=#tag> نص </a>

ثم في الحاشية السفلية:< اسم = "علامة"> النص </a>

كل ذلك بدون مسافات.مرجع: http://www.w3schools.com/HTML/html_links.asp

Answer 10

<a name="1">حاشية سفلية</a>

بلا بلا

<a href="#1">انتقل</a> إلى الحاشية السفلية.