search

Home >Web Front-end >HTML Tutorial >HTML tag

HTML tag

WBOY
WBOYOriginal
2016-08-30 09:21:081140browse

1. Definition and usage

All browsers support the tag.

tag defines a hyperlink, used to link from one page to another.

The most important attribute of the

element is the href attribute, which indicates the target of the link.

Across all browsers, the default appearance of links is:

  • Unvisited links are underlined and blue
  • Visited links are underlined and purple
  • Active links are underlined and in red
If you want the link appearance to be very different from the default link appearance. You can use CSS pseudo-classes to add complex and varied styles to text hyperlinks.

Two, Tips and Notes

Tips: If you do not use the href attribute, you cannot use the following attributes: download, hreflang, media, rel, target and type attributes.

Tip: The linked page is usually displayed in the current browser window, unless you specify another target (target attribute).

Tip: Please use CSS to style links.

Three, attributes

Property Value Description
charset char_encoding Not supported in HTML5. Specifies the character set of the linked document.
coords coordinates Not supported in HTML5. Specifies the coordinates of the link.
download(5) filename Specifies the hyperlink target to be downloaded.
href URL Specifies the URL of the page the link points to.
hreflang language_code Specifies the language of the linked document.
media(5) media_query Specifies the media/device for which the linked document is optimized.
name section_name Not supported in HTML5. Specifies the name of the anchor.
rel text Specifies the relationship between the current document and the linked document.
rev text Not supported in HTML5. Specifies the relationship between the linked document and the current document.
shape
  • default
  • rect
  • circle
  • poly
 Not supported in HTML5. Specifies the shape of the link.
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
 Specifies where to open the linked document.
type(5) MIME type Specifies the MIME type of the linked document.
Four, case
This example demonstrates how to create a link in an HTML document. 
<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>

This example demonstrates how to use images as links. 

<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>

This example demonstrates how to use a link to jump to another part of the document 

<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>

This example demonstrates how to open a page in a new window so that visitors don’t have to leave your site. 

<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>

This example demonstrates how to jump out of the frame, assuming your page is fixed within the frame. 

<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>

This example demonstrates how to link to an email. (This example will only work after installing the email client program.) 

<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>

This example demonstrates a more complex email link. 
<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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Four css compilation styles of sassNext article：Four css compilation styles of sass

Related articles

See more