집 > 기사 > 웹 프론트엔드 > HTML 하이퍼링크에 대한 자세한 설명

HTML 하이퍼링크에 대한 자세한 설명

不言원래의: 2018-04-27 14:25:471817검색

이 글은 주로 HTML 하이퍼링크에 대한 자세한 설명을 소개하고 있습니다. 이제 참고할 만한 내용이 있어서 공유합니다.

하이퍼링크는 웹사이트에서 자주 사용되는 HTML 요소입니다. 웹사이트 모든 페이지는 하이퍼링크로 연결되며, 하이퍼링크는 페이지 간 이동을 완성합니다. 하이퍼링크는 브라우저와 서버 간의 주요 상호 작용 수단이며 다음 기술에서 이에 대해 점차적으로 자세히 알아볼 것입니다. Hyperlink

하이퍼링크는 웹사이트에서 자주 사용되는 HTML 요소입니다. 웹사이트의 다양한 페이지가 하이퍼링크로 연결되고 하이퍼링크가 페이지 간 이동을 완성하기 때문입니다. 하이퍼링크는 브라우저와 서버 간의 주요 상호 작용 수단이며 다음 기술에서 이에 대해 점차적으로 자세히 알아볼 것입니다.

— 참고: 사진을 링크로 사용할 수도 있습니다. 이에 대한 자세한 내용은 "웹 페이지의 사진" 장에서 배우게 됩니다.

4.5.1 텍스트에 링크 추가

하이퍼링크의 태그는 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed입니다. 텍스트에 하이퍼링크를 추가하는 것은 다른 수정 태그와 유사합니다. 링크를 추가한 후의 텍스트에는 다른 텍스트와 구별하기 위한 고유한 특수 스타일이 있습니다. 기본 링크 스타일은 밑줄이 있는 파란색 텍스트입니다. 하이퍼링크는 다른 페이지로 이동합니다. 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed 태그에는 새 페이지의 주소를 지정하는 href 속성이 있습니다. href에 지정된 주소는 일반적으로 상대 주소를 사용합니다.

— 참고: 웹사이트 개발에서는 문서 상대 주소가 더 일반적으로 사용됩니다.

D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 a.htm으로 지정한 다음 코드 4.18과 같이 코드를 작성합니다.

Code 4.18 하이퍼링크 설정: a.htm

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm">进入列表的设置页面</a>
</font>
</body>
</html>

브라우저 주소 표시줄에 http://localhost/a.htm을 입력하면 그림 4.19와 같은 브라우징 효과가 나타납니다.

그림 4.19 하이퍼링크 설정

독자는 그림 4.19에서 하이퍼링크의 기본 스타일을 볼 수 있습니다. 페이지의 링크를 클릭하면 페이지가 동일한 디렉터리에 있는 ul_ol.htm 페이지로 이동합니다. 이전 섹션의 목록 설정 페이지입니다. a.htm 페이지로 돌아가기 위해 브라우저의 "뒤로" 버튼을 클릭하면 텍스트 링크의 색상이 보라색으로 바뀌어 뷰어에게 이 링크가 방문되었음을 알려줍니다.

4.5.2 링크 창 열기 방식 수정

기본적으로 하이퍼링크가 새 페이지를 여는 방식은 자신을 덮어쓰는 것입니다. 브라우저의 다양한 요구 사항에 따라 독자는 하이퍼링크를 위한 새 창을 여는 다른 방법을 지정할 수 있습니다. 하이퍼링크 태그는 설정을 위한 대상 속성을 제공합니다. 값은 _self(자체 덮어쓰기, 기본값), _blank(새 페이지를 열려면 새 창 생성), _top(브라우저 전체 창에서 열기, 모든 프레임)입니다. 구조는 무시됩니다) ), _parent(이전 창에서 열림).

— 참고: _top 및 _parent 메서드는 프레임 페이지에 사용되며 다음 장에서 자세히 설명합니다.

4.5.3 링크에 프롬프트 텍스트 추가

많은 경우, 하이퍼링크의 텍스트만으로는 링크할 콘텐츠를 설명하기에 충분하지 않습니다. 하이퍼링크 태그는 시청자에게 쉽게 프롬프트할 수 있는 제목 속성을 제공합니다. . title 속성의 값은 프롬프트 내용입니다. 뷰어의 커서가 하이퍼링크 위에 있으면 프롬프트 내용이 표시됩니다. 이는 페이지 레이아웃의 깔끔함에 영향을 주지 않습니다. a.htm 웹 페이지 파일을 수정하고 코드 4.19와 같이 코드를 작성합니다.

Code 4.19 하이퍼링크 설정: a.htm

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm" target="_blank" title="读者你好，现在你看到的是提示文字，单击本链接可以新开窗口跳转到ul_ol.htm页面。">进入列表的设置页面</a>
</font>
</body>
</html>

브라우저 주소 표시줄에 http://localhost/a.htm을 입력하면 그림 4.20과 같은 브라우징 효과가 나타납니다.

그림 4.20 하이퍼링크 프롬프트 텍스트

4.5.4 앵커란 무엇입니까?

