浅谈锚点定位

简单的HTML中实现文本的锚点定位：

对于一篇长文本来说，我们要想快速的查找某个内容时，无疑是非常困难的，此时此刻就需要我们的锚点定位出马啦。
首先要知道锚点定位的原理是利用超链接标签（a标签）实现页面的跳转。
步骤：
首先要给我们的超链接取一个id名，然后在给想要跳转的文本区域也给起一个ID（#）名，并且两个ID名字要一样。最后点击我们的超链接便可以跳转你想去的内容。
下面我们来看看具体的事例：

 <a name="first">顶部</a>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus et vitae repellendus hic temporibus voluptatibus explicabo, aliquid totam sapiente sint ipsa, doloribus praesentium odio animi voluptas libero dolores voluptates! Modi.
    Ab aliquid incidunt maxime, reiciendis omnis odit amet perferendis praesentium placeat quisquam voluptates dignissimos quos asperiores rerum. Reiciendis libero temporibus ipsum aperiam dolorum, eius suscipit earum ex numquam sapiente nemo?
    Suscipit, nemo! Assumenda eligendi possimus quibusdam id laudantium exercitationem magni tempore modi quidem nemo repellat expedita commodi mollitia delectus libero odit error nostrum, soluta dolorem voluptate iste qui cumque officia.
    Nam itaque at totam rerum dolorum iure recusandae sunt. Excepturi est, molestiae sunt consectetur id beatae ab dolor quas tenetur reprehenderit ex impedit! Ut nesciunt maxime ullam, nostrum temporibus consequuntur!
    Nobis alias exercitationem maxime vero. Vel iusto fuga alias dicta pariatur? Voluptatibus, ducimus deserunt? Quam sit officia assumenda iste, eius unde dicta labore laboriosam necessitatibus blanditiis. Pariatur mollitia magnam quisquam?
    Eveniet impedit maxime quaerat, nisi illum autem laudantium, natus accusamus incidunt libero quia repellendus hic repudiandae consectetur. Voluptatibus quae quos cupiditate eum, voluptates, eveniet sit ratione cumque quia, adipisci pariatur.
    <p id="second>">Consectetur nostrum eius illum iste architecto cumque! Dolorum maxime, temporibus eius magnam eaque laboriosam tenetur quas ea ducimus ex consequuntur laudantium vel, est omnis doloribus odit beatae! Qui, officiis. Eum.
    Blanditiis harum tempora aliquam veniam expedita. Est aliquid at illo molestiae, fugit saepe obcaecati. Quo laudantium dolor ipsum, beatae, alias nihil nobis recusandae aut non necessitatibus labore asperiores possimus aliquam!
    Recusandae ullam est, sunt facere eaque dicta, necessitatibus nihil nulla dolorum itaque totam culpa optio tenetur blanditiis inventore deleniti vel quibusdam? Accusantium et assumenda maiores placeat voluptates consequuntur fugit fuga!
    Nam recusandae voluptates provident quos veritatis commodi,</p>
     corporis sint voluptate accusamus ut quis excepturi consectetur, adipisci perferendis iusto quae facere rem! Pariatur maxime sapiente nam nobis temporibus dolorem porro rerum.
    Totam dolor officiis saepe sed consectetur rem cum aut a consequuntur dolorum rerum aspernatur nulla fuga, labore quasi praesentium et ullam sunt numquam tenetur provident voluptate dolorem? Voluptatibus, iusto architecto.
    Vero error reprehenderit veritatis obcaecati repudiandae quas alias nulla modi, eligendi dolores ex ipsum dolorum adipisci qui quisquam molestiae consequatur laboriosam nemo vitae. Sequi, possimus delectus enim quas debitis eveniet.
    Totam ea sapiente quaerat sequi quas? Quisquam dolores eius</p>
   <a href="#top">回到顶部</a>
   <!-- 若文本超过一页后点击就会回到首页  -->
   <a href="#second">回到</a>
    <!-- 点击就会回到second文本处  -->

2、文字的锚点十分的容易，接下来我们看看图片应该怎么定位。就拿中国地图中，我们想定位跳转到北京应该怎么办。
首先设置可点击的热点，并取一个id名，如地图中的我们选取的北京区域。
将准备好的照片地址导入，并取一个名，记住要和下面取得名字一样，用#定位。
确定选定的区域用长方形，圆或者其他形状包裹，并通过测量给出这个区域的范围。
最后点击北京区域就能调到我们想去的地方。点击未选定的区域就会跳转我们给的其他页面

<a href="https://baike.baidu.com/tashuo/browse/content?id=d00ea92e4976cd13cf980117" 
target="_black">
  <!--其他区域跳转的页面 -->
       <img src="image/01_jpg" usemap="#beijing">
      <!-- 将准备好的照片地址导入，并取一个名，记住要和下面取得名字一样，用#定位。 -->
    </a>
    <map name="beijing">
      <!-- 首先设置可点击的热点，并取一个id名，如地图中的我们选取的北京区域。 -->
      <area shape="rect" coords="400,346,478,423" href="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3849741857,3900886752&fm=26&gp=0.jpg" target="_black">
      <!-- 确定选定的区域用长方形，圆或者其他形状包裹，并通过测量给出这个区域的范围。 -->
    </map>