이번 글에서는 HTML 하이퍼링크에 대한 자세한 설명을 소개합니다
하이퍼링크는 웹사이트에서 자주 사용되는 HTML 요소입니다. 웹사이트의 여러 페이지가 하이퍼링크로 연결되고, 페이지 사이를 이동하는 하이퍼링크이기 때문입니다. 하이퍼링크는 브라우저와 서버 간의 주요 상호 작용 수단이며 다음 기술에서 이에 대해 점차적으로 자세히 알아볼 것입니다.
— 참고: 사진은 링크로 사용할 수도 있습니다. 이에 대한 자세한 내용은 다음 장 "웹 페이지의 사진"에서 배우게 됩니다.
4.5.1 텍스트에 링크 추가
하이퍼링크 라벨은 입니다. 텍스트에 대한 슈퍼 링크 링크는 다른 수정 태그와 유사합니다. 링크를 추가한 후의 텍스트에는 다른 텍스트와 구별하기 위한 고유한 특수 스타일이 있습니다. 기본 링크 스타일은 밑줄이 있는 파란색 텍스트입니다. 하이퍼링크는 다른 페이지로 이동합니다. 태그에는 새 페이지의 주소를 지정하는 href 속성이 있습니다. href에 지정된 주소는 일반적으로 상대 주소를 사용합니다.
— 참고: 웹사이트 개발에서는 문서 상대 주소가 더 일반적으로 사용됩니다.
D:web 디렉터리에 웹 페이지 파일을 생성하고 이름을 a.htm으로 지정한 후 코드 4.18과 같이 코드를 작성합니다.
코드 4.18 하이퍼링크 설정: a.htm
브라우저 주소창에 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와 같이 코드를 작성합니다.
코드 4.19 하이퍼링크 설정: a.htm
브라우저에 http://를 입력하세요. localhost/a.htm을 주소 표시줄에 입력하고 탐색 효과는 그림 4.20과 같습니다.
그림 4.20 하이퍼링크 프롬프트 텍스트
4.5.4 앵커란 무엇입니까
많은 웹 기사에는 콘텐츠가 많아 페이지가 너무 길어지고, 시청자는 필요한 콘텐츠를 찾기 위해 브라우저의 스크롤 막대를 끊임없이 드래그해야 합니다. 하이퍼링크의 닻 기능은 이 문제를 해결할 수 있습니다. 닻은 배의 닻에서 파생되므로 배는 쉽게 표류하거나 길을 잃지 않습니다. 실제로 앵커는 단일 페이지 내에서 다른 위치로 이동하는 데 사용됩니다. 일부 장소를 책갈피라고 합니다.
하이퍼링크 태그의 이름 속성은 앵커 이름을 정의하는 데 사용됩니다. 페이지는 여러 앵커를 정의할 수 있습니다. 하이퍼링크의 href 속성은 이름을 기반으로 해당 앵커로 이동할 수 있습니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 a_anchor.htm으로 지정한 다음 코드 4.20과 같이 코드를 작성합니다.
코드 4.20 하이퍼링크 앵커: a_anchor.htm
상위 앵커는 다음과 같습니다
1기< ;br />
3기< ;br />
●1대 대통령(1789-1797)여기 1대 앵커가 있습니다
;
이름: 조지 워싱턴
조지 워싱턴
탄생과 죽음: 1732-1799
정당:: 연맹
● 2선(1797-1801)< ;a name="2">여기가 2기 닻입니다
;
이름: 존 아담스
존 아담스
탄생과 죽음: 1735-1826
정당:: 연방
●3기(1801-1809)여기가 3번째 닻입니다
이름: 토머스 제퍼슨
토마스 제퍼슨
탄생과 사망: 1743-1826
정당:: 민주당
●4대(1809-1817)여기가 4대 닻입니다
이름: 제임스· 제임스 매디슨 br />
●제5대(1817-1825)이것이 닻입니다 5대
이름: 제임스 먼로
제임스 먼로
탄생과 죽음 : 1758-1831
정당: 민주당
l>
테스트하기 전에 독자는 코드 4.20에서 태그도 앵커를 정의하는 데 사용되며 앵커 이름은 다음과 같습니다. name 속성으로 정의됩니다(이름은 제한되지 않으며 사용자 정의할 수 있음). 앵커 링크를 찾을 때 href 속성을 사용하여 해당 이름을 지정하고 이름 앞에 # 기호를 추가합니다. 브라우저 주소 표시줄에 http://localhost/a_anchor.htm을 입력하면 그림 4.21과 같은 브라우징 효과가 나타난다.
그림 4.21 하이퍼링크 앵커 사용자가 하이퍼링크를 클릭하면 페이지가 자동으로 href 속성 값 이름의 앵커 위치로 스크롤됩니다.
— 참고: 앵커를 정의하는 태그 에는 반드시 특정 콘텐츠가 필요한 것은 아니며 단지 위치 지정일 뿐입니다.
4.5.5 이메일, FTP 및 텔넷 링크
하이퍼링크는 웹페이지의 기능을 더욱 확장할 수도 있습니다. 이메일, FTP 및 텔넷 연결. 위 기능을 완료하려면 하이퍼링크의 href 값만 수정하면 됩니다. 이메일 보내기의 작성 형식은 다음과 같습니다. 나에게 이메일 보내기이메일 주소는 다음과 같이 완전해야 합니다. intel@qq.com으로.
앞서 언급한 바와 같이 웹 브라우징은 http 프로토콜을 사용하며, FTP 서버는 FTP 프로토콜을 사용하여 연결됩니다. 링크 형식은
FTP 서버 링크와 웹 페이지 링크의 차이점은 사용되는 프로토콜이 다르다는 것입니다. FTP에는 서버 관리자의 로그인 권한이 필요합니다. 그러나 일부 FTP 서버는 익명으로 액세스할 수 있으며 일부 공개 파일을 얻을 수 있습니다. 마찬가지로 유사한 방법을 사용하여 Telnet 프로토콜의 서버에 연결합니다.
텔넷 프로토콜은 거의 사용되지 않으며, http 프로토콜이 주로 사용됩니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 mail.htm으로 지정한 다음 코드 4.21과 같이 코드를 작성합니다.
코드 4.21 하이퍼링크에 대한 기타 설정: mail.htm
FTP 서버에 연결하세요
> ;
브라우저 주소 표시줄에 http://localhost/mail.htm을 입력하면 그림 4.22와 같은 브라우징 효과가 나타납니다.
그림 4.22 하이퍼링크에 대한 기타 설정
위 내용은 HTML 하이퍼링크 자세히 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
