HTML代码中什么是锚点?怎么设置锚点?
锚点--是网页的超链接中的一种,也叫做命名锚点,通过name来定位。可以实现在同一页页面中进行链接,很常用,它的英文名称是anchor,也是用a标签来链接的。它的作用是链接同一个页面的某一个章节。
1、首先打开一个HTML页面,不同的软件有不同的打开方式,下面是用Adobe Dreamweaver软件来打开一个页面的。
2、基本代码如下所示。
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
3、在body里面填写如下的代码。
<body>
<a href="q.html#p1">文字1</a>
<a href="q.html#p2">文字2</a>
<a href="q.html#p3">文字3</a>
<a name="p1"></a>
<p>p1段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<a name="p2"></a>
<p>p2段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<a name="p3"></a>
<p>p3段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
</body>
4、锚点的格式代码
<a name="p3"></a>
<p>p3段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
5、运行结果如下所示:点击【段落2】会立马跳转到段落2中。
6、完成效果图。
设置锚点也是很简单的,例如一个文章分了三段,每段有个标题,标题的代码是这样的
<h2>我是标题一</h2>
<h2>我是标题二</h2>
<h2>我是标题三</h2>
如果我想要在页面内设置锚点,做一个索引,点击相应的索引标题就跳转到相应的段落,那么就只要在标题所在的html标签里面设置一个ID,然后链接过去即可,可以像下面这样设置ID:
<h2 id="a">我是标题一</h2>
<h2 id="b">我是标题二</h2>
<h2 id="c">我是标题三</h2>
然后在索引里面这样设置超链接就可以实现和锚点的连接了
<a href="#a">点击我就会跳到第一段</a>
<a href="#b">点击我就会跳到第二段</a>
<a href="#c">点击我就会跳到第三段</a>
这样你应该就可以理解了吧~~~