HTML a标签

news2024/11/14 13:50:48

<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.coloradmin.cn/o/909543.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【笔记】Spark3 AQE(Adaptive Query Execution)

提效 7 倍&#xff0c;Apache Spark 自适应查询优化在网易的深度实践及改进 Performance Tuning 配置Spark SQL开启Adaptive Execution特性 How To Use Spark Adaptive Query Execution (AQE) in Kyuubi 【spark系列3】spark 3.0.1 AQE(Adaptive Query Exection)分析 玩转Spark…

jmeter入门:接口压力测试全解析

一.对接口压力测试 1.配置 1.添加线程组&#xff08;参数上文有解释 这里不介绍&#xff09; 2.添加取样器 不用解释一看就知道填什么。。。 3.添加头信息&#xff08;否则请求头对不上&#xff09; 也不用解释。。。 4.配置监听器 可以尝试使用这几个监听器。 2.聚合结果…

MySQL 字符集概念、原理及如何配置 — 图文详解

目录 一、字符集概念 1、字符&#xff08;Character&#xff09; 2、字符编码 3、字符集&#xff08;Character set&#xff09; 二、字符集原理 1. ASCII字符集 2、GB2312 3、GBK 4、GB18030 5、BIG5 6、Unicode 编码 三、字符序 四、MySQL字符集 & 字符序 …

web基础+HTTP协议+httpd详细配置

目目录录 一、Web基础1.1 HTML概述1.1.1 HTML的文件结构1.1.2 HTML中的部分基本标签 1.3 MIME1.4 URI 和 URL1.4 定义1.4.2 URI 和 URL 的区别 二、静态资源和动态资源2.1 静态资源2.2 动态资源 三、HTTP协议3.1 HTTP协议简介3.2 HTTP协议版本3.2 HTTP方法3.3 HTTP请求访问的完…

李宏毅机器学习笔记:结构学习,HMM,CRF

李宏毅机器学习笔记&#xff1a;结构学习&#xff0c;HMM&#xff0c;CRF 1、隐马尔可夫模型HMM1.1Sequence2Sequence1.2 HMM1.3 Viterbi算法1.3 HMM模型的缺点 1、隐马尔可夫模型HMM 1.1Sequence2Sequence 什么是Seq2Seq问题呢&#xff1f;简单来说&#xff0c;就是输入是一…

RTSP/Onvif视频服务器EasyNVR安防视频云服务调用接口录像会被自动删除的问题解决方案

EasyNVR安防视频云服务是基于RTSP/Onvif协议接入的视频平台&#xff0c;可支持将接入的视频流进行全平台、全终端的分发&#xff0c;分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等。平台丰富灵活的视频能力&#xff0c;可应用在智慧校园、智慧工厂、智慧水利等…

Python“牵手”京东商品详情数据采集方法,京东API申请步骤说明

京东平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范。 京东API接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问京东平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现京东平台的数据开…

自动驾驶合成数据科普一:不做真实数据的“颠覆者”,做“杠杆”

前言&#xff1a; 在7月底的一篇文章中&#xff0c;九章智驾提到&#xff0c;数据闭环能力是自动驾驶下半场的“入场券”&#xff0c;这一观点在行业内引起了广泛共鸣。 在数据闭环体系中&#xff0c;仿真技术无疑是非常关键的一环。仿真的起点是数据&#xff0c;而数据又分为真…

回归预测 | MATLAB实现WOA-RBF鲸鱼优化算法优化径向基函数神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现WOA-RBF鲸鱼优化算法优化径向基函数神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现WOA-RBF鲸鱼优化算法优化径向基函数神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#…

短视频seo源码矩阵系统开源---代码php分享

前言&#xff1a;短视频seo源码 短视频seo矩阵系统源码私有化部署 短视频seo源码 短视频seo矩阵系统源码私有化怎么部署&#xff1f; 首先我们来给大家普及一下什么是短视频seo矩阵系统&#xff1f;视频矩阵分为多平台矩阵与一个平台多账号矩阵&#xff0c;加上seo排名优化&…

EasyPOI 实战总结

EasyPOI实战总结 简介 easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言(熟悉的表达式语法),完成以前复杂的写法 使用EasyPOI 环境搭建 # 1.引入相关依…

R包开发一:R与Git版本控制

目录 1.安装Git 2-配置Git&#xff08;只需配置一次&#xff09; 3-用SSH连接GitHub(只需配置一次) 4-创建Github远程仓库 5-克隆仓库到本地 目标&#xff1a;创建的R包&#xff0c;包含Git版本控制&#xff0c;并且能在远程Github仓库同步&#xff0c;相当于发布在Github。…

基于Spring Boot的游泳馆管理系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的游泳馆管理系统的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spring…

R语言机器学习方法在生态经济学领域

近年来&#xff0c;人工智能领域已经取得突破性进展&#xff0c;对经济社会各个领域都产生了重大影响&#xff0c;结合了统计学、数据科学和计算机科学的机器学习是人工智能的主流方向之一&#xff0c;目前也在飞快的融入计量经济学研究。表面上机器学习通常使用大数据&#xf…

HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 四)

Observed装饰器和ObjectLink装饰器&#xff1a;嵌套类对象属性变化 上文所述的装饰器仅能观察到第一层的变化&#xff0c;但是在实际应用开发中&#xff0c;应用会根据开发需要&#xff0c;封装自己的数据模型。对于多层嵌套的情况&#xff0c;比如二维数组&#xff0c;或者数…

pycharm远程连接docker容器

pycharm远程连接docker容器 1.根据镜像创建容器2.进入容器3.修改容器的root密码4. 容器安装openssh-server和openssh-client5.修改SSH配置文件6.重启ssh服务7. 退出测试8.配置pycharm并连接docker容器9. 选择docker环境 1.根据镜像创建容器 sudo docker run -itd --nameconn_t…

【目标检测】“复制-粘贴 copy-paste” 数据增强实现

文章目录 前言1. 效果展示代码说明3. 参考文档4. 不合适点 前言 本文来源论文《Simple Copy-Paste is a Strong Data Augmentation Method for Instance Segmentation》&#xff08;CVPR2020&#xff09;&#xff0c;对其数据增强方式进行实现。 论文地址&#xff1a;https:/…

uniapp国际化npm install vue-i18n报错

npm install vue-i18n //npmyarn add vue-i18n //yarn在vue2环境下&#xff0c;默认安装 npm install vue-i18n 的版本是 vue-i18n9.1.9&#xff0c;所以报错。 npm view vue-i18n versions --json 用以上命令查看版本&#xff1a; vue2建议5.0版本 npm install vue-i1…

认识Junit

1. 前言 2. Junit注解 2.1. 常用的注解 2.1.1. Test 表示当前方法是一个测试方法(不需要main来执行) Test void Test01() throws InterruptedException {System.out.println("测试用例1");WebDriver webDriver new ChromeDriver();webDriver.get("https:/…

【从零开始的rust web开发之路 二】axum中间件和共享状态使用

系列文章目录 第一章 axum学习使用 第二章 axum中间件使用 文章目录 系列文章目录前言一、中间件是什么二、中间件使用常用中间件使用中间件使用TraceLayer中间件实现请求日志打印自定义中间件 共享状态 前言 上篇文件讲了路由和参数相应相关的。axum还有个关键的地方是中间件…