HTML链接(锚)

article/2025/10/25 0:55:58

使用<a>标记

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

这样说有点抽象,还是在几种实际应用中理解创建链接创建书签的含义吧!


实现网页之间跳转

代码示例

<a href="https://www.bilibili.com">b站主页面</a>

戳一戳下面试试~(如果不行就按ctrl然后鼠标点)
b站主页面


实现同一页面内跳转

解释说明

可以理解为我们在用wps阅读pdf时加的标签,然后我们可以直接通过标签就跳转回原来那个地方了,不用疯狂滚动页面寻找。以下这个代码就是实现这样的功能。

  • 我们需要先在要在”目的地“处命名一个name(对锚进行命名,创建了一个书签

<a name=“here”>111111111111111111111111111</a>

  • 然后再在”出发地“使用href发送请求,记得要在“目的地”名字前面加#号(创建指向该锚的链接)

<a href=“#here”>我以为你不会出现</a>

使用属性name用于创建一个命名的锚,锚的名称可以是用你喜欢的名字

代码示例

<!--文字内容来自告五人歌曲《我以为你不会出现》--><html>
<title>演示</title>
<body>
<pre>
我以为你不会出现 在这虚伪的世界我以为你不会出现 在时间静止的昨天<a name="here">111111111111111111111111111</a> 清晨午夜有了区别 不再是黑夜到白天「太过美丽,以为一切是幻觉」海市蜃楼颠倒知觉 一并颠覆我的意念请带走我 飞过无人的沙漠别在我的心中 反复驻足又走请带着我 离开没有你的绿洲不要让我独自 安稳地生活我想要你在明天 睁开眼就在身边清晨午夜有了区别 不再是黑夜到白天「太过美丽,以为一切是幻觉」海市蜃楼颠倒知觉 一并颠覆我的意念请带走我 飞过无人的沙漠别在我的心中 反复驻足又走请带着我 离开没有你的绿洲不要让我独自 安稳地生活请告诉我 在你眼神里的线索我想我也能够 把未知当承诺你的执着 是我跳动的脉搏在我不断催促 脚步的时候<a href="#here">我以为你不会出现</a></pre>
</body>
</html>

用浏览器打开:
“出发地”

点击后到文档:
"目的地"

实际应用

百度词条文件最开头的章节导航。
事实上,命名锚经常用于大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。


实现不同页面之间跳转

解释说明

道理和同页面内跳转一样

代码示例

<!--这是页面1的代码-->
<html>
<title>演示</title>
<body>
<a href="./new.html#tips">想从演示1跳到演示2</a>
<!--我这里使用了相对地址跳转到演示2这个html-->
</body>
</html>

<!--这是页面2的代码-->
<html>
<title>演示2</title>
<body>
<p>这里是演示2</p>
<a name="tips">已跳转到演示2</a>
</body>
</html>

用浏览器打开演示1:
演示1

点击后:
点击演示1后

在新页面中打开

如果想要在新页面中打开,要使用target属性,将target属性设置为"_blank"

<a href="http://www.bilibili.com/" target="_blank">打开b站</a>


使用一个图像做链接

解释说明

比如说想用一个图像作为按钮,按了之后跳转到一个新链接

代码示例

<html><body><p><a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
<!--href后面跟着的是要跳转到的页面,第二个尖括号里面是图像链接按钮--></a>
</p></body>
</html>

此代码借鉴:
图片做链接示例

展示结果请点击网址查看




写在最后

  1. href不要打成herf,太痛了
  2. 现在大学生们往往都被绩点浪潮卷着走,分分必争
    同时又听着“要根据自己方向学,别只跟着学校”的劝诫,争夺分数的时候又哪有那么多时间呢?
    经过大一一年的迷茫,我一拍大腿一咬牙,试一下吧!
    学自己好奇的知识,并且学前端这样一个学校不考察的方面。
    初中高中甚至大一都是乖巧的好学生,人生不长,想做做自己没体验过的!
    所以每天都会打卡发帖子,主要是记录性的,同时也能作为一个查找资料帮助大家。
    欢迎关注我,一起打卡,一起走一条自定义的内卷破局之路!
    (这已经是day2啦!)

http://chatgpt.dhexx.cn/article/Ngxw2Osq.shtml

相关文章

HTML超链接、锚链接

超链接和锚链接的区别&#xff0c;就是超链接需要跳砖页面&#xff1b;锚链接不需要&#xff0c;在同一页面中跳转到某个位置。 不管是超链接&#xff0c;还是锚链接&#xff0c;都是用a元素。 超链接&#xff1a;超链接的使用就是在href中加入网址&#xff0c;如果是图片超链…

超链接 锚链接 功能性链接 块元素 行内元素

目录 超链接标签 页面间的锚链接 不同页面中的锚链接 功能性链接 行内元素和块元素 超链接标签 超链接的基本应用: 超链接包含两部分内容:1.是链接地址,可以是某个网址或文件的路径,对应为<a>标签的href属性 2. 是链接文本或图像,单击该文本或图像,将跳转到href属…

HDFS原理简图汇总

HDFS原理简图汇总 1.HDFS结构简图 2.namenode和datanode心跳机制 3.namenode元数据更新的checkpoint机制 4.hdfs写数据机制 5.hdfs读数据机制 一图胜千言&#xff0c;把文字转为图形确实可以更进一步对知识做提炼&#xff0c;如有错漏&#xff0c;欢迎大家留言指正。

Hadoop HDFS原理笔记

1&#xff1a;Hadoop家族 2&#xff1a;Hadoop的两大核心 3&#xff1a;HDFS介绍 4&#xff1a;HDFS结构 5&#xff1a;HDFS架构图 6&#xff1a;HDFS的数据存储单元&#xff08;Block&#xff09; 7&#xff1a;HDFS设计思想 8&#xff1a;NameNode&#xff08;NN&#xff0…

HDFS高级-架构原理

文章目录 1 HDFS架构剖析1.1 集群角色介绍1.2 HDFS重要特性 2 HDFS Web Interfaces2.1 模块功能解读OverviewdatanodesDatanode Volume FailuresSnapshotSatartup progressUtilitiesBrowse the file systemLogs、Log LevelConfigruation 3 HDFS读写流程3.1 HDFS写数据流程&…

(转载)深入分析HDFS原理及读写流程

一、架构体系 1.1、什么是HDFS&#xff1f; HDFS即Hadoop Distributed File System的简称&#xff0c;采用Master/Slave主从结构模型来管理数据。在设计上采用了分而治之的思想&#xff0c;将单服务器无法承受的大量的数据分布在多台服务器上。HDFS主要由Client、NameNode、Dat…

Hadoop分布式文件系统HDFS原理以及操作(一)

HDFS简介&#xff1a;活动在集群上并支持以流式数据访问模式来存取超大文件。存储设计是把海量数据部 署在价格低廉的节点上&#xff0c;具有高容错性和高吞吐量特性。HDFS的设计首要是针对超大文件存储&#xff0c;而对于小的文件访问和存储速度反而会降低。 HDFS体系结构&am…

【hadoop】HDFS原理 和 重要特性

文章目录 一、NameNode 概述二、DataNode 概述三、HDFS的工作机制三、HDFS 写数据流程四、HDFS 读数据流程五、HDFS重要特性1&#xff0e; master/slave 架构2&#xff0e; 分块存储3&#xff0e; 名字空间&#xff08;NameSpace &#xff09;4&#xff0e; Namenode 元数据管理…

HDFS原理解析

HDFS原理解析 一、HDFS简介 HDFS为了做到可靠性&#xff08;reliability&#xff09;创建了多分数据块&#xff08;data blocks&#xff09;的复制&#xff08;replicas&#xff09;&#xff0c;并将它们放置在服务器群的计算节点中&#xff08;computer nodes&#xff09;&…

HDFS原理与应用

1 HDFS基本介绍 一些基本概念&#xff1a; 在Hadoop中&#xff0c;HDFS是存储层&#xff0c;YARN是调度层&#xff0c;MapReduce是应用层 HDFS是Hadoop分布式文件系统&#xff08;Hadoop Distributed File System&#xff09; 分布式文件系统有大容量、高可靠和低成本的特点…

大数据_HDFS原理

目录 一、什么是HDFS 二、HDFS架构角色 三、HDFS工作流程 四、HDFS的优缺点 一、什么是HDFS 1、定义 HDFS即Hadoop分布式文件系统&#xff08;Hadoop Distributed Filesystem&#xff09;&#xff0c;以流式数据访问模式来存储超大文件&#xff0c;它和现有的分布式文件系…

Hadoop HDFS原理

一、HDFS介绍 HDFS 包括 块、NameNode、DataNode&#xff0c;适用于一次写多次读&#xff0c;不支持并发写。具有通透性、容错性。 HDFS中文件被分成块进行存储&#xff0c;其块默认大小为64M&#xff0c;块是文件存储处理的逻辑单元。用户通过网络访问文件。 NameNode 为管理节…

HDFS原理(超详解)

简介 HDFS&#xff08;Hadoop Distributed File System &#xff09;Hadoop 分布式文件系统。是根据 google 发 表的论文翻版的。论文为 GFS&#xff08;Google File System&#xff09;Google 文件系统。 HDFS 有很多特点&#xff1a; ① 保存多个副本&#xff0c;且提供容…

hdfs原理详解

hdfs概述 namenode 管理了整个文件系统的元数据 &#xff08;metadata&#xff09; 管理众多datanode 对外提供服务的唯一入口 rpc端口&#xff1a;9000 使用文件系统的端口 hdfs://node-1:9000 http端口&#xff1a;50070 hdfs webui页面的端口 查看端口 http://node-1:50070d…

深入分析HDFS原理及读写流程

本文目录 一、架构体系1.1、什么是HDFS&#xff1f;1.2、组成HDFS的各模块作用1.2.1、Client1.2.2、NameNode1.2.3、DataNode1.2.4、SecondaryNameNode 二、数据读写2.1、读数据2.2、写数据 三、优缺点 一、架构体系 1.1、什么是HDFS&#xff1f; HDFS即Hadoop Distributed F…

HDFS原理与实操

文章目录 1 概述1.1 HDFS的优缺点1.2 HDFS组成架构 2 HDFS 读写流程2.1 写数据流程2.2 读数据流程 3 NameNode和SecondaryNameNode原理4 DataNode原理5 HDFS生产调优5.1 HDFS核心参数配置5.2 HDFS集群压测5.3 HDFS白名单与黑名单5.4 HDFS集群扩容及缩容5.5 HDFS存储优化5.6 HDF…

HDFS 原理 详解

前言 一、HDFS的设计原理 二、什么是零拷贝 三、什么是DMA 四、HDFS 架构剖析 HDFS 架构整体概述 HDFS 架构图 五、HDFS 集群角色介绍 1.主角色: namenode 2 从角色:datanode 3 主角色辅助角色: secondarynamenode 六、HDFS重要特性--主从架构 七、HDFS重要特性--分块…

HDFS工作原理

一、HDFS 组成架构 1&#xff09;NameNode&#xff08;nn&#xff09;&#xff1a;就是Master&#xff0c;它是一个主管、管理者。 &#xff08;1&#xff09;管理HDFS的名称空间 &#xff08;2&#xff09;配置副本策略 &#xff08;3&#xff09;管理数据块&#xff08;Bl…

hdfs原理

简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统。是根据google发表的论文翻版的。论文为GFS(Google File System)Google 文件系统。 HDFS有很多特点: ① 保存多个副本,且提供容错机制,副本丢失或宕机自动恢复。默认存3份。 (用空间换安全) ② 运行…

Hadoop原理之——HDFS原理

Hadoop 3个核心组件&#xff1a; 分布式文件系统&#xff1a;Hdfs——实现将文件分布式存储在很多的服务器上&#xff08;hdfs是一个基于Linux本地文件系统上的文件系统&#xff09; 分布式运算编程框架&#xff1a;Mapreduce——实现在很多机器上分布式并行运算 分布式资源调度…