HTML에서 각주에 대한 링크를 어떻게 생성합니까?

Question

예를 들어:

이것이 내 콘텐츠의 본문입니다.이 라인에 대한 각주 링크가 있습니다 [1].그런 다음 더 많은 내용이 있습니다.그것 중 일부는 흥미롭고 몇 각주도 있습니다 [2].

[1] 여기에 나의 첫 번째 각주가 있습니다.

[2] 또 다른 각주.

따라서 "[1]" 링크를 클릭하면 웹 페이지가 첫 번째 각주 참조로 연결됩니다.HTML에서 이를 정확히 어떻게 수행합니까?

Answer 1

컨테이너에 ID를 부여한 후 사용 # 해당 ID를 참조하세요.

예를 들어

<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의 게시물 댓글에서 링크된 내용은 다음과 같습니다. 각주 접근성에 대한 Bob Eastern의 게시물 이는 읽지 않았다는 것을 의미합니다. 비록 그것은 몇 년 전의 일이고 지금쯤 스크린 리더가 개선되었으면 좋겠습니다.접근성을 위해 "텍스트로 돌아가기"와 같은 텍스트 앵커를 사용하거나 링크의 제목 속성에 넣는 것이 좋습니다.화면 판독기가 이를 어떻게 처리할지 모르겠지만 원래 각주에 하나를 추가하는 것도 가치가 있을 수 있습니다.

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 요소로 스크롤하는 일반적인 경우에는 jQuery 플러그인.하지만 성능이 문제라면 수동으로 수행하는 것이 좋습니다.여기에는 두 단계가 포함됩니다.

1. 스크롤하려는 요소의 위치를 ​​찾습니다.
2. 해당 위치로 스크롤합니다.

쿼크모드 전자의 메커니즘에 대한 좋은 설명을 제공합니다.내가 선호하는 솔루션은 다음과 같습니다.

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

null에서 0으로의 캐스팅을 사용합니다. 이는 일부 서클에서는 적절한 에티켓이 아니지만 마음에 듭니다. :) 두 번째 부분에서는 다음을 사용합니다. window.scroll.따라서 나머지 솔루션은 다음과 같습니다.

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

짜잔!

Answer 6

Peter Boughton의 답변은 좋지만 각주를 "p"(단락)로 선언하는 대신 "ol"(순서 목록) 내부에 "li"(목록 항목)로 선언하면 더 좋을 수 있습니다.

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]에 대한 각주 링크가 있습니다.그럼 콘텐츠가 더 있어요.그 중 일부는 흥미롭고 각주도 있습니다 [2].

[1] 여기에 나의 첫 번째 각주가 있습니다.

[2] 또 다른 각주.

---

< a href=#tag> 텍스트 < /a> 수행

그리고 각주에서:< a name="tag"> 텍스트 < /a>

모두 공백 없이 사용 가능합니다.참조: http://www.w3schools.com/HTML/html_links.asp

Answer 10

<a name="1">각주</a>

블라 블라

각주로 <a href="#1">이동</a>하세요.