Html中锚点的使用

概述

URL是由多个部分组成。包括协议、主机（域名）、端口、路径、查询参数和锚点

https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

锚点（anchor）是网页内部的定位点，使用 # 加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。

锚点名称通过网页元素的 id 属性命名。id 属性是元素在网页内的唯一标识符。比如，网页可能包含多个<p>标签，id 属性可以指定每个<p>标签的唯一标识符。

<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

id 属性的值在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址 https://foo.com/index.html#bar 的时候，浏览器会自动将页面滚动到 bar 的位置，让用户第一眼就看到这部分内容。

示例

<!DOCTYPE html>
<meta charset="utf-8" />
<head><style>#div1,#div2,#div3,#div4{height: 400px;}.menu{position: fixed;top:0px;left:0px;}.menu a{padding: 10px;color: red;}</style>
</head>
<html><body><div class="menu"><a href="#div1">区域1</a><a href="#div2">区域2</a><a href="#div3">区域3</a><a href="#div4">区域4</a></div><div style="margin-top:40px"><div id="div1" style="background: yellow;"><h1>区域1</h1></div><div id="div2" style="background: blanchedalmond;"><h1>区域2</h1></div><div id="div3" style="background: blue;"><h1>区域3</h1></div><div id="div4" style="background: gray;"><h1>区域4</h1></div></div></body>
</html>

相关学习
https://wangdoc.com/html/url#%E9%94%9A%E7%82%B9
https://wangdoc.com/html/attribute#id

Html中锚点的使用相关推荐

html语言如何设计锚点,网页html中锚点（描点）定位或书签跳转的实现方法 |
如果你在网页中想点击一个链接进入到这个网页同个页面的某个位置,或者是不同页面的某个位置,怎么办呢? 嘿嘿,这里就教大家一个方法,网页html中锚点(描点)定位或书签跳转的实现方法. >>& ...
网络推广专员教大家网站SEO优化中锚文本的使用技巧
网站优化中有许多细节需要网络推广专员中优化人员们的更多注意,其中之一就是描文本.其实,锚文本就是给一个关键词加上一个链接跳转到需要的页面,广泛的应用到网站的方方面面,应用的好能有效促进网站收录,帮助提 ...
浅析网站优化中锚文本的使用技巧
其实在网站优化中有很多来源于实际经验总结的技巧与细节,这些内容对于新手来说是宝贵的财富,今天想要给大家分享的就是关于锚文本的使用技巧的分析.众所周知,锚文本就是给关键词加上链接跳转到需要的页面并应用在 ...
html中锚记标记的隐藏,在 Dreamweaver 中选择、查看和设置不可见元素 - Dreamweaver 用户指南...
选择哪些元素应设置为可见,然后单击"确定". 注意:对话框中元素名称旁边的选中标记表示当选择"查看">"可视化助理">" ...
html中锚点的应用【本页面跳转】
设置锚点 <a name="top"></a> 同页跳转 <a href="#top">返回顶部</a> 不同页 ...
html 图片加锚点,html中锚点的实现
Hi,大家好久不见,今天我们在这里给大家介绍一下在html页面中的拖放功能的实现:至于运用呢,比如有:点击某一张图片,然后转到对他的详细介绍等:接下来就给大家详细介绍一下如何实现. 那我们该如何创建使 ...
html网页中的锚点(命名锚记)的使用介绍
1.锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定 ...
php分页命名锚记怎么用,网页中的锚点(命名锚记)的使用介绍
1.锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定 ...
Markdown中使用锚点
Markdown的语法是不支持锚点的,可以使用HTML的锚点语法,在页面中点击一个链接跳转到页面中锚点所在的位置. 建立一个跳转的链连接,这个语法和普通链接的语法一样,区别就是括号内的链接以#起始. ...

Html中锚点的使用

概述

示例

Html中锚点的使用相关推荐

最新文章

热门文章