当前位置： 首页 > news >正文

HTML详细基础（二）文件路径

news 2026/1/30 9:07:27

目录

一.相对路径

二.绝对路径

三.超链接标签 

四.锚点链接

首先，扩展一些HTML执行的原理：

htmL(hypertext markup Language) 是一种规范（或者说是一种标准），它通过标记符（tag）来标记要显示的网页的各个部分。

通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。

浏览器按顺序阅读网页文件（htmL文件），然后根据内容周围的htmL标记符解释和显示各种内容，这个过程叫做语法分析。

htmL中的超文本功能，也就是超链接功能，使网页之间可以链接起来。

网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的www

 

一.相对路径

如下是3种不同等级的语法：

同级目录：src="同级目录.png"

上级目录：src="下级目录/下级目录.jpg"

下级目录：src="../上级目录.jpg"

文件中，不同级别文件目录的存放方式如下：

 整体的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div> <img src="同级目录.png" width="400" title="这是同级目录"/></div><!-- 同级目录直接使用图片名及文件类型 --><div> <img src="下级目录/下级目录.jpg" width="300" title="这是下级目录"/></div><!-- 下级目录使用"/"来依次跳级 --><div> <img width="500" title="这是上级目录"/></div><!-- 上级目录使用"../进行依次跳级" -->
</body>
</html>

效果图：

二.绝对路径

 绝对路径是指，文件本质上存在的位置——而并不是相对于某一物品而言的。

<body><img src="E:\照片\太理美景\111.jpg" width="400"/><!-- 斜杠位置与相对路径相反，一定要注意 --><!-- 绝对路径直接复制文件在当前pc端的位置即可 --><!-- 实际开发中一般不会用绝对路径，平时方便练习偶尔用用。 --><img src="https://img0.baidu.com/it/u=2024927183,22484188&fm=26&fmt=auto&gp=0.jpg"/><!-- 也可以直接复制图片在网络上的地址，也作为绝对路径的一种。 --></body>
  • 斜杠位置与相对路径相反，一定要注意
  • 绝对路径直接复制文件在当前pc端的位置即可
  • 实际开发中一般不会用绝对路径，因为耦合度过高，不易于项目的维护~

三.超链接标签 

超链接又被称为超文本，超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式。

非常重要的标签，在日常接触的各种网页或web应用程序中，每一个跳转界面的功能都由该标签实现~
 

<a href="">跳转</a>

href属性规定了a标签所跳转到的路径。

外部链接：

<a href="http://www.qq.com" target="_blank">腾讯</a>

内部链接：（也可以跳转到项目内部的网页）

<a href="E:\HTML 文件\案例1-9号（目录文件夹练习）\7号 文本格式化.html">第一个页面</a>

空链接——实际开发中的暂略方式

<a href="#">空连接</a>

 下载链接——点击后下载目标文件

<a href="12号辅助.zip">下载连接</a>

 元素链接

<a href="12号第二辅助.jpg">元素链接</a>

四.锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点.，便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法。

通俗地说，锚点链接是网页开发中增强用户体验的一种技术，可以跳转到页面中的指定位置：

跳转的目的地：

<h1 id="ddd">目的地<br /></h1> <!-- id值为ddd，点击相关链接即可跳转 -->

实现跳转的目标（按钮 ）

   <h4><a href="#ddd">返回顶部</h4></a><!-- 注意不能缺少#号 -->

 格式一定要保证对，实现跳转的元素使用href属性，id名前加#号；而目的地需要用id属性标识名称

在百度百科等诸多博客类型的网站里面，锚点链接的应用尤为频繁~如下图：

 

相关文章：

HTML详细基础（二）文件路径

目录 一.相对路径 二.绝对路径 三.超链接标签 四.锚点链接 首先&#xff0c;扩展一些HTML执行的原理&#xff1a; htmL(hypertext markup Language) 是一种规范&#xff08;或者说是一种标准&#xff09;&#xff0c;它通过标记符&#xff08;tag&#xff09;来标记要显示…...