많은 웹 기사에는 콘텐츠가 많아 페이지가 매우 길어지고 시청자는 찾아보기 위해 끊임없이 드래그해야 합니다. 브라우저의 스크롤 막대를 사용하여 필요한 콘텐츠를 찾으세요. 하이퍼링크의 닻 기능은 이 문제를 해결할 수 있습니다. 닻은 배의 닻에서 파생되므로 배는 쉽게 표류하거나 길을 잃지 않습니다. 실제로 앵커는 단일 페이지 내에서 다른 위치로 이동하는 데 사용됩니다. 일부 장소를 북마크라고 합니다.

하이퍼링크 태그의 name 속성은 앵커의 이름을 정의하는 데 사용됩니다. 한 페이지는 여러 앵커를 정의할 수 있으며, 하이퍼링크의 href 속성은 이름을 기반으로 해당 앵커로 이동할 수 있습니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 a_anchor.htm으로 지정한 다음 코드 4.20과 같이 코드를 작성합니다.

Code 4.20 하이퍼링크 앵커: a_anchor.htm

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a name="top">这里是顶部的锚</a><br />
<a href="#1">第1任</a><br />
<a href="#2">第2任</a><br />
<a href="#3">第3任</a><br />
<a href="#4">第4任</a><br />
<a href="#5">第5任</a><br />
<a href="#6">第6任</a><br />
<h2>美国历任总统</h2>
●第1任(1789-1797)<a name="1">这里是第1任的锚</a><br />
姓名：乔治·华盛顿<br />
George Washington<br />
生卒：1732-1799<br />
政党：：联邦<br />
●第2任(1797-1801)<a name="2">这里是第2任的锚</a><br />
姓名：约翰·亚当斯<br />
John Adams<br />
生卒：1735-1826<br />
政党：：联邦<br />
●第3任(1801-1809)<a name="3">这里是第3任的锚</a><br />
姓名：托马斯·杰斐逊<br />
Thomas Jefferson<br />
生卒：1743-1826<br />
政党：：民共<br />
●第4任(1809-1817)<a name="4">这里是第4任的锚</a><br />
姓名：詹姆斯·麦迪逊<br />
James Madison<br />
生卒：1751-1836<br />
政党：民共<br />
●第5任(1817-1825)<a name="5">这里是第5任的锚</a><br />
姓名：詹姆斯·门罗<br />
James Monroe<br />
生卒：1758-1831<br />
政党：民共<br />
</font>
</body>
</html>l>

테스트하기 전에 독자는 코드 4.20에서 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed 태그도 앵커를 정의하는 데 사용되며 앵커의 이름이 정의되어 있음을 확인할 수 있습니다. name 속성을 사용합니다. (이름에는 제한이 없으며 사용자 정의할 수 있습니다.) 앵커 링크를 찾을 때 href 속성을 사용하여 해당 이름을 지정하고 이름 앞에 # 기호를 추가합니다. 브라우저 주소 표시줄에 http://localhost/a_anchor.htm을 입력하면 그림 4.21과 같은 브라우징 효과가 나타난다.

图4.21 超级链接的锚

当浏览者单击超级链接时，页面将自动滚动到href属性值名称的锚位置。

— 注意：定义锚的标签aaee7a1ed4a6a1c43f3bdc241aa9871e5db79b134e9f6b82c0b36e0489ee08ed内不一定需要具体内容，只是做一个定位。

4.5.5 电子邮件、FTP和Telnet的链接

超级链接还可以进一步扩展网页的功能，比较常用的有发电子邮件、FTP以及Telnet连接。完成以上的功能只需要修改超级链接的href值。发电子邮件的编写格式为：

<a href = "mailto:邮件地址">给我发email</a>

邮件地址必须完整，如intel@qq.com。

前面提到过，浏览网页采用http协议，而FTP服务器采用FTP协议连接，链接格式如下：

<a href = "ftp://服务器IP地址或域名">链接的文字</a>

FTP服务器链接和网页链接区别在于所用协议不同。FTP需要从服务器管理员处获得登录的权限。不过部分FTP服务器可以匿名访问，从而能获得一些公开的文件。同样，连接Telnet协议的服务器也是采用类似方法，格式如下：

<a href = "telnet://服务器IP地址或域名">链接的文字</a>

telnet协议应用非常少，使用http协议居多。在D:\web\目录下创建网页文件，命名为mail.htm，编写代码如代码4.21所示。

代码4.21 超级链接的其他设置：mail.htm

<html>
<head>
  <title>超级链接的其他设置</title>
</head>
<body>
<font size="5">
<a href="mailto:intel@qq.com" title="读者你好，单击这里可以发电子邮件。">给我发E-mail</a><br />
<a href="ftp://101.22.25.11" title="读者你好，欢迎进入FTP服务器。">连接FTP服务器</a><br />
<a href="telnet://101.22.25.11" title="读者你好，欢迎进入Telnet服务器。">连接Telnet服务器</a>
</font>
</body>
</html>s

在浏览器地址栏输入http://localhost/mail.htm，浏览效果如图4.22所示。

图4.22 超级链接的其他设置

HTML 하이퍼링크에 대한 자세한 설명

관련 기사