HTML 中 a 超链接标签全解析:属性、锚点与伪类

news/2024/9/18 20:50:18/ 标签: html, 前端, javascript
htmledit_views">

目录

a超链接标签介绍

锚点介绍

页面内锚点

 页面外锚点

伪类


a超链接标签介绍


        在 HTML 中,<a>标签是一个文本级的标签,同时它还包含伪类,用于根据用户与链接的不同交互状态呈现不同的样式。与之同为文本级标签的<p>,由于其语义范围相对较大,所以可以包裹<a>标签,而<a>不能包裹<p>标签。例如:

        正确示例:

html"><p>  <a href="javascript:;">段落</a>  
</p>  

        错误示例:

html"><a href="javascript:;">  <p>段落</p>  
</a>  

        <a>标签具有多个重要属性,完整写法如:

html"><a href="#" title="悬停文本" target="_blank">链接的内容</a> 

        其属性包括:

属性

描述

href

URL

规定链接指向的页面的 URL

title

文本

当鼠标悬停在链接上时显示的文本

target

_blank(在新窗口中打开链接)

_parent(与_self等效)

_self(默认,在同一窗口中打开链接)

_top(清除所有被包含的框架,在整个浏览器窗口打开链接)

以及特定的框架名称(在指定的框架中打开链接)。

规定在何处打开链接文档

锚点介绍


        锚点分为页面内锚点和页面外锚点,为网页的导航和跳转提供了极大的便利。

页面内锚点

        通过使用name(或id)属性来设置锚点,示例代码如下:

html"><body>  <a href="#anchor">链接</a>  <div>  <p>段落</p>  <a name="anchor">链接跳转的内容</a>  <p>段落</p>  </div>  
</body>  

        分析:当用户点击页面中的第一个<a>标签时,页面会快速滚动到具有name="anchor"属性的<a>标签处,实现页面内的精准跳转。

 页面外锚点

        可以实现从一个页面跳转到另一个页面的特定位置。示例代码如下:

        比如在about.html中:

html"><a href="index.html#anchor">链接</a>  

        而在index.html中:

html"><body>  <div>  <p>段落</p>  <a name="anchor">链接跳转的内容</a>  <p>段落</p>  </div>  
</body>  

        分析:当用户在about.html页面点击该链接时,就会跳转到index.html页面中name值为anchor的<a>标签处。

伪类


        伪类是指同一个标签根据用户的某种状态不同而有不同的样式,在 CSS 中,<a>标签的伪类必须按照固定的顺序书写,即a:link、a:visited、a:hover、a:active。

        a:link:用于设置未访问过的链接的样式,通常可以设置链接的颜色、下划线等属性。

        a:visited:定义了已访问过的链接的样式。

        a:hover:在鼠标移动到链接上时生效,为用户提供视觉反馈。

        a:active:则在用户点击链接但尚未松开鼠标时起作用,可用于强调链接的交互状态。

        <a>标签中通常描述盒子的样式,而伪类中描述文字的样式和背景。需要注意的是,所有的<a>标签不继承text、font等属性,因为<a>标签自身有伪类的权重。

        示例代码如下:

html"><head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <title>a标签的伪类</title>  <style type="text/css">  /*  a标签有4种伪类,在css中,必须按照固定的顺序写 */  a:link{  color:blue;/* 未访问的链接的颜色*/  }  a:visited{  color:red;/* 已访问的链接的颜色即鼠标松开时链接的颜色*/  }  a:hover{  color:orange; /* 鼠标移动到链接上时的颜色*/  }  a:active{  color:green;/* 鼠标按下时链接的颜色*/  }  </style>  
</head>  
<body>  <a href="javascript:;">链接</a>  
</body>  

        分析:如果想要创建一个没有链接地址的<a>标签,可以使用如下写法:

html"><a href="javascript:;"></a>  
<!--或者-->  
<a href="javascript:void(0);"></a>  


http://www.ppmy.cn/news/1518101.html

相关文章

【网络】数据链路层-MAC帧

