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.mfbz.cn/a/84031.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【从零开始学爬虫】采集中国国际招标网招标数据

l 采集网站 【场景描述】采集中国国际招标网招标数据。 【源网站介绍】中国国际招标网致力于为企业提供招标、采购、拟在建项目信息及网上招标采购等一系列商务服务。 【使用工具】前嗅ForeSpider数据采集系统 http://www.forenose.com/view/forespider/view/download.html 【…

【广州华锐互动】3D空间编辑器:一款简洁易用的VR/3D在线编辑工具

随着虚拟现实技术的不断发展&#xff0c;数字孪生技术的应用已经被广泛应用于产品设计和制作中&#xff0c;能充分发挥企业应用3D建模的优势&#xff0c;凸显了三维设计的价值&#xff0c;在生产阶段也能够充分发挥3D模型的作用。 如今&#xff0c;广州华锐互动开发的3D空间编辑…

高速道路监控:工业路由器助力高速监控远程管理与维护

工业路由器在物联网应用中扮演着重要的角色。物联网的发展使得大量设备和传感器能够互联互通&#xff0c;而工业路由器作为连接这些设备和网络的中间桥梁&#xff0c;承担着数据传输和安全管理的重要责任。 工业路由器能够为高速监控提供网络功能&#xff0c;实现户外无线网络部…

Python自动化测试代理程序可用性

在网络爬虫和数据采集过程中&#xff0c;代理服务器扮演着重要的角色。然而&#xff0c;代理服务器的可用性经常会受到影响&#xff0c;给爬虫工作带来一定的挑战。本文将介绍如何使用Python自动化测试代理程序的可用性&#xff0c;为您提供具备实际操作价值的解决方案。让我们…

SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录(第二天)Mybatis的深入学习

SSM框架的学习与应用(Spring Spring MVC MyBatis)-Java EE企业级应用开发学习记录&#xff08;第二天&#xff09;Mybatis的深入学习&#xff08;增删改查的操作&#xff09; 上一篇我们的项目搭建好了&#xff0c;也写了简答的Junit测试类进行测试&#xff0c;可以正确映射…

【Linux】cpolar+JuiceSSH实现手机端远程连接Linux服务器

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …

商业智能BI是什么都不明白,如何实现数字化?

2021年下半年中国商业智能软件市场规模为4.8亿美元&#xff0c;2021年度市场规模达到7.8亿美元&#xff0c;同比增长34.9%&#xff0c;呈现飞速增长的趋势。数字化时代&#xff0c;商业智能BI对于企业的落地应用有着巨大价值&#xff0c;逐渐成为了现代企业信息化、数字化转型中…

贝锐蒲公英助力建设工程咨询企业,高效安全远程访问数据档案库

随着数字信息化进程的加深&#xff0c;数字化转型已成为企业实现业务流程自动化、提高工作效率、降低成本和提高用户满意度的重要手段。其中&#xff0c;档案工作的标准化、规范化是信息化建设的前提和必要条件&#xff0c;对于建设工程咨询企业而言&#xff0c;一个完善的数字…

​8th参考文献:[8]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑工业出版社,2022.

​&#xff18;th参考文献&#xff1a;&#xff3b;&#xff18;&#xff3d;许少辉&#xff0e;乡村振兴战略下传统村落文化旅游设计&#xff3b;&#xff2d;&#xff3d;北京&#xff1a;中国建筑工业出版社&#xff0c;&#xff12;&#xff10;&#xff12;&#xff12;&a…

Revit 3D高效处理:cad exchanger sdk 3.21 Crack

3D 格式概述&#xff1a;Revit Revit 已成为寻求高效、准确的建筑信息建模的专业人士的首选解决方案。在这篇引人入胜的功能概述中了解 Revit 的特性和影响。 什么是Revit&#xff1f; Autodesk Revit 是一款流行的 CAD 软件&#xff0c;重点关注 BIM&#xff0c;被建筑师、工…

3D角色展示

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>3D卡片悬停</title><style>font-face {font-family: "Exoct";src: url("htt…

机器学习,过拟合与欠拟合,正则化与交叉验证

目录 机器学习 过拟合与欠拟合 正则化与交叉验证 正则化 交叉验证 机器学习 的目的是使学到的模型不仅对已知数据而且对未知数据都能有很好的预测能力。 不同的机器学习方法会给出不同的模型。当损失函数给定时&#xff0c;基于损失函数的模型的训练误差&#xff08;tra…

vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件

文章目录 ⭐前言⭐react 组件传值实例&#x1f496;父组件传值给子组件&#xff08;props&#xff09;&#x1f496;子组件传递事件给父组件props绑定事件&#x1f496;父组件触发子组件的事件Ref ⭐vue3 组件传值实例&#x1f496; 父组件传递数据给子组件props&#x1f496; …

三维重建 PyQt Python MRP 四视图(横断面,冠状面,矢状面,3D)

本文实现了 Python MPR 的 四视图&#xff0c;横断面&#xff0c;冠状面&#xff0c;矢状面&#xff0c;3D MPR(multi-planner reformation)也称多平面重建&#xff0c;多重面重建是将扫描范围内所有的轴位图像叠加起来再对某些标线标定的重组线所指定的组织进行冠状、矢状位、…

JAMstack架构:快速构建安全、高性能的现代应用

随着Web应用的快速发展&#xff0c;开发者们在寻找更加高效、安全和可维护的应用架构。JAMstack架构应运而生&#xff0c;它通过将前端、后端和部署过程分离&#xff0c;提供了一种现代化的方式来构建Web应用。在本文中&#xff0c;我们将深入探讨JAMstack架构的特点、优势以及…

ES 索引重命名--Reindex(一)

ES reindex脚本流程&#xff0c;下图为整体流程&#xff1a; 步骤&#xff08;1&#xff09;&#xff1a;每次写入把之前的索引删除再重新创建索引&#xff0c;然后判断索引是否创建成功&#xff0c;由于创建成功返回结果是json&#xff0c;因此用Json Input插件去解析json获得…

ATF BL1/BL2 ufs_read_blocks/ufs_write_blocks使用分析

ATF BL1/BL2 ufs_read_blocks/ufs_write_blocks使用分析 1 ATF的下载链接2 ATF BL1/BL2 ufs_read_blocks/ufs_write_blocks处理流程2.1 ATF BL1/BL2 ufs_read_blocks2.2 ATF BL1/BL2 ufs_write_blocks 3 UFS System Model4 ufs_read_blocks/ufs_write_blocks详细分析4.1 ufs_re…

备份服务器搭建

备份服务器搭建 1、背景2、作用3、选型4、环境5、部署5.1、服务端部署5.1.1、安装5.1.2、配置 5.2、客户端部署5.3、备份策略5.3.1、定时备份策略5.3.2、文件变动备份 6、参考 1、背景 随着项目的推进&#xff0c;备份服务器被提上了工作日程&#xff0c;等保、密评和接入测评…

selenium Chrome驱动下载地址

Chrome驱动官方最新版下载地址:https://googlechromelabs.github.io/chrome-for-testing/ 有稳定版&#xff0c;开发版等版本可以选择下载 选择 操作系统复制下载链接直接下载

CentOS7安装部署Doris

文章目录 CentOS7安装部署Doris一、前言1.简介2.环境 二、正文1.Doris基础1&#xff09;架构图2&#xff09;通讯端口 2.部署服务器3.安装基础环境1&#xff09;安装JDK 112&#xff09;安装GCC3&#xff09;设置文件句柄数4&#xff09;关闭交换分区&#xff08;swap&#xff…
最新文章