整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML中a标签的这些功能你真的知道吗?

天我们来看下html中<a></a>的特点与功能

一 .a标签是超链接标签,首先我们说一下它的特点:

1.在网页中默认会有下划线

2.不会继承父级的颜色样式

效果图

详细代码

其中,自带的下划线不美观,但我们可以用以下代码解决,ctrl+s保存后,下划线就没有了

去掉下划线

二 .下面我们来看看a标签的几个功能:

1.跳转页面

href 属性要跳转页面的地址(没地址的情况下可以写一个#),即可以给网络的地址也可以给本地的地址

target 属性

值:_blank在新页面打开

_self 在本页面打开(默认的)

跳转页面功能

2.锚点

作用:网页太长时,通过点击页面某一个导航,页面直接到达该内容,网页还是该网页,只是向下自己滑动。

实现方法:在 href 的值里写上#name,name对应id的值

下面是一个简单例子,点击颜色就会跳转到相应颜色区域

锚点例子

3.下载

作用:实现网页的下载功能

实现方法:在 href 里写上文件的地址就可以了

注意:如果你要下载的文件浏览器能够读出来,那它就不会被下载,而是会被直接打开。如果就想让浏览器下载所有文件,那就在a标签里添加一个属性download( h5 新增属性,不兼容IE低版本),它的值写上文件的名字加后缀名

下载功能

三.此外,介绍一下a标签的颜色,给a标签换颜色也是会经常用到的,但是怎么改呢?

这里用到了“伪类”,伪类:针对元素的某种状态添加的不同样式

a :link 未访问链接的(颜色)状态

:visited访问过的链接的(颜色)状态

:hover鼠标移入(悬停)(颜色)状态

:active鼠标按下不动时候的(颜色)状态

改变a标签颜色

今天的a标签就介绍到这里,你学到了吗?

家好,我是江湖哥,今天分享html教程入门级的部分,大神请绕道,小白请点赞,哈哈,言归正传:

Html教程:a标签

知识要点:

1. a标签的概念

2. a标签属性



一:什么是a标签?

a标签的作用:就是用于控制页面与页面之间的跳转的

a标签的格式:<a href="指定要跳转的目标界面的链接">需要展示给用户看见的内容</a>

<a href="https://www.toutiao.com/">江湖哥博客</a>

二:a标签的属性

a标签中有一个target属性,这个属性的作用就是专门用于控制如何跳转

描述

_blank

于在新的选项卡中跳转,也就是新建页面跳转

_self

默认。在当前选项卡中打开被链接文档,也就是不新建页面跳转

_parent

在父框架集中打开被链接文档。

_top

在整个窗口中打开被链接文档。

framename

在指定的框架中打开被链接文档。

<a href="https://www.toutiao.com/">可见内容</a>
<a href="https://www.toutiao.com/" target=”_blank”>江湖可见博客</a>

a标签中还有一个属性,叫做title,a标签中的title和img标签中title一样,都是用来控制鼠标悬停时显示的提示文本内容的

<a href="https://www.toutiao.com/" target="_blank" title="点击会跳转到可见博客首页">可见</a>

设置 target 属性时, top 与 parent 的打开方式十分类似,需仔细区分。

比如网 A 中镶嵌了 iframe 网页 B,网页 B 又镶嵌了 iframe 网页C。

· 如果网页 C 中连接设置 target=_parent,则跳转到网页 B 去掉直接在 A 中嵌入网页 C 中链接页面。

· 如果网页 C 中 target=_top ,则直接跳出所有 iframe 框架,直接转向 C 中链接页面


注意点:

1.a标签不仅可以让文字可以点击,还可以让图片也能够被点击。

2.一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方

3.如果通过a标签的href属性指定一个URL地址,那么必须在地址前面加上http://或https://。

4.a标签的href属性除了可以绑定一个网络地址以外,还可以指定一个本地的地址


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>a标签的使用</title>
</head>
<body>
		<a name="top"></a>
		<a href="https://www.toutiao.com/">a是控制界面也页面的跳转</a><br><br>
		<a href="https://www.toutiao.com/" target="_blank">跳转到新窗口打开</a><br><br>

		<a href="#name1">锚点跳转1</a>&nssp;&nssp;&nssp;<a href="#name2">锚点跳转2</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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		这是一个锚点跳转文字1 <a name="name1"></a>   <a href="#top">返回顶部</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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		这是一个锚点跳转文字2 <a name="name2"></a>   <a href="#top">返回顶部</a>
</body>
</html>

关注我,点击下面链接,即可看视频

览器支持

所有主流浏览器都支持 <a> 标签。

标签定义及使用说明

<a> 标签定义超链接,用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性,它指定链接的目标。

在所有浏览器中,链接的默认外观如下:

  • 未被访问的链接带有下划线而且是蓝色的

  • 已被访问的链接带有下划线而且是紫色的

  • 活动链接带有下划线而且是红色的

提示和注释

提示:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。

提示:请使用 CSS 来改变链接的样式。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,<a> 标签既可以是超链接,也可以是锚。在 HTML5 中,<a> 标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。

HTML5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。

属性

New :HTML5 中的新属性。

属性描述
charsetchar_encodingHTML5 不支持。规定目标 URL 的字符编码。
coordscoordinatesHTML5 不支持。规定链接的坐标。
downloadNewfilename指定下载链接
hrefURL规定链接的目标 URL。
hreflanglanguage_code规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNewmedia_query规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。
namesection_nameHTML5 不支持。规定锚的名称。
relalternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
revtextHTML5 不支持。规定目标 URL 与当前文档之间的关系。
shapedefaultrectcirclepolyHTML5 不支持。规定链接的形状。
target_blank_parent_self_topframename规定在何处打开目标 URL。仅在 href 属性存在时使用。
typeNewMIME_type规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注:MIME = Multipurpose Internet Mail Extensions。

全局属性

<a> 标签支持 HTML 的全局属性。

事件属性

<a> 标签支持 HTML 的事件属性。

创建超级链接

本例演示如何在 HTML 文档中创建链接。

将图像作为链接

本例演示如何使用图像作为链接。

在新的浏览器窗口打开链接

本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开您的站点了。

创建电子邮件链接

本例演示如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

创建电子邮件链接 2

本例演示更加复杂的邮件链接。

使用锚跳转到同一个页面的不同位置

本例演示如何使用锚的 id 属性跳转到页面的不同位置( HTML5 不支持 name 属性)

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!