HTML a标签

<a>标签定义一个超链接。它有如下主要属性:

  • href:指定链接的地址,可以是一个URL文件路径锚点
  • target:指定链接在何处打开。其值包括:
    • _blank:在新窗口或新标签页打开链接。
    • _self:在当前窗口或标签页打开链接。
    • _parent:在parent frame打开链接。
    • _top:在top frame打开链接。
    • frame的名称。

我设计了一个Demo实验:

demo.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a 标签 Demo</title>
</head><body><a href="iframe_a.html" target="_blank">在新窗口打开a</a><br><a href="iframe_a.html" target="_self">在当前窗口打开a</a><br><a href="iframe_b.html" target="iframe_a">在a中显示b</a><br><iframe src="iframe_a.html" name="iframe_a" width="100%"></iframe>
</body></html>

iframe_a.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe_a</title>
</head>
<body>a<br><iframe src="iframe_b.html" name="iframe_b" width="100%" height="150"></iframe>
</body>
</html>

iframe_b

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe_b</title>
</head><body>b<br><a href="iframe_a.html" target="_parent">在父框架打开a</a><br><a href="iframe_a.html" target="_top">在顶层框架打开a</a><br><a href="iframe_b.html" target="_parent">在父框架打开b</a><br><a href="iframe_b.html" target="_top">在顶层框架打开b</a><br><a href="demo.html" target="_top">在顶层框架打开demo</a><br>
</body></html>

在这里插入图片描述

此外,对于a标签,通常使用如下类似格式的CSS样式:

/* 未访问 */
a:link{color:red
}
/* 已访问 */
a:visited{color:green
}
/* 指针悬浮 */
a:hover{color:hotpink
}
/* 点击 */
a:active{color:blue
}

a:hover必须在a:linka:visited后面,a:active必须在a:hover后面。

对此,我们再设计一个小实验,页面中放两个相同链接:

<a href="#">链接</a>
<a href="#">链接</a>

href="#"意味着点击链接会滚动到页面顶部。

在这里插入图片描述

发生了什么:相同href的a标签,访问其中之一,另一个的状态也会随之变为已访问。

这是为什么:实际上,浏览器判断href属性指向的链接是否被访问,是根据浏览器的历史记录是否有链接对应页面的记录来判断的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/100265.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go语言基础之切片

切片 切片&#xff08;Slice&#xff09;是一个拥有相同类型元素的可变长度的序列。它是基于数组类型做的一层封装。它非常灵活&#xff0c;支持自动扩容。 切片是一个引用类型&#xff0c;它的内部结构包含地址、长度和容量。切片一般用于快速地操作一块数据集合 切片的定义…

事物有哪些特性 ?MySQL 如何保证事物的四大特性 ?

目录 1.事物有哪些特性 2. MySQL 如何保证事物的四大特性 3. 事物的隔离级别 1.事物有哪些特性 1.1 何为事物 &#xff1f; 事物就是把一件事情的多个步骤&#xff0c;多个操作&#xff0c;打包成一个步骤&#xff0c;一个操作。其中任意一个步骤执行失败&#xff0c;都会进…

模拟Stevens Lewis描述的小型飞机纵向动力学的非线性动态反演控制器研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

毫米波雷达成像论文阅读笔记: IEEE TPAMI 2023 | CoIR: Compressive Implicit Radar

原始笔记链接&#xff1a;https://mp.weixin.qq.com/s?__bizMzg4MjgxMjgyMg&mid2247486680&idx1&snedf41d4f95395d7294bc958ea68d3a68&chksmcf51be21f826373790bc6d79bcea6eb2cb3d09bb1860bba0af0fd5e60c448ca006976503e460#rd ↑ \uparrow ↑点击上述链接即…

NER(命名实体识别)的介绍与使用--附源码

概述 本文将向您简要介绍命名实体识别,这是一种用于识别文本文档中存在的实体的流行方法。本文针对 NLP 领域的初学者。在本文末尾,已经实现了预训练的 NER 模型来展示实际用例。 为什么是NER? 图1 通过观察上

cad图怎么转换成pdf格式?一招教你轻松转换

将CAD文件转换成PDF格式有很多优势。首先&#xff0c;PDF格式是一种非常流行的文件格式&#xff0c;几乎所有电脑上都可以打开。这意味着即使将PDF文件发送给其他人&#xff0c;他们也可以轻松地查看文件&#xff0c;此外&#xff0c;PDF格式可以保留CAD文件的图形和布局&#…

java请求SAP系统,发起soap的xml报文,实体类转换,idea自动生成教程

1、将接口的网页地址&#xff0c;右键保存&#xff0c;然后修改文件后缀为wsdl文件 2、idea全局搜索 wsdl&#xff0c;找到自动转换javabean插件&#xff1a; 3、点击后&#xff0c;选择下载改完后缀的文件(选择)&#xff1a; 4、将无用的class文件删除掉 5、请求sap的地址为…

