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

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

news 2026/2/8 4:56:58

目录

一.相对路径

二.绝对路径

三.超链接标签 

四.锚点链接

首先，扩展一些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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/5 3:48:44

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/11/19 18:06:51

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/2/7 17:44:12

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15