章节索引 :

认识超链接标签 a 标签

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

注意

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

1. a 标签的使用

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

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

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

图片描述

注意:

  1. a 标签的 href 属性必须添加网络协议,如:HTTP 或者 HTTPS 协议,一般为 HTTPS 协议,不能单纯的编写网址;
  2. a 标签有很多默认样式,默认字体为蓝色,文本有下划线,点击过后,字体变为偏紫色;
  3. a 标签默认在本页面跳转,既不会新开一个网页跳转;
  4. 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 标签实现锚点定位,需要两个部分组成:锚记指向锚记的链接。有以下方法:

1. 方法一:使用 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 标签了。

2. 方法二:使用 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="mubiao">这里是目标的位置</div>

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

4. 注意事项

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

5. 经验分享

  1. 通常情况下我们会清除 a 标签的默认样式;
  2. 如果我们不想 a 标签跳转页面,我们可以设置 HREF 属性为 # 或者 javascript:;
  3. 我们也可以通过 js 阻止 a 标签的默认事件,这样 A 标签页不会跳转页面;
  4. 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>

7. 小结

  1. a 标签为双标签,有首尾标签,且必须有内容。
  2. a 标签必须填写 href 属性,href 属性为跳转的地址路径。
  3. a 标签为行内元素,不可以设置宽高,且在一行排列。
  4. a 标签通常用于制作导航栏。
  5. a 标签设置 target 属性来设置跳转页面的打开方式。

图片描述