CSS伪类:where和:is

CSS伪类:where和:is 1 :where1.1 概述1.2 组合与叠加1.3 优先级1.4 安全性1.5 兼容性 2 :is兼容性 1 :where 1.1 概述 :where()接受选择器列表作为它的参数&#xff0c;将会选择所有能被该选择器列表中任何一条规则选中的元素。 例如&#xff0c;在以下代码中&#xff0c;a标…

Java版 招投标系统简介 招投标系统源码 java招投标系统 招投标系统功能设计tbms

​ 项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以…

英文翻译照片怎么做?掌握这个方法轻松翻译

在现代社会中&#xff0c;英文已经成为了一种全球性的语言&#xff0c;因此&#xff0c;我们在阅读文章或者查看图片时&#xff0c;经常会遇到英文的内容。为了更好地理解这些英文内容&#xff0c;我们需要将其翻译成中文。在本文中&#xff0c;我将探讨图片中英文内容翻译的方…

SpringMVC 反射型跨站点脚本攻击

解决方案&#xff1a; 服务端校验&#xff0c;添加拦截器 配置web,xml <filter><filter-name>xssFilter </filter-name><filter-class>com.fh.filter.XssFilter </filter-class></filter> XssFilter package com.fh.filter;import com…

Spring Boot

前言 什么是Spring Boot&#xff1f;为什么要学Spring Boot&#xff1f; Spring 的诞⽣是为了简化Java 程序的开发的&#xff0c;⽽Spring Boot 的诞⽣是为了简化Spring 程序开发 的。Spring就像汽车&#xff0c;相比以前人只能其自行车走路&#xff0c;汽车可以帮助人们更快…

C#__使用Type类反射数据的基本用法

// 简单介绍 // 元数据&#xff08;metadata&#xff09;&#xff1a;与程序及其类型有关的数据。 // 反射&#xff1a;一个运行的程序查看本身元数据或其他程序集中的元数据的行为 // Assembly类&#xff1a;允许访问给定程序集的元数据&#xff0c;包含了可以加载和执行程序…

数字化客户运营过程中,保险企业如何释放客户旅程编排的价值?

近两年&#xff0c;受获客成本高企、转化率却没有相应提升等因素的影响&#xff0c;越来越多的企业开始重点关注存量客户经营&#xff0c;希望尽快寻找更高效的存量线索价值挖掘路径。 在此背景下&#xff0c;某保险企业与神策数据展开深度合作&#xff0c;结合存量客户转化过程…

C语言刷题训练DAY.9

1.菱形图案 解题思路&#xff1a; 这里我们先打印上面的三角&#xff0c;再打印下面的三角。 解题代码&#xff1a; #include<stdio.h> int main() {int n 0;while ((scanf("%d", &n)) ! EOF){int i 0;for (i 0; i < n; i){//先打印上面的三角int …

Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO

前言 Livox mid360需要使用Livox-SDK2&#xff0c;而非Livox-SDK&#xff0c;以及对应的livox_ros_driver2 。并需要修改FAST_LIO中部分代码。 1. 安装Livox-SDK2 参考官方教程。 1.1. 安装CMake sudo apt install cmake1.2. 安装编译Livox-SDK2 git clone https://github…

1. HBase中文学习手册之揭开Hbase的神秘面纱

揭开Hbase的神秘面纱 1.1 欢迎使用 Apache Hbase1.1.1 什么是 Hbase?1.1.2 Hbase的前世今生1.1.3 HBase的技术选型&#xff1f;1.1.3.1 不适合使用 HBase的场景1.1.3.2 适合使用 HBase的场景 1.1.4 HBase的特点1.1.4.1 HBase的优点1.1.4.2 HBase的缺点 1.1.5 HBase设计架构 1.…

苹果电脑怎么录屏?步骤详解,看到就是赚到

苹果电脑作为一款受欢迎的高性能设备&#xff0c;不仅在日常工作中发挥着重要作用&#xff0c;还可以用于创造内容&#xff0c;如录制屏幕内容。录屏功能能够帮助用户将屏幕上的活动记录成视频&#xff0c;方便分享、演示或存档。可是您知道苹果电脑怎么录屏吗&#xff1f;通过…

Redis分布式缓存

分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#x…

HTTP连接管理

基础知识&#xff1a;非持久连接 HTTP初始时1.0版本在浏览器每一次向服务器请求完资源都会立即断开TCP连接&#xff0c;如果想要请求多个资源&#xff0c;就必须建立多个连接&#xff0c;这就导致了服务端和客户端维护连接的开销。 例如&#xff1a;一个网页中包含文字资源也包…