认识超链接标签 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 标签实现锚点定位,需要两个部分组成:锚记 和 指向锚记的链接。有以下方法:
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="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>
7. 小结
- a 标签为双标签,有首尾标签,且必须有内容。
- a 标签必须填写 href 属性,href 属性为跳转的地址路径。
- a 标签为行内块元素,可以设置宽高,且在一行排列。
- a 标签通常用于制作导航栏。
- a 标签设置 target 属性来设置跳转页面的打开方式。
- 还没有人评论,欢迎说说您的想法!