编程日记 2023/10/4 3:44:30

大数据-玩转数据-Flink 海量数据实时去重

一、海量数据实时去重说明 借助redis的Set&#xff0c;需要频繁连接Redis&#xff0c;如果数据量过大, 对redis的内存也是一种压力&#xff1b;使用Flink的MapState&#xff0c;如果数据量过大, 状态后端最好选择 RocksDBStateBackend&#xff1b; 使用布隆过滤器&#xff0c;…...

编程日记 2023/10/4 3:39:26

1.在vsCode上创建Hello,World

(1).编译器的安装配置 使用vsCode进行编写c语言,首先需要安装gcc编译器,可以自己去寻找资料或者gcc官网进行下载. 下载好后,将文件夹放入到自己指定的目录后,配置系统环境变量,将path指向编译器的bin目录 进入bin目录打开cmd,输入gcc -v,然后就会成功输出信息. (2).vsCode配…...

编程日记 2023/10/4 3:37:24

XrayGLM - 医学大模型

文章目录 关于 XrayGLM研究背景VisualGLM-6B 关于 XrayGLM XrayGLM: 首个会看胸部X光片的中文多模态医学大模型 | The first Chinese Medical Multimodal Model that Chest Radiographs Summarization. 基于VisualGLM-6B 微调 github : https://github.com/WangRongsheng/Xra…...

编程日记 2023/10/4 3:36:22

Hive 常见数据倾斜场景及解决方案(Map\Join\Reduce端)

目录 MapReduce流程简述a) Map倾斜b) Join倾斜c) Reduce倾斜 首先回顾一下MapReduce的流程 MapReduce流程简述 输入分片&#xff1a; MapReduce 作业开始时&#xff0c;输入数据被分割成多个分片&#xff0c;每个分片大小一般在 16MB 到 128MB 之间。这些分片会被分配给不同的…...

编程日记 2023/10/4 3:34:20

C++中的四种强制类型转换符详解

前 言 C 既支持 C 风格的类型转换&#xff0c;又有自己风格的类型转换。C 风格的转换格式很简单&#xff0c;但是有不少缺点&#xff1a; 转换太过随意&#xff0c;可以在任意类型之间转换。你可以把一个指向 const 对象的指针转换成指向非 const 对象的指针&#xff0c;把一…...

编程日记 2023/10/4 3:32:17

Windows电脑多开器的优缺点对比

Windows电脑多开器是一种能够让用户同时运行多个应用程序、游戏或者网页的软件工具。它的作用在于让用户能够更加高效地工作、学习或者娱乐。但是&#xff0c;这种软件也存在一些优劣势的对比。 优点&#xff1a; 提升工作效率。多开器可以让用户同时打开多个应用程序或者网页…...

编程日记 2023/10/4 3:29:14

Java笔记六（面向对象：类与对象）

面向对象编程的本质&#xff1a;以类的方式组织代码&#xff0c;以对象的组织&#xff08;封装&#xff09;数据 抽象 三大特征&#xff1a;封装 继承 多态 从认识角度考虑是先有对象后有类。对象&#xff0c;是具体的事物。类&#xff0c;是抽象的&#xff0c;是对对象的抽…...

编程日记 2023/10/4 3:27:11

Git使用【中】

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析3 目录 &#x1f449;&#x1f3fb;分支管理分支概念git branch&#xff08;查看/删除分…...

编程日记 2023/10/4 3:26:10

Greenplum7一键安装

2023年9月底&#xff0c;Greenplum 发布了7.0.0版本&#xff0c;并于2023年10月03日开放了安装部署说明文档&#xff0c;现在快速尝鲜版的docker一键部署方式如下&#xff1a; mkdir /data/gpdb docker run -d --name greenplum -p 15432:5432 -v /data/gpdb:/data inrgihc/g…...

编程日记 2023/10/4 3:15:58

Springboo整合Sentinel

