HTML 링크
HTML은 네트워크의 다른 문서와 링크를 맺습니다.
几乎所有网页中都可以找到链接。点击链接可以从一个页面跳转到另一个页面。
实例
- 슈퍼 링크 생성
- 이 예제에서는 HTML 문서에서 링크를 생성하는 방법을 보여줍니다.
- 이미지를 링크로 사용
- 이 예제에서는 이미지를 링크로 사용하는 방법을 보여줍니다.
HTML 주소 연결(링크)
주소 연결은 한 글자, 단어, 그룹 단어, 그리고 이미지일 수 있으며, 이를 클릭하여 새 문서나 현재 문서의 일부로 이동할 수 있습니다.
마우스 포인터를 웹 페이지의 링크 위로 가져가면 화살표가 작은 손으로 바뀝니다.
HTML에서 <a> 태그를 사용하여 링크를 생성합니다.
有两种使用 <a> 标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
延伸阅读:什么是超文本?
HTML 链接语法
链接的 HTML 代码很简单。它类似这样:
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="http://www.codew3c.com/">访问 CodeW3C.com</a>
上面这行代码显示为:Visit CodeW3C.com
点击这个超链接会把用户带到 CodeW3C.com 的首页。
푸시:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
<a href="http://www.codew3c.com/" target="_blank">Visit CodeW3C.com!</a>
HTML 链接 - name 属性
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
푸시:锚的名称可以是任何你喜欢的名字。
푸시:您可以使用 id 属性来替代 name 属性,命名锚同样有效。
实例
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tips">基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.codew3c.com/html/html_links.asp#tips"">유용한 팁</a>
">유용한 팁</a>
위의 코드에서 # 기호와 앵커 이름을 URL의 끝에 추가하여 tips라는 이름 앵커로 직접 링크할 수 있습니다。특정 효과:
유용한 팁
기본적인 고려 사항 - 유용한 팁:자막:
푸시:이름 앵커는 대형 문서의 시작 위치에 목차를 만들기 위해 자주 사용됩니다. 각 장에 이름 앵커를 부여하고 이 앵커로 링크된 링크를 문서 상단에 넣으면 됩니다.百度百科를 자주 방문하면 거의 모든 항목이 이러한 탐색 방식을 사용한다는 것을 발견할 수 있습니다。
푸시:브라우저가 정의된 이름 앵커를 찾을 수 없으면 문서의 상단으로 위치됩니다. 오류가 발생하지 않습니다。
더 많은 예제
- 새 브라우저 창에서 링크 열기
- 이 예제는 새 브라우저 창에서 페이지를 엽니다. 이렇게 하면 방문자가 사이트를 떠나지 않아도 됩니다。
- 동일한 페이지의 다른 위치로 링크하기
- 이 예제는 문서의 다른 부분으로 링크하는 방법을 보여줍니다。
- 프레임werk에서 벗어나기
- 이 예제는 페이지가 프레임werk 내에 고정되어 있을 때 프레임werk에서 벗어나는 방법을 보여줍니다。
- 이메일 링크 생성
- 이 예제는 이메일로 이동하는 방법을 보여줍니다。(이 예제는 이메일 클라이언트 프로그램이 설치되면 작동합니다。)
- 이메일 링크 생성 2
- 이 예제는 더 복잡한 이메일 링크를 보여줍니다。
HTML 링크 태그
태그 | 설명 |
---|---|
<a> | 앵커 정의. |