认识超链接标签 a 标签

我们在很多应用场景需要点击标签而跳转到一个新的网页，比如点击文章标题进入到文章详情，点击商品名称进入到商品详情，这个时候我们就需要用到超链接标签 a 标签了， a 标签页成为了我们在实际网站开发过程中，用的比较多的标签。

注意：

本章节只能展示 a 标签在网页上呈现的效果，实际跳转效果需自己编写代码操作。

1. a 标签的使用

a 标签为双标签，需要有首尾标签。a 标签的 href 属性为必填属性，表示该 a 标签点击过后跳转网页的地址。例如：

<a href="https://www.imooc.com/">去往慕课网</a>

在网页中会呈现以下效果：

注意：

a 标签的 href 属性必须添加网络协议，如：HTTP 或者 HTTPS 协议，一般为 HTTPS 协议，不能单纯的编写网址；
a 标签有很多默认样式，默认字体为蓝色，文本有下划线，点击过后，字体变为偏紫色；
a 标签默认在本页面跳转，既不会新开一个网页跳转；
a 标签的 href 属性如果为错误的网络地址，则页面会跳转，但不会显示网页的内容。

a 标签还有一个属性为 target，表示跳转的网页为在当前页面跳转，还是新开一个页面跳转。默认值为 _self, 表示为在当前页面跳转，如果将 a 标签的 target 属性设置为 _blank，则表示新开一个网页跳转，代码如下：

<a href="https://www.imooc.com/" target="_blank">去往慕课网</a>

a 标签的 target 属性为可选属性。

2. 图片链接

我们如果是编写新闻类网站或者电商类网站，有一个需求是点击图片也可以跳转到对应的详情页面，这个时候就需要用到图片链接了。其实图片链接非常简单，我们只需要在 a 标签中嵌套一个 img 标签即可，这样就可以实现点击图片跳转网页了。

3. 锚点定位

a 标签还有一个重要的功能，那就是锚点定位。什么是锚点定位呢？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。那么 a 标签实现锚点定位，需要两个部分组成：锚记和 指向锚记的链接。有以下方法：

方法一：使用 a 标签作为锚记和链接，俗称使用 name 定位，代码如下：

<a href="#mao">点击此处到目标位置</a>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="mao">目标位置</a>

被点击的 a 标签的 href 属性需要和目标位置的 a 标签的 name 属性对应，而且被点击的 a 标签的 href 属性必须加上 # ，但是很多时候锚点对象不一定是 a 标签，那就不必要为了使用锚点定位而额外增加一个 a 标签了。

方法二：使用 a 标签作为链接，使用其他元素（建议使用块元素）作为锚记，俗称 id 定位，代码如下：

<a href="#mubiao">点击此处到目标位置</a>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</a>
<div id="other_page">这里是目标的位置</div>

被点击的 a 标签的 href 属性必须和目标位置的 HTML 标签的 id 名一致，而且被点击的 a 标签的 href 属性也必须加上 # 。需要注意的是，目标位置的 HTML 元素最好是块级元素。

4. 注意事项

a 标签为双标签，有首尾标签；
a 标签必须写内容，否则在页面上不会显示；
a 标签的 href 属性为必填属性，表示跳转网页的地址；
a 标签的 target 属性为可选属性，表示是在当前页面跳转还是新开一个页面跳转，默认在当前页面跳转；
A 标签有一些默认样式。

5. 经验分享

通常情况下我们会清除 a 标签的默认样式；
如果我们不想 a 标签跳转页面，我们可以设置 HREF 属性为 # 或者 javascript:;；
我们也可以通过 js 阻止 a 标签的默认事件，这样 A 标签页不会跳转页面；
a 标签为行内块元素，默认在同一行排列，可以设置宽高，所以我们通常用来做导航栏。

6. 真实案例分享

思否论坛首页

 <div>
   <a href="/">
      <span>我的订阅</span>
   </a>
   <a href="/hottest">
      <span>近期热门</span>
   </a>
   <a href="/newest">
      <span >最新内容</span>
   </a>
</div>

京东首页（部分）

<ul>
    <li>
      <a href="javascript:login();">你好，请登录</a>
      <a href="javascript:regist();">免费注册</a>
    </li>
    <li>
      <div>
        <a target="_blank" href="//order.jd.com/center/list.action">我的订单</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//home.jd.com/">我的京东</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//vip.jd.com/">京东会员</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//b.jd.com/">企业采购</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//app.jd.com/">手机京东</a>
      </div>
    </li>
  </ul>