网页缩放后元素位置_使用HTML5中的链接元素

使用用手机、PC或平板电脑，我们一天内可以轻松浏览几十甚至上百个网页。能够开心地在网上冲浪，应该归功于HTML提供了超级链接功能，这就是HTML中链接元素的功能。

1、链接元素简介

中的a，是英语单词anchor的简写，是“锚”。

通过这个锚，冲浪者可以指挥浏览器跳转到某个网页，或者当前网页的某个位置。

2、链接元素的语法

使用链接元素时，我们一般这样使用：

标记为链接的内容

href属性指定要跳转到的位置；

target属性告诉浏览器在哪个窗口打开新的网页；

元素的内容，可以是普通文本、图片、或带格式的文本。

3、元素跳转到其他网页的用法

当href属性值为html网页，元素的作用是跳转到其他网页。例如下面的HTML文档：

link001今日头条

使用浏览器打开该文件时，显示效果如下：

我们随便点击上面四个链接中的一个，就会进入到对应的网页。例如，点击“今日头条”，就会进入到下面的网页：

4、上面的例子中，打开链接，会覆盖掉当前的网页，我们可以通过增加target属性，并设置值为_blank，实现在新窗口打开链接。

修改后的HTML文档如下：

link002今日头条

使用浏览器打开该文件时，效果和上面一样。但是点击其中的任何一个链接，都会在新窗口里面打开。例如打开今日头条时，效果如下：

这样的效果也许用起来更方便。

4、元素跳转到本网页其他位置的用法

这里，我们先介绍一个概念——锚点。

锚点：定义页面内某个位置的超级链接。我们这样使用来定义一个锚点：

锚点的描述

当定义了锚点后，我们可以将href属性值设置为“#锚点名”，来实现页面内的导航。

例如，下面编写了一个比较长的HTML文档，为了便于用户快速导航到网页的开始和结束位置，定义了begin和end锚点，并提供了这两个锚点的链接：

link003

开始

《鹿柴》
作者：王维
空山不见人，
但闻人语响。
返影入深林，
复照青苔上。
跳转到结束位置
《相思》
作者：王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。
跳转到开始位置
跳转到结束位置
《杂诗》
作者：王维
君自故乡来，
应知故乡事。
来日绮窗前，
寒梅著花未。
跳转到开始位置
跳转到结束位置
《静夜思》
作者：李白
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
跳转到开始位置
跳转到结束位置
《登鹳雀楼》
作者：王之涣
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
跳转到开始位置
跳转到结束位置
《江雪》
作者：柳宗元
千山鸟飞绝，
万径人踪灭。
孤舟蓑笠翁，
独钓寒江雪。
跳转到开始位置
跳转到结束位置
《登乐游原》
作者：李商隐
向晚意不适，
驱车登古原。
夕阳无限好，
只是近黄昏。
跳转到开始位置


结束

使用浏览器打开这个文件时，展示效果如下；

点击“跳转到结束位置”，则浏览器的展示情况如下：

5、元素跳转到其他网页某个锚点的用法

当在某个网页定义了锚点后，我们可以将href属性值设置为“网页文件名#锚点名”，来实现直接跳转到该页面内某个锚点的导航。

例如，下面的HTML文档可以直接跳转到上面长网页的开始或者结束位置的功能：

link004古诗页面开始位置
古诗页面结束位置

使用浏览器打开这个文件时，展示效果如下：

点击“古诗页面结束位置”这个链接，可以直接打开长页面，并定位到页面结束位置：

元素还有一些其他不常用的功能，考虑到我们基本上用不到，就不介绍了。