HTML中的a元素
1、a元素
<a>元素可以用于在文档内容中插入链接,它使得在阅读文档时重定向用户或者向他们推荐另一种资源。
2、链接到片段
链接也可以更具体,并连接到另外一个文档的特定片段。如果这样的话,应该执行两项任务:一是准备目标文档,向id需要链接的元素添加属性,二是在原始文档中创建链接,使用<a>附加到目标文档的URL、#号和上一步中使用的标识符。这样讲似乎有点抽象,我们可以通过下面这个案例来理解(为了好理解,里面的文字内容比较多):
<!DOCTYPE html>
<head>example of a
<style type="text/css">
p.sty{
border-style: dotted;
border-width: 6px;
}
img.dcr_sty{
width: 200px;
height: 160px;
}
</style>
</head>
<title>test5</title>
<body>
<section id="spring">
<h3>春天</h3>
<p class="sty">
<img class="dcr_sty" src="D:\vs\Rcode\images\spring.jpg" alt="spring">
</p>
<a href="#summer">跳转到summer</a>
</section>
<section id="summer">
<h3>夏天</h3>
<p class="sty">
<img class="dcr_sty" src="D:\vs\Rcode\images\summer.jpg" alt="summer">
</p>
<a href="#autumn">跳转到autumn</a>
</section>
<section id="autumn">
<h3>秋天</h3>
<p class="sty">
<img class="dcr_sty" src="D:\vs\Rcode\images\autumn.jpg" alt="autumn">
</p>
<a href="#winter">跳转到winter</a>
</section>
<section id="winter">
<h3>冬天</h3>
<p class="sty">
<img class="dcr_sty" src="D:\vs\Rcode\images\winter.jpg" alt="winter">
</p>
<a href="#spring">跳转到spring</a>
</section>
</body>
注意一下这个截图,就是点击里面的summer链接,搜索框中显示的内容。
3、电子邮件链接
这个链接是因为有一种特殊类型的URL,该URL专门设计用于通过internet邮件访问资源。这种URL的最基本格式由字符串“mailto”,后跟一个或多个电子邮件地址的逗号分隔列表组成。例子如下:当我们点击这个链接的时候,会激发我们系统默认的邮箱给这个邮箱发送地址。
<a href="mailto:1507@163.com">e-mail me</a>
4、链接元素
这种类型的链接非常特别,它用于提供有关整个文档的关系信息。它只在<head>中,此元素可以建立的许多关系主要取决于rel的属性,在最常见的情况下,它定义了网站的结构(上一个或下一个),提供了文档的替代版本(用于打印机、另一种语言等),并指向带有文档样式信息的外部资源。