大家对a标签的认识,大概就是知道a标签可以做链接的跳转,但是下面的用法你都知道吗?今天小甜甜就带领大家一起感受一下a标签的强大功能。
a标签的用法:
- 常规跳转链接
- 假链接(跳转到本页面)
- 锚点(在当前页面的不同位置进行跳转/跳转到另一个页面的指定位置)
- 下载源
欢迎补充新的用法
格式:
<a href="http://www.baidu.com">百度一下</a>
作用:
用于从一个页面链接到另一个页面
注意事项:
在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签a标签也叫做超级链接或超链接
a标签的属性:
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
作者:273496225@qq.com
时间:2017-08-29
描述:
base标签:
-格式: <base target="_blank" />
-作用:一次性指定所有的a标签打开方式
-注意事项:
+base必须嵌套在head标签里面
+如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
-base标签和a标签结合使用
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可
以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
-->
<base target="_blank" />
</head>
<body>
<!--
作者:273496225@qq.com
时间:2017-08-28
描述:
a标签(anchor):
-格式:<a href="http://www.it666.com">江哥博客</a>
-作用: 用于从一个页面链接到另一个页面
-注意事项:
+在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签(包含的内容都可以进行点击)
+a标签也叫做超级链接或超链接
+a标签不换行显示
+去公网网页,要加上http://或者https://,本地网页可以直接使用相对路径/绝对路径
-a标签的属性
属性名称 作用
href(hypertext reference) 指定跳转的目标地址
target 告诉浏览器是否保留原始界面, _blank保留, _self不保留
title 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)
-->
<!-- 1.去别的网页:href属性 -->
<a href="http://www.baidu.com">去百度</a>
<!-- 2.跳转形式:target属性-->
<!-- 2.1.给跳转的网页打开新的页面:target="_blank" -->
<a href="http://www.baidu.com" target="_blank">再去百度</a>
<!-- 2.2.跳转的网页在当前页面打开(默认就是这样的):target="_self" -->
<a href="http://www.baidu.com" target="_self">再再去百度</a>
<!-- 3.点击图片进行跳转:a标签包含的的内容,都可以进行点击 -->
<a href="http://www.baidu.com">
![](img/baidu.png)
</a>
<!-- 4.鼠标悬停在链接上显示提示信息:title="提示信息" -->
<a href="http://www.baidu.com" title="这是去百度的链接">再再再去百度</a>
<!--
5.假链接跳转到本页:href="#"/href="javascript:"
-使用场景:
+刚刚写网页的时候,还不能进行真实的跳转(别的网页还没有写出来),就使用假链接占位
+返回顶部
-javascript:;:
点击之后停留在本页面的当前位置
-#:
点击之后回到本页面的顶部位置(所以回到顶部功能就可以使用这个)
-->
<a href="#">假链接1</a>
<a href="javascript:;">假链接2</a>
<!--
6.锚点:href="[HTML文件位置]#id名"
-使用场景:做目录
-跳转到当前页面指定位置(锚点链接)
+格式<a href="#location">跳转到指定位置</a>
+在页面的指定位置给任意标签添加一个id属性
+例如 <p id="location">这个是目标</p>
-跳转到指定页面的指定位置
+格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
+只需要在01-锚点链接.html页面添加一个id位置即可
-->
<!-- 6.1.去到本页面的指定位置:href="#id名" -->
<a href="#">回到开头</a> <!-- 一个#,回到本页面开头 -->
<a href="#test">去到test位置</a> <!-- #id名,去到对应这个id的标签的位置,如果后面足够长,它将显示在最顶部 -->
<!-- 6.2.去指定页面的指定位置:href="HTML文件名#id名" -->
<a href="second.html#look">指定页面的指定位置</a>
<!-- 7.做文件的下载:href="girl.zip"-->
<a href="a.zip">打包下载</a> <!-- 直接在href里面写上文件的路径就行 -->
<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 />嘿嘿
<h1 id="test">TEST</h1>
<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 /><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 />嘿嘿
</body>
</html>
更多信息:www.itcourse.top
网友评论