整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
起html的锚点这个概念，你可能会感到会陌生，感觉自己没有听过。但是如果说起它的作用，你可能就恍然大悟了，就像你说起一个演员，可能不知道是谁，但是说起它演的一个角色可能立马就知道那个人是谁了。
那么，什么是锚点呢？
锚点存在于html中，在默认情况下，可以快速的定位到指定元素，并将元素置于页面最顶端。当然我们可以按照自己的需求来确定锚点的位置，不一定要让其定位在顶部。现如今有无数多的页面已经用上了锚点，比如Vue.js的官网，在我们点击标题“Vue.js是什么”和标题“起步”的时候，标题都会自动移到页面顶端。
锚点的使用
那接下来，我们就来看看几种锚点的使用方法。
id定位
最基本的使用方法如下，当点击<a>标签时，页面会相应的将该div内容置顶
锚点的id定位方法
name定位
除了id，还可以通过name进行定位，不过需要主要的是，如果采用name属性进行定位的话，只适用于a标签，类似于p标签等都不支持。
锚点的name定位方法
javascript代码进行定位
在原生的javascript中，有一个scrollIntoView()方法，可以实现页面的锚点
javascript方法实现锚点
一个综合的例子
讲了三种实现方法后，接下来看一个实际运用的例子。首先是实际效果图，在点击左侧栏时，页面右边会相应的显示指定段落的内容
锚点的实际使用
首先看下html页面的内容，左侧的ul代码
左侧的ul代码
右侧的内容部分代码
右侧内容部分代码
css部分的代码
css部分的代码
将上述的代码写在一个html文件中，便可实现左侧栏点击，右侧栏显示相应内容的效果。
特殊情况
在实际项目中，我们总会遇到这样一种情况，在页面顶部有固定头内容的时候，如果直接使用上述方法，会得不到想要的效果
直接使用锚点的效果图
通过该图可以看出，第三段内容的标题被遮住了，实际应该往下再显示一点
那么，我们该怎么解决这个问题呢？在这里我想到了两种方法，第一种是在每个内容div上加一个隐藏的p元素，给p元素一个定高，再向上偏移，这种方法会导致页面出现很多个多余的p元素，不推荐使用。
第二种是利用伪元素，伪元素可以占用实际的高度，这是推荐使用的方法
伪元素的样式
通过给h3标签添加伪元素样式，可完美解决这个问题，效果图如下
使用伪元素后的效果图
总结
今天的内容你会了么？如果还没有掌握的话，可以按照文章中的代码，进行实践，代码总是要多敲才更容易理解。
如果喜欢的话，记得关注小编噢，小编后续会坚持出更多技术性的文章，如果有任何问题，也欢迎提问，小编都会尽力解答的。
友问：站长在线的站内文件夹跳转的代码是什么？
站长在线答：站内文件夹跳转的代码就是一个301跳转代码，此代码放在自己自定义的文件夹内，直接宣传自定义的地址，更加有品牌感，即宣传了自己的品牌，也宣传了业务对象，如：
阿里云优惠购买业务：olzz.com/aliyun
腾讯云优惠购买业务：olzz.com/txy
站长在线的头条地址：olzz.com/toutiao
……
301跳转代码
以此类推，自己可以建立无数个二级目录的推广地址，自己的品牌域名和业务对象一起宣传，这是站长可以利用的特殊权益。站长在线就告诉大家301跳转代码和操作方法：
1、新建一个txt文本文档，把下面的代码复制进去保存，然后重命名为index.html
<script>
function GetRandomNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
var num = GetRandomNum(1,14808);
location.href = "链接地址";
</script> ")2、在网页空间里面新建一个文件夹如aliyun，然后把刚才制作的index.html上传到这个文件夹里面即可。
PS：链接地址一定是http或者https开头的地址哦！
好了，站内文件夹跳转的代码就已经告诉你了，赶快去实践吧！欢迎来到站长在线官方头条号【站长快递】，学习更多的建站知识。
接上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="refresh" content="0;url=static/ck600mgr/pages/index.html">
<title></title>
</head>
<body>
</body>
</html>301是永久重定向，常用的场景是使用域名跳转。
比如，我们访问 http://www.zhihu.com 会跳转到 https://www.zhihu.com，发送请求之后，就会返回301状态码，然后返回一个location，提示新的地址，浏览器就会拿着这个新的地址去访问。
301.png
302是临时重定向，用来做临时跳转。接着上面的例子，重定向到 https://www.zhihu.com 的请求又会通过302重定向到 https://www.zhihu.com/signup?next=%2F
302.png
不过，看上去301和302都是代表重定向的意思。那具体有啥区别呢？
http 1.0规范中有2个重定向——301和302，在http 1.1规范中存在4个重定向——301、302、303和307。
其中301在http 1.0以及http 1.1中都表示永久重定向，就不讨论了。
那302呢？
在http1.0中，302的规范是这样的：
原请求是post，则不能自动进行重定向；原请求是get，可以自动重定向。
但是浏览器和服务器的实现并没有严格遵守HTTP中302的规范，服务器不加遵守的返回302，浏览器即便原请求是post也会自动重定向，导致规范和实现出现了二义性。
所以HTTP 1.1中将302的规范细化成了303和307
继承了HTTP 1.0中302的实现（即原请求是post，也允许自动进行重定向，结果是无论原请求是get还是post，都可以自动进行重定向）。
307则继承了HTTP 1.0中302的规范（即如果原请求是post，则不允许进行自动重定向，结果是post不重定向，get可以自动重定向）。
*请认真填写需求信息，我们会在24小时内与您取得联系。
