HTML 태그

WBOY
풀어 주다: 2016-08-30 09:21:08
원래의
1139명이 탐색했습니다.

1. 정의 및 사용법

모든 브라우저는 태그를 지원합니다.

태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다.

요소의 가장 중요한 속성은 링크의 대상을 나타내는 href 속성입니다.

모든 브라우저에서 링크의 기본 모양은 다음과 같습니다.

  • 방문하지 않은 링크는 파란색 밑줄로 표시됩니다.
  • 방문한 링크는 밑줄과 보라색으로 표시됩니다.
  • 활동 링크는 밑줄과 빨간색으로 표시됩니다.
링크 모양을 기본 링크 모양과 크게 다르게 만들고 싶은 경우. CSS 의사 클래스를 사용하여 텍스트 하이퍼링크에 복잡하고 다양한 스타일을 추가할 수 있습니다.

2. 팁 및 참고사항

팁: href 속성을 사용하지 않으면 download, hreflang, media, rel, target 및 type 속성을 사용할 수 없습니다.

팁: 다른 대상(대상 속성)을 지정하지 않는 한 링크된 페이지는 일반적으로 현재 브라우저 창에 표시됩니다.

팁: CSS를 사용하여 링크 스타일을 지정하세요.

세 가지, 속성

속성 값 설명 문자셋 문자 인코딩 HTML5에서는 지원되지 않습니다. 링크된 문서의 문자 세트를 지정합니다.
属性 描述
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download(5) filename 规定被下载的超链接目标。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media(5) media_query 规定被链接文档是为何种媒介/设备优化的。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape
  • default
  • rect
  • circle
  • poly
HTML5 中不支持。规定链接的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
规定在何处打开链接文档。
type(5) MIME type 规定被链接文档的的 MIME 类型。
좌표 좌표 HTML5에서는 지원되지 않습니다. 링크의 좌표를 지정합니다. 다운로드(5) 파일 이름 다운로드할 하이퍼링크 대상을 지정합니다. 참조 URL 링크가 가리키는 페이지의 URL을 지정합니다. reflang 언어_코드 링크된 문서의 언어를 지정합니다. 미디어(5) media_query 링크된 문서가 최적화되는 미디어/장치를 지정합니다. 이름 섹션_이름 HTML5에서는 지원되지 않습니다. 앵커의 이름을 지정합니다.
상대 텍스트 현재 문서와 링크된 문서 간의 관계를 지정합니다. 개정 텍스트 HTML5에서는 지원되지 않습니다. 연결된 문서와 현재 문서 간의 관계를 지정합니다. 모양
기본값 직선
폴리
HTML5에서는 지원되지 않습니다. 링크의 모양을 지정합니다.
<html>

<body>

<p>
<a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.microsoft.com/</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>
로그인 후 복사
타겟

_공백

_부모

_자신
<html>

<body>
<p><span style="color: #000000;">
您也可以使用图像来作链接:
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/lastpage.html</span><span style="color: #800000;">"</span>>
<img border=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/i/eg_buttonnext.gif</span><span style="color: #800000;">"</span> />
</a>
</p>

</body>
</html>
로그인 후 복사
_top

프레임 이름

링크된 문서를 열 위치를 지정합니다. 유형(5) MIME 유형 링크된 문서의 MIME 유형을 지정합니다.
<html>

<body>

<p>
<a href=<span style="color: #800000;">"</span><span style="color: #800000;">#C4</span><span style="color: #800000;">"</span>>查看 Chapter <span style="color: #800080;">4</span>。</a>
</p>

<h2>Chapter <span style="color: #800080;">1</span></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">2</span></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">3</span></h2>
<p>This chapter explains ba bla bla</p>

<h2><a name=<span style="color: #800000;">"</span><span style="color: #800000;">C4</span><span style="color: #800000;">"</span>>Chapter <span style="color: #800080;">4</span></a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">5</span></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">6</span></h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>
로그인 후 복사

사례

<html>

<body>

<a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.w3school.com.cn/</span><span style="color: #800000;">"</span> target=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>>Visit W3School!</a>

<p>如果把链接的 target 属性设置为 <span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>,该链接会在新窗口中打开。</p>

</body>

</html>
로그인 후 복사
이 예에서는 HTML 문서에 링크를 만드는 방법을 보여줍니다.

<html>

<body>

<p>被锁在框架中了吗?</p> 

<a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span><span style="color: #000000;">
target</span>=<span style="color: #800000;">"</span><span style="color: #800000;">_top</span><span style="color: #800000;">"</span>>请点击这里!</a> 

</body>
</html>
로그인 후 복사

이 예는 이미지를 링크로 사용하는 방법을 보여줍니다.

<html>

<body>

<p><span style="color: #000000;">
这是邮件链接:
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?subject=Hello%20again</span><span style="color: #800000;">"</span>>发送邮件</a>
</p>

<p>
<b>注意:</b>应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</span></p>

</body>
</html>
로그인 후 복사

이 예는 링크를 사용하여 문서의 다른 부분으로 이동하는 방법을 보여줍니다.

<html>

<body>

<p><span style="color: #000000;">
这是另一个 mailto 链接:
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!</span><span style="color: #800000;">"</span>>发送邮件!</a>
</p>

<p>
<b>注意:</b>应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</span></p>

</body>
</html>
로그인 후 복사
이 예는 방문자가 사이트를 떠날 필요가 없도록 새 창에서 페이지를 여는 방법을 보여줍니다.

이 예는 페이지가 프레임 내에 고정된 경우 프레임에서 벗어나는 방법을 보여줍니다.
이 예에서는 이메일에 연결하는 방법을 보여줍니다. (이 예제는 메일 클라이언트 프로그램을 설치한 후에만 작동합니다.) 이 예는 좀 더 복잡한 이메일 링크를 보여줍니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