HTML超链接标签及应用
属性
属性 | 值 | 描述 |
---|---|---|
charset | char_encoding | HTML5 中不支持。规定被链接文档的字符集。 |
coords | coordinates | HTML5 中不支持。规定链接的坐标。 |
download | filename | 规定被下载的超链接目标。 |
href | URL | 规定链接指向的页面的 URL。 |
hreflang | language_code | 规定被链接文档的语言。 |
media | media_query | 规定被链接文档是为何种媒介/设备优化的。 |
name | section_name | HTML5 中不支持。规定锚的名称。 |
rel | text | 规定当前文档与被链接文档之间的关系。 |
rev | text | HTML5 中不支持。规定被链接文档与当前文档之间的关系。 |
shape | defaultrectcirclepoly | HTML5 中不支持。规定链接的形状。 |
target | _blank_parent_self_topframename | 规定在何处打开链接文档。 |
type | MIME type | 规定被链接文档的的 MIME 类型。 |
实例
下面在代码实例中进行叙述
其中锚链接可以实现此处锚链接跳转到锚标记处的功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body>
<!--定义一个锚标记-->
<a name="top">顶部</a>
<!--a标签
href:必填,表示跳转到哪个网页
target:表示窗口在哪里打开_blank 在新标签中打开_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到我的第一个网页</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<hr/>
<a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王">
</a>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<p><a href="3.图像标签.html" target="_self"><img src="../resources/image/lufei.jpg" alt="路飞头像" height="200" width="200" title="海贼王"></a>
</p>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回顶部</a>
<a name="down">down</a><!--功能性链接
邮件链接 mailto:
-->
<a href="mailto:1836841236@qq.com">点击联系我</a>
<!--QQ推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="联系我领取小电影" title="联系我领取小电影"/>
</a>
</body>
</html>