数据链路层-以太网与ARP协议 文章目录 1.数据链路层2.以太网2.1什么是以太网2.2MAC帧格式 3.ARP协议3.1为什么有ARP协议&#xff1f;3.2ARP的定位3.3ARP协议工作流程3.4ARP数据格式 4.RARP协议 1.数据链路层 数据链路层是网络协议栈中最底层的内容&#xff0c;而在之前对其他…

C++中常见的数据结构

和它联合的几篇文章 数据结构之数组-CSDN博客 数据结构之链表-CSDN博客 数据结构之栈-CSDN博客 数据结构之队列-CSDN博客 作为一名C程序员&#xff0c;你是否对常见的数据结构有所了解&#xff1f;本文将为你介绍C中常见的数据结构&#xff0c;以及如何选择合适的数据结构…

python基础操作

python基础 仅仅打印输出 hello world 是不够的,对吧?你想要做的远不止这些 —— 你想要得到一些输入,操作它并从中得到一些东西。 1. 注释 注释是 # 符号右侧的任何文本,主要用作程序读者的注释。 print(hello world) # 注意,print 是一个函数。或者: #注意,…

手机ip频繁跳动的原因是什么?手机ip地址老是变怎么解决

在当今数字化时代&#xff0c;‌手机已成为我们生活中不可或缺的一部分。‌然而&#xff0c;‌有些用户可能会遇到手机IP地址频繁变动的问题&#xff0c;‌这不仅可能影响网络连接的稳定性&#xff0c;‌还可能对特定的在线活动造成困扰。‌本文将深入探讨手机IP频繁跳动的原因…

langchain入门系列之六 使用langchain构建PDF解析助手

本文将介绍如何使用langchain构建一个pdf解析助手&#xff0c;在此文中你将学习到langchain如何与web应用(fastapi)相结合&#xff0c;向量持久化等知识&#xff0c;话不多说&#xff0c;现在开始。 安装环境 pip install fastapi pip install python-dotenv pip install uv…

智能优化特征选择|基于鹦鹉优化(2024年新出优化算法)的特征选择(分类器选用的是KNN)研究Matlab程序 【优化算法可以替换成其他优化方法】

智能优化特征选择|基于鹦鹉优化&#xff08;2024年新出优化算法&#xff09;的特征选择&#xff08;分类器选用的是KNN&#xff09;研究Matlab程序 【优化算法可以替换成其他优化方法】 文章目录 一、PO基本原理PO基本原理基本流程示例应用 二、实验结果三、核心代码四、代码获…

苹果 iOS / iPadOS 18 beta8和iOS / iPadOS 18.1 beta3版本更新

苹果今日向iPhone和iPad用户推送了 iOS / iPadOS 18 开发者预览版 Beta 8 更新&#xff08;内部版本号&#xff1a;22A5350a&#xff09;和iOS / iPadOS 18.1 开发者预览版 Beta 3 更新&#xff08;内部版本号&#xff1a;22B5034e&#xff09;&#xff0c;本次更新距离上次发布…

c语言(二叉树)

第4章 二叉树和BST 树与二叉树 基本概念 树是一种非线性结构&#xff0c;其严格的数学定义是&#xff1a;如果一组数据中除了第一个节点&#xff08;第一个节点称为根节点&#xff0c;没有直接前驱节点&#xff09;之外&#xff0c;其余任意节点有且仅有一个直接前驱&#xff…

华为OD机试(C卷,200分)- 园区参观路径

题目描述 园区某部门举办了Family Day,邀请员工及其家属参加; 将公司园区视为一个矩形,起始园区设置在左上角,终点园区设置在右下角; 家属参观园区时,只能向右和向下园区前进,求从起始园区到终点园区会有多少条不同的参观路径。 输入描述 第一行为园区的长和宽; 后…

为什么要选择JDK15.0.2

JDK16开始&#xff0c;Oracle移除了JDK中JavaSE的很多类。导致我们用IDK15以后的版本做项目&#xff0c;Maven导入的一些第三方依赖会出现找不到ava工具类的情况&#xff0c;而且更有甚者异常信息也不会提示找不到哪些类&#xff0c;直接就报运行错误。这就让我们调试程序无从下…

【软件文档】软件质量保证计划书(Word完整版)

