HTML中锚点的使用

简介: 说到锚点,我们也许会需要稍微的思考一下,什么是锚点?官方的答案是这样的: 那么你可能就会有下面的疑问,锚点能做什么啊?回答就是,锚点可以理解为一个标记,一个用于而且便于寻找的标记。
  • 说到锚点,我们也许会需要稍微的思考一下,什么是锚点?

官方的答案是这样的:
这里写图片描述

  • 那么你可能就会有下面的疑问,锚点能做什么啊?

回答就是,锚点可以理解为一个标记,一个用于而且便于寻找的标记。常用于网页制作的超链接表示中。

  • 还有就是怎么在实际的开发中使用锚点呢?

下面先看一个简单的代码展示吧,为了演示出实际浏览网页时对一个超长网页的模拟,我故意添加了一些段落。:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>锚点的使用</title>
    </head>

    <body>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor1">这里是锚点1</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor2">这里是锚点2</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor3">这里是锚点3</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
    </body>

</html>
  • 接下来就是在实际中对锚点的测试了。测试的方法是在超链接的后面跟上”#anchor_idNumber“.井号后面的字母就是我们设计好的锚点的name值。如:http://127.0.0.1:8020/CSS_Study/anchor.html#anchor3

  • 结果如下:
    这里写图片描述
    我们可以发现,网页直接就跳到了我们想要进行访问的锚点的定义的位置。因此我们的关于锚点的测试便成功的完成了。


end!

目录
相关文章
|
4月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
146 0
|
6月前
|
移动开发 UED HTML5
HTML锚点链接的深入解析与应用
HTML锚点链接的深入解析与应用
168 0
|
移动开发 JavaScript 前端开发
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
146 0
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
|
开发者
HTML标签- 锚点定位|学习笔记
HTML标签- 锚点定位|学习笔记
153 0
HTML标签- 锚点定位|学习笔记
|
BI 容器
HTML——标签,路径,锚点,列表
HTML——标签,路径,锚点,列表
160 0
html 锚点定位偏移 外边距增加
html 锚点定位偏移 外边距增加
547 0
|
开发者
HTML标签- 锚点定位|学习笔记
快速学习HTML标签- 锚点定位
HTML标签- 锚点定位|学习笔记
|
Web App开发
HTML-文字标记 超链接锚点
在网页中文本都是用标记包住的文字效果 <!-- 文档规范引用 --> <html> <head> <meta charset="utf-8" /> <title>嘻嘻哈哈</title> </head> <body> <!-- <f...
885 0