前端从零开始(15)超链接标签 a

认识超链接标签 a 标签

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

注意

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

1. a 标签的使用

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

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

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

前端从零开始(15)超链接标签 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 标签了。

  1. 方法二:使用 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. 注意事项

  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 属性来设置跳转页面的打开方式。
前端从零开始(15)超链接标签 a
图片描述

微信公众号

扫码关注


原文始发于微信公众号(老徐说):前端从零开始(15)超链接标签 a

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/19209.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!