HTML 링크

HTML은 하이퍼링크를 사용하여 웹의 다른 문서에 연결합니다.

거의 모든 웹페이지에서 링크를 찾을 수 있습니다. 한 페이지에서 다른 페이지로 이동하려면 링크를 클릭하세요.

먼저 링크 예제를 살펴보겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<p><a href="/">PHP中文网</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.baidu.com/">百度</a>这是一个指向百度的链接</p>
</body>
</html>

코드 실행 결과:

HTML 하이퍼링크(링크)

HTML은 <a> 태그를 사용하여 하이퍼텍스트 링크를 설정합니다.

하이퍼링크는 단어, 단어, 단어 그룹 또는 이미지일 수 있습니다. 이러한 내용을 클릭하면 새 문서나 특정 문서로 이동할 수 있습니다. ~의 일부.

웹 페이지의 링크 위에 마우스 포인터를 올리면 화살표가 작은 손 모양으로 변합니다.

<a> 태그에 href 속성이 사용되어 링크 주소를 설명합니다.

예를 들어 php.cn 사이트의 홈페이지에 링크를 걸면 다음과 같이 표현할 수 있습니다.

<a href="http://www.php.cn">PHP 중국어 웹사이트</a>

기본적으로 링크는 브라우저에 다음과 같이 표시됩니다.

방문하지 않은 링크는 파란색 글씨로 밑줄이 그어져 표시됩니다.

이 방문한 링크는 보라색으로 밑줄이 그어져 표시됩니다.

링크를 클릭하면 링크가 빨간색으로 표시되고 밑줄이 그어집니다.

참고: 이러한 하이퍼링크에 CSS 스타일이 설정된 경우 표시 스타일은 CSS 설정에 따라 표시됩니다.

HTML 연결 - id 속성

id 속성은 HTML 문서에서 북마크 태그를 생성하는 데 사용할 수 있습니다.

팁: 북마크는 특별한 방법으로 표시되지 않으며 HTML 문서에도 표시되지 않으므로 독자에게 숨겨집니다.

HTML 문서에 ID 삽입:

<a id="tips">유용한 팁 섹션</a>

HTML 문서의 "유용한 팁 섹션(id="tips")"에 대한 링크 만들기:

<a href="#tips"> ; 유용한 팁 섹션</a>

또는 다른 페이지에서 "유용한 팁 섹션(id="tips")"에 대한 링크를 만드세요:

<a href="http://www.php.cn/html/html-links.html#tips">
유용한 팁 섹션을 방문하세요< /a>

기본 메모

참고: 하위 폴더에는 항상 슬래시를 추가하세요. 링크가 href="http://www.php.cn/html"과 같이 작성되면 두 개의 HTTP 요청이 서버에 생성됩니다. 이는 서버가 주소에 슬래시를 추가한 다음 href="http://www.php.cn/html/"과 같이 새 요청을 생성하기 때문입니다.

예

이미지 링크 사용방법.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>创建图片链接:
    <a href="http://www.php.cn/">
        <img src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p>
<p>无边框的图片链接:
    <a href="http://www.php.cn/html/">
        <img border="0" src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p>
</body>
</html>

이미지는 나중에 설명할 <img> 태그를 사용합니다.

코드 실행 결과:

위 사진을 클릭하시면 http://www.php.cn/

<🎜로 이동합니다 >

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <p><a href="/">PHP中文网</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.baidu.com/">百度</a>这是一个指向百度的链接</p> </body> </html>

제출하다 코드 재설정

자동운전