HTML中的锚点的使用详解
2014-10-12 17:23
295 查看
网页中的锚点对初学网页设计的人感觉很模糊，但是他的使用确实我们在日常中经常见到的，下面就给大家说一说锚点的使用。
在W3C标准字“Anchor”一词即为锚点，其解释为：资源中的某个区域可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源，或者的特定部分，或者资源的特定表现形式。
通俗的理解：锚点就是用于超链接的一种标记，用来指定这个连接在页面内跳转的那一部分，哪一区域等。比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。
其中锚点的用法有两种，但性质同样，都是通过链接标签<a></a>以及其href属性实现的：
一种是：页内跳转；
一种是：跳到其他页面的某个区域。
下面来讲解几个例子
首先来看页内跳转的锚点用法：
我给每个div添加了ID号，然后将每个链接标签的href属性分别按顺序与每个div的ID相对应。【注意：href属性后的ID号必须有“#”，否则无效。】
代码如下：
接下来是页外跳转的锚点用法：
假如我在一个名为“示例”的文件夹中新建两个HTML文档第一个名为index.html第二个名为 test.html,两个html文件里面的代码都一样，跟我贴出的页内跳转的锚点用法的代码一样【就是前面贴出来的】。现在我把index.html当中第一个a
标签把其中的href="#3"，更改为href=“test.html/#3”并保存之后，我们再在浏览器打开，这时候会发现，页面会跳转到 test.html中的ID=3的div所在的区域。没错这就是页外的锚点跳转。所以当我们需要跳转到其他页面的某个区域时，只要把href的属性值
设置“跳转页面的URL+所想跳转到区域的ID（或者说锚点名称）”即可。
index.html的代码如下：
<html>
<head>
<title>锚点的使用讲解</title>
<style>
body{font-family:"微软雅黑";height:2000px;}
.nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}
.nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}
.nav a:hover{background:#04fdc4}
div{height:130px; line-height:130px;font-size:30px;text-align:center}
</style>
</head>
<body>
<p class="nav">
<a href="#1">第一个</a>
<a href="#2">第二个</a>
<a href="test.html#3">第三个</a>
<a href="#4">第四个</a>
<a href="test.html#5">第五个</a>
</p>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
</body>
</html>
test.html的代码如下：
<html> <head> <title>锚点的使用讲解</title> <style> body{font-family:"微软雅黑";height:2000px;} .nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;} .nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;} .nav a:hover{background:#04fdc4} div{height:130px; line-height:130px;font-size:30px;text-align:center} </style> </head> <body> <p class="nav"> <a href="#1">第一个</a> <a href="#2">第二个</a> <a href="#3">第三个</a> <a href="#4">第四个</a> <a href="#5">第五个</a> </p> <div id="1">1</div> <div id="2">2</div> <div id="3">3</div> <div id="4">4</div> <div id="5">5</div> </body> </html>
在浏览器中你会看到上述效果。。。。
这里我需要说明，我的示例均使用的ID锚点，给div添加ID的时候就为该div设置了锚点。早前的html版本规范是支持name属性的，即个元素添加
name属性，比如name="anchor1"，然后通过a标签来实现锚点跳转。这种方法我不建议使用。因为在最新版本的规范中或者说是严格的版本中通
过name属性来实现锚点的跳转这种方式已经不被支持了。所以推荐使用ID属性。
下面来看一个我们经常遇到的情况哈哈，浏览网页时返回顶部
首先是用name来设置锚点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚点示例</title>
</head>
<body>
<a name="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a name="A1" ></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a name="A2" ></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>
</body>
</html>
接下来是用id来设置锚点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚点示例</title>
</head>
<body>
<a id="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a id="A1"></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a id="A2"></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>
</body>
</html>
他们两个的结果都是一样的。。。
在W3C标准字“Anchor”一词即为锚点，其解释为：资源中的某个区域可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源，或者的特定部分，或者资源的特定表现形式。
通俗的理解：锚点就是用于超链接的一种标记，用来指定这个连接在页面内跳转的那一部分，哪一区域等。比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。
其中锚点的用法有两种，但性质同样，都是通过链接标签<a></a>以及其href属性实现的：
一种是：页内跳转；
一种是：跳到其他页面的某个区域。
下面来讲解几个例子
首先来看页内跳转的锚点用法：
我给每个div添加了ID号，然后将每个链接标签的href属性分别按顺序与每个div的ID相对应。【注意：href属性后的ID号必须有“#”，否则无效。】
代码如下：
<html>
<head>
<title>锚点的使用讲解</title>
<style>
body{font-family:"微软雅黑";height:2000px;}
.nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}
.nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}
.nav a:hover{background:#04fdc4}
div{height:130px; line-height:130px;font-size:30px;text-align:center}
</style>
</head>
<body>
<p class="nav">
<a href="#1">第一个</a>
<a href="#2">第二个</a>
<a href="#3">第三个</a>
<a href="#4">第四个</a>
<a href="#5">第五个</a>
</p>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
</body>
</html>在浏览器预览下，点击第四个，就跳到下面的第四个div了。接下来是页外跳转的锚点用法：
假如我在一个名为“示例”的文件夹中新建两个HTML文档第一个名为index.html第二个名为 test.html,两个html文件里面的代码都一样，跟我贴出的页内跳转的锚点用法的代码一样【就是前面贴出来的】。现在我把index.html当中第一个a
标签把其中的href="#3"，更改为href=“test.html/#3”并保存之后，我们再在浏览器打开，这时候会发现，页面会跳转到 test.html中的ID=3的div所在的区域。没错这就是页外的锚点跳转。所以当我们需要跳转到其他页面的某个区域时，只要把href的属性值
设置“跳转页面的URL+所想跳转到区域的ID（或者说锚点名称）”即可。
index.html的代码如下：
<html>
<head>
<title>锚点的使用讲解</title>
<style>
body{font-family:"微软雅黑";height:2000px;}
.nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}
.nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}
.nav a:hover{background:#04fdc4}
div{height:130px; line-height:130px;font-size:30px;text-align:center}
</style>
</head>
<body>
<p class="nav">
<a href="#1">第一个</a>
<a href="#2">第二个</a>
<a href="test.html#3">第三个</a>
<a href="#4">第四个</a>
<a href="test.html#5">第五个</a>
</p>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
</body>
</html>
test.html的代码如下：
<html> <head> <title>锚点的使用讲解</title> <style> body{font-family:"微软雅黑";height:2000px;} .nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;} .nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;} .nav a:hover{background:#04fdc4} div{height:130px; line-height:130px;font-size:30px;text-align:center} </style> </head> <body> <p class="nav"> <a href="#1">第一个</a> <a href="#2">第二个</a> <a href="#3">第三个</a> <a href="#4">第四个</a> <a href="#5">第五个</a> </p> <div id="1">1</div> <div id="2">2</div> <div id="3">3</div> <div id="4">4</div> <div id="5">5</div> </body> </html>
在浏览器中你会看到上述效果。。。。
这里我需要说明，我的示例均使用的ID锚点，给div添加ID的时候就为该div设置了锚点。早前的html版本规范是支持name属性的，即个元素添加
name属性，比如name="anchor1"，然后通过a标签来实现锚点跳转。这种方法我不建议使用。因为在最新版本的规范中或者说是严格的版本中通
过name属性来实现锚点的跳转这种方式已经不被支持了。所以推荐使用ID属性。
下面来看一个我们经常遇到的情况哈哈，浏览网页时返回顶部
首先是用name来设置锚点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚点示例</title>
</head>
<body>
<a name="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a name="A1" ></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a name="A2" ></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>
</body>
</html>
接下来是用id来设置锚点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚点示例</title>
</head>
<body>
<a id="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a id="A1"></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a id="A2"></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>
</body>
</html>
他们两个的结果都是一样的。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对话框showModelessDialog()使用详解http://www.weste.net/html/200404/20040414QBI152055.html
- Window 消息大全使用详解http://www.itepub.net/html/kaifajingcui/C___VC/2006/0515/38024.html
- HTML编辑器FCKeditor使用详解
- html 锚点的使用
- html meta使用详解
- 在线HTML编辑器的调用方法和使用方法详解
- 【014】Html中锚点的使用【转】
- HTMLParser使用详解（3）
- HTML编辑器FCKeditor使用详解
- html 锚点的使用
- html 锚点使用
- HTMLParser使用详解（3）- 通过Filter访问内容
- HTML编辑器FCKeditor使用详解
- html中meta的使用详解
- HTMLParser使用详解
- HTML快速入门7——URL详解、图片使用
- html锚点的使用方法
- HTMLParser使用详解（1）- 初始化Parser
- HTML编辑器FCKeditor使用详解
- html meta使用详解