Springboo整合Sentinel 1.启动Sentinel java -jar sentinel-dashboard-1.8.6.jar2.访问localhost:8080到Sentinel管理界面(默认账号和密码都是sentinel) 3.引入依赖(注意版本对应) <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spr…...

编程日记 2023/10/4 3:14:57

python爬取csdn个人首页中的所有封面

#爬取csdn个人首页中的所有封面 import requests import json import reurlhttps://blog.csdn.net/community/home-api/v1/get-business-list? headers{User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safar…...

编程日记 2023/10/4 3:11:53

EasyHttp - 网络请求，如斯优雅

官网 项目地址&#xff1a;Github博客地址&#xff1a;网络请求&#xff0c;如斯优雅 OkHttp 另外对 OkHttp 原理感兴趣的同学推荐你看以下源码分析文章 OkHttp 精讲&#xff1a;拦截器执行原理OkHttp 精讲&#xff1a;RetryAndFollowUpInterceptorOkHttp 精讲&#xff1a;…...

编程日记 2023/10/4 3:08:51

【Java】Stream的基本使用

Stream特点 Stream的一系列操作组成了Stream的流水线, Stream流水线包含: 数据源: 这里的数据源可能是集合/数组, 可能是生成器, 甚至可能是IO通道(Files.lines)零个或多个中间操作: 中间操作会导致流之间的转化, 如filter(Predicate)一个终端操作: 终端操作会产生最终所需要的…...

编程日记 2023/10/4 3:06:49

idea Springboot 高校科研资源共享系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 高校科研资源共享系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c; 系统具有完整的源代码和数据…...

编程日记 2023/10/4 3:05:48

机器学习算法基础--K-means应用实战--图像分割

目录 1.项目内容介绍 2.项目关键代码 3.项目效果展示 1.项目内容介绍 本项目是将一张图片进行k-means分类&#xff0c;根据色彩k进行分类&#xff0c;最后比较和原图的效果。 题目还是比较简单的&#xff0c;我们只要通过k-means聚类&#xff0c;一类就是一种色彩得出聚类之…...

编程日记 2023/10/4 2:57:39

CSS学习小结

css的两种使用方式&#xff1a; ①内嵌样式表 ②导入外部样式表&#xff08;实际开发常用&#xff09;<link href"...." rel"stylesheet"/> 选择器&#xff1a; ①标签选择器&#xff1a;通过标签种类决定 ②类选择器&#xff1a;class"..…...

编程日记 2023/10/4 2:54:35

数据挖掘实验（一）数据规范化【最小-最大规范化、零-均值规范化、小数定标规范化】

一、数据规范化的原理 数据规范化处理是数据挖掘的一项基础工作。不同的属性变量往往具有不同的取值范围&#xff0c;数值间的差别可能很大&#xff0c;不进行处理可能会影响到数据分析的结果。为了消除指标之间由于取值范围带来的差异&#xff0c;需要进行标准化处理。将数据…...

编程日记 2023/10/4 2:52:33

C++17中std::filesystem::directory_entry的使用

C17引入了std::filesystem库(文件系统库, filesystem library)。这里整理下std::filesystem::directory_entry的使用。 std::filesystem::directory_entry&#xff0c;目录项&#xff0c;获取文件属性。此directory_entry类主要用法包括&#xff1a; (1).构造函数、…...

编程日记 2023/10/4 2:51:32

C/C++跨平台构建工具CMake入门

文章目录 1.概述2.环境准备2.1 安装编译工具2.2 安装CMake 3.编译一个示例程序总结 1.概述 本人一直对OpenGL的3d渲染很感兴趣&#xff0c;但是苦于自己一直是Android开发&#xff0c;没有机会接触这方面的知识。就在最近吗&#xff0c;机会来了&#xff0c;以前一个做3D渲染的…...

编程日记 2023/10/4 2:49:29

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/1/28 12:29:35

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/29 1:52:07

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2026/1/20 16:59:27

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36