「HTML」详解什么是 HTML 中的超链接标签 a

纲

1、什么是<a>标签

2、<a>标签的几个重要属性

3、a标签的运行机制

4、a标签常用的协议

5、超链接标签的样式问题——a标签的伪类选择器的书写顺序

1、什么是<a>标签

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

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

2、<a>标签的几个重要属性

2.1、href

规定链接指向的页面的 URL。

2.2、target

规定在何处打开链接文档。

a:自定义打开锚点

target的特殊值：有 4 个保留的目标名称用作特殊的文档重定向操作：

2.3、name

规定锚的名称。（Html5不支持）

2.4、downloadHTML5新增

HTML5新增，只有 Firefox 和 Chrome 支持 download 属性。

download 属性规定被下载的超链接目标。

在 <a> 标签中必须设置 href 属性。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

2.5、media

media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。

该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。

该属性可接受多个值。

只能在 href 属性存在时使用。

3、a标签的运行机制

4、a标签常用的协议

5、超链接标签的样式问题——a标签的伪类选择器的书写顺序

5.1、a标签的多重状态

对于<a>元素，我们可以用“多重人格”来形容它。对于该标签，它一共有五种状态：:link, :visited, :hover, :focus, :active.

“:link”可以用于声明未访问状态链接的样式；

“:visited”可以用于声明已经访问链接的样式；

“:hover”可以用于声明鼠标悬停在链接上的样式；

“:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；

“:active”可以用于声明浏览器点击链接的样式。

注意：冒号前后不要出现空格

一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。

link、visited、active分别对应body元素的link、vlink、alink这三个属性。

四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。

5.2、链接（a标签状态）定义的顺序

没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。

老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序：a:link、a:visited、a:hover、a:active。若没有按照这样的顺序的话，有的状态的样式会被放置在后面的样式覆盖而导致像没有触发一样没有效果，如：如果hover放在visited之后，则就算我放上去变色了，但是同时这个标签也具有visited状态以及其的效果，会覆盖了hover的效果。

为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中，宜将最一般的条件放在最上面，并依次向下，最下面放最特殊的。

在W3C规范中，也规定了链接的声明顺序：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

家好，我是江湖哥，今天分享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>

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

TTP协议，只要上网基本都会接触到的一个网络应用层协议，今天也就继续聊聊这个HTTP协议，巩固下对他的认识。

1、概念

HTTP协议中文翻译为超文本传输协议，在概念中提到3个词，超文本、传输、协议。简单聊下其中2个词超文本和协议。

超文本：

相对于普通文本（信息描述）来说，超本文多了一个重要的功能点：关联。网络上的文档通过超文本实现联系，各自可以跳转，慢慢从独立的点扩展为一个网，如下图。

所以在百度上的解释称：超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联

在前端超文本的概念，我们可以简单理解为HTML中的a标签

协议

在计算机网络中，协议是指通信计算机双方必须共同遵从的一组约定。如怎么样建立连接、怎么样互相识别等。只有遵守这个约定，计算机之间才能相互通信交流。

协议很重要的一点就是定义了数据的封装。

2、协议特点

上面我们提到协议是一种规定，HTTP协议里就规定了怎么去获取资源和信息传输。

资源定位

资源的定位HTTP协议是根据URL（统一资源定位符（uniform resource locator;URL））来标识的，通过URL可以定位资源的网络位置

下图是URL的结构：

注意：

1、端口不说明是指80端口

2、Hash也称为锚点，可以通过锚点快速定位到文档节点（节点ID）

信息传输

HTTP传输的报文，不管是请求报文还是响应报文，格式都包含着起始行，请求头和请求体，如下

不同的是请求时，起始行是说明请求方法请求路径和协议版本

响应时，起始行是说明响应的状态编码

3、应用场景

防盗链

盗链的情况如下：

假设B站点作为一个商业网站，有很多自主版权的图片，自身展示用于商业目的。而A站点，希望在自己的网站上面也展示这些图片，直接使用图片地址这样，大量的客户端在访问A站点时，实际上消耗了B站点的流量，而A站点却从中达成商业目的。从而不劳而获。这样的A站点着实令B站点不快的

为了防止这种行为，除了可以为资源增加权限验证（可能需要经过一层代码处理），另外一个方便的方法就是判断referrer返回403，这样子当外部网站使用我们的资源时就无法访问正常资源

当然这种方法很容易通过设置不传递referrer绕过 <meta name='referrer' content='no-referrer'>，可看具体情况使用。

POST数据格式

Post提交数据主要有三种，我们最常使用的是urlencoded，当上传文件时会使用form-data

对于JSON格式的，如果传递的数据带JSON格式，前端JSON.stringify后后端难解析，可以考虑通过json的数据格式，例子如下：

跨域

跨站点请求数据时，因为浏览器的同源策略，会禁止请求，也就是我们常说的跨域。

遇到跨域的情况下，可以通过CORS方案通过设置Access-Control-Allow-Origin来允许跨域请求站点，有些特殊的报文如下：

请求报文	说明
Access-Control-Allow-Origin	可取为*表示允许任何站点或直接写站点地址如：https://www.baidu.com 注：无法同时声明2个站点
Access-Control-Allow-Credentials	默认下跨站点访问是不带cookies，如果需要带cookies，可以按如下： Access-Control-Allow-Origin不能为* 通过设置Access-Control-Allow-Credentials为 true 并在AJAX请求中打开withCredentials属性
Access-Control-Expose-Headers	如果跨域时需要附带一些特殊的请求报文头，需要通过该属性说明，如需要附带Toekn报文头时 Access-Control-Expose-Headers：Token
`Access-Control-Allow-Methods`	表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求

特别注意的是跨域的情况下有可能会有预检请求，此时在正式发送时会先发送OPTIONS请求，后端需要处理改请求，默认返回200，并返回允许跨域的报文（如上文档）即可

非下述情况就有可能发送预检请求

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

在线咨询

上一篇：如何对单元格中的数据进行强制换行
下一篇：使用JS开发简单的音乐播放器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商