HTML中＜a＞标签的使用细节

超链接标签<a>

作用一：实现遮罩层的功能

通过<a>标签和：target属性来设置。锚点-target遮罩层

<a href = '#modal'>点击</a>
<div class="modal-box" id="modal">
     <a href = '#'>返回</a>
</div>

.modal-box{
  positive: fixed;
  top:0;left:0;
  width: 100%;
  height: 100%;
  display: none;
}
.modal-box:target{
  display: block;
}

作用二： 链接本地指定位置

:target 锚点活跃元素，，当a标签点击时，href中#XXX会锚点到id为XXX的元素；给他添加:target选择器样式。
:target选择器执行需要条件：
1.需要点击a标签。
2.需要选中html元素中id值与 href #xxx 相同的元素。
3.给id添加XXX的元素添加样式。
注意：IE8以下浏览器不兼容。
外部链接/路径：跳转至另一个页面。
#：链接占位符，跳转至当前页面(可作为返回顶部使用)。
页面跳转：超链接的href值(值前面要加#)与某个元素的id相同。

 <a href="#box-one">点击跳转1</a>
        <a href="#box-two">点击跳转2</a>
        <a href="#box-three">点击跳转3</a>
        <a href="#box-four">点击跳转4</a>
        <hr>
        <section id="box-one">1</section>
        <section id="box-two">2</section>
        <section id="box-three">3</section>
        <section id="box-four">4</section>
         <a href="#">返回顶部</a>