HTML代码中什么是锚点?怎么设置锚点?

HTML代码中什么是锚点?怎么设置锚点?,第1张

对于网页制作初学者来说锚点应当是个很新鲜的词,但是在我们浏览网页的时候确实经常可以见到的。现在就给大家介绍一下锚点是什么以及怎么设置锚点吧。

锚点是什么?

在W3C标准字“Anchor”一词即为锚点,其解释为:资源中的某个区域可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源,或者的特定部分,或者资源的特定表现形式。

通俗的理解:锚点是一种超链接,只是它是页面内部的超链接。比如我们有一个网页很长很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。

怎么设置锚点?

首先打开制作网页的工具,现在很多软件都可以用来制作网页,像是eclipse、myeclipse、Dreamweaver、visual studio等等,都是很好用的软件,ide。

打开一个HTML页面,不同的软件有不同的打开方式,下面是用Adobe Dreamweaver软件来打开一个页面的。

基本代码如下所示。

<!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/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<body>

</body>

</html>

在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>

5

锚点的格式代码

<a name="p3"></a>

<p>p3段落</p>

<p>------------------</p>

<p>------------------</p>

<p>------------------</p>

<p>------------------</p>

<p>------------------</p>

<p>------------------</p>

<p>------------------</p>

6

运行结果如下所示:

点击【段落2】会立马跳转到段落2中。

在网页设计中怎么使用锚点?

锚就是在文档中设置位置标记,并给该位置一个名称,以便引用。通过创建锚点,可以使链接指向当前文档或不同文档中的指定位置。锚点常常被用来跳转到特定的主题或文档的顶部,使访问者能够快速浏览到选定的位置,加快信息检索速度。

1、设置锚点

把光标置于文档窗口想要设置锚点的地方,点击插入面板中”常用”/”常用锚记”。在d出的对话框中起一个锚名字。

2、创建锚点链接

选择要建立链接的文本或图像,在属性面板的链接中输入一个#号和锚点名。例如:#aa。 要链向不同页面中的锚点,则点击链接边的文件夹小图标,在打开对话框中选择要链接的文件,按"确定"键后在"属性"面板的链接栏中会显示链接的文件地址,在地址后面紧跟着输入#号和锚名字。

1、打开DW软件,选择一个空白的html文档,打开新建一个空白网页。

2、左侧为目录,右边为页面。我们发现右面的页面相对较长,不能完全显示。这个时候,我们就需要锚点链接。当我们想点击“目录”百度经验测试3,就跳转到相对应的`右侧测试3页面,就需要有锚点链接。

3、我们以百度经验测试3为示例,首先,我们要选中右侧表格中的测试3,把光标移动到测试3的前面。

4、移动好之后,选择工作区---常用--命名标记按钮。如果你没有如图所示的图标,你可以打开窗口---插入前面打对号就可以了。快捷键:Ctrl+F2。

5、点击之后会d出命名窗口,不要用汉字命名,然后给锚点添加名称,这里我们命名为“cs3”,添加之后,会出现如图所示的效果。前面有一个锚的小图标,文字被选中了。

6、回到左侧选中,刚刚的目录百度经验测试3,在页面底部有链接的字样(红色框那里),然后把刚刚的锚点名称(cs3)填写进去,这里记得加“#”号。一个页面可以有很多的锚点,这里必须要加“#”号。

7、好的,填写好之后,一个锚点链接就做好了。保存Ctrl+S,然后F12,预览,大功告成。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11819197.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存