1 概述 2 质量目标 3 项目基本情况 4 资源 4.1 人员 4.1.1 组织结构 4.1.2 职责 4.2 工具及设施 5 质量保证的主要工作 6 质量保证工作量估算 7 质量保证工作提交的产物 8 变更管理 9 评价标准 10 形成的记录 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xff0c;…

aspose.pdf实现图片转pdf

/*** 图片转pdf*/ public static void ImagesToPdf(){String folderPath "D:\\Desktop\\xuanku";File folder new File(folderPath);List<String> images new ArrayList<>();// 检查文件夹是否存在if (folder.exists() && folder.isDirectory…

【论文速读】| ARVO: 开源软件可重现漏洞的全景图

本次分享论文&#xff1a;ARVO: Atlas of Reproducible Vulnerabilities for Open Source Software 基本信息 原文作者&#xff1a;Xiang Mei, Pulkit Singh Singaria, Jordi Del Castillo, Haoran Xi, Abdelouahab (Habs) Benchikh, Tiffany Bao, Ruoyu Wang, Yan Shoshitai…

js基础速成-条件语句

条件语句 条件语句用于根据不同的条件做出决策。 默认情况下&#xff0c;JavaScript 中的语句是从上到下顺序执行的。如果处理逻辑需要&#xff0c;可以通过两种方式改变执行的顺序&#xff1a; 条件执行&#xff1a;如果某个表达式为真&#xff0c;将执行一个或多个语句的代…

一起搭WPF之列表数据绑定

一起搭WPF之列表数据绑定 1 前言2 数据绑定2.1 前端2.2 后端实现2.2.1 界面后台2.2.2 模型与逻辑 3 问题3.2 解决 总结 1 前言 之前已经简单介绍了列表的大致设计&#xff0c;在设计完列表界面后&#xff0c;我们可以开展列表的数据绑定&#xff0c;在前端显示我们的数据&…

房产报备小程序房产报备系统源码搭建方案

房产客户报备小程序开发&#xff0c;php开发语言&#xff0c;前端是uniapp。 房产报备小程序三个端&#xff1a;报备端&#xff08;经纪人报备客户&#xff09;&#xff0c;确客端&#xff08;员工确认报备的客户&#xff09;&#xff0c;管理后台 一 报备端 经纪人报备客户…

特异性心肌细胞靶向肽(PCM);WLSEAGPVVTVRALRGTGSW;CAS:771479-86-8

【特异性心肌细胞靶向肽(PCM) 简介】 特异性心肌细胞靶向肽&#xff08;PCM&#xff09;是一种设计用于识别和结合心肌细胞特有的受体或分子标记的多肽序列。PCM可以通过其氨基酸序列的特定配置和表面特性实现对心肌细胞的选择性靶向&#xff0c;从而在心脏病治疗中递送药物、作…

Linux文件编程(进阶)

文章目录 Linux文件编程内核数据结构重定向dup2函数代码示例&#xff1a;将定义为输入重定向符号&#xff0c;将-定义为输出重定向符号 fcntl函数代码示例&#xff1a;使用O_APPEND标志位保证原子操作 I/O处理方式代码示例&#xff1a;阻塞I/O模型代码示例&#xff1a;非阻塞I/…

Nosql数据库redis集群配置详解

一、Redis的安装 环境介绍&#xff1a; 一主双从&#xff1a;10&#xff08;redis-node1&#xff09;主&#xff0c;20&#xff08;redis-node2&#xff09; 30&#xff08;redis-node3&#xff09;从——使用的是红帽9.1系统 源码安装redis [rootredis-node1 ~]# tar zxf red…

Ceruletide 雨蛙素;雨蛙肽;硫酸化蓝肽 简介

目录号 M9316 Ceruletide 雨蛙素&#xff1b;雨蛙肽&#xff1b;硫酸化蓝肽 Ceruletide (Caerulein) 是从澳大利亚青蛙皮肤中分离的生物活性十肽&#xff0c;是一种缩胆囊素受体 (cholecystokinin receptor) 激动剂。此外&#xff0c;Ceruletide还可用于构建小鼠急性胰腺炎模型…