HTML <a> tag-HTML Tutorial-php.cn

HTML tag

WBOY

Release： 2016-08-30 09:21:08

Original

1152 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login