HTML详细基础(二)文件路径

news2024/10/6 15:45:08

目录

一.相对路径

二.绝对路径

三.超链接标签 

四.锚点链接


首先,扩展一些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属性标识名称

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1044636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

D课堂 | 什么是DNS?DNS是怎么运作的?

想象一下&#xff0c;你在一个陌生的城市&#xff0c;想去一家餐厅品尝美食。你知道这家餐厅的名字&#xff0c;但却不知道它的具体位置。 这时&#xff0c;你可能会打开手机地图&#xff0c;输入餐厅的名字&#xff0c;然后地图会告诉你如何到达那里。 在互联网世界里&#xf…

向量数据库库Milvus Cloud2.3 的QA问题

1. Milvus 从 2.2.x 升级至 2.3.x 的最大变化是什么? 如果用一句话来总结,那就是使用的场景更加丰富了。具体可以从两个方面来体现,即部署环境和用户的使用感。 例如,从部署环境来看,Milvus 原来只支持 X86 架构的 CPU,版本升级后,不仅可以支持 GPU,还能够支持 ARM 架构…

二叉树MFC实现

设有一颗二叉树如下&#xff1b; 这似乎是一颗经常用作示例的二叉树&#xff1b; 对树进行遍历的结果是&#xff0c; 先序为&#xff1a;3、2、2、3、8、6、5、4&#xff0c; 中序为&#xff1a;2、2、3、3、4、5、6、8&#xff0c; 后序为2、3、2、4、5、6、8、3&#xff1b…

Kubernetes 学习总结(38)—— Kubernetes 与云原生的联系

一、什么是云原生&#xff1f; 伴随着云计算的浪潮&#xff0c;云原生概念也应运而生&#xff0c;而且火得一塌糊涂&#xff0c;大家经常说云原生&#xff0c;却很少有人告诉你到底什么是云原生&#xff0c;云原生可以理解为“云”“原生”&#xff0c;Cloud 可以理解为应用程…

深入浅出DAX:数据分析

深入浅出DAX&#xff1a;数据分析 01、区间分析 1. 数据区间分析 在Power BI中&#xff0c;选择“主页”→“输入数据”&#xff0c;创建“区间辅助表”&#xff0c;如图1所示。 ■ 图1 区间辅助表 创建度量值M.区间次数&#xff0c;表达式如下&#xff1a; M.区间次数 VA…

POJ 2991 Crane 线段树

一、题目大意 我们有一台起重机的机械臂&#xff0c;它由多个节相连组成&#xff0c;如下所示。 起初的时候&#xff0c;所有的节之间的角度都是180度&#xff0c;是竖直的&#xff0c;我们可以扭转其中任意两个节的角度&#xff0c;每一次移动后题目需要输出题目最后一个点相…

干货 | 工商业用户负荷分析与预测系统项目

以下内容整理自2023年夏季学期大数据能力提升项目《大数据实践课》同学们所做的期末答辩汇报。 我们将从六个方面进行展示。 第一部分是项目背景与需求分析。在“双碳”目标的大背景下&#xff0c;能源电力行业面临着深刻的变革&#xff0c;负荷预测作用也更加突出。虚拟电厂由…

蓝牙无线IP网络多功能多媒体音柱带遥控

SV-29810T-蓝牙无线IP网络多功能多媒体音柱带遥控 蓝牙无线IP网络多功能多媒体音柱SV-29810T产品用途&#xff1a; ◆室外室内豪华型防水音柱式一体化网络音频解码扬声器&#xff0c;用于广播分区音频解码、声音还原作用◆应用场地如火车站、地铁、教堂、工厂、仓库、公园停车…

lv5 嵌入式开发-7 有名管道和无名管道

目录 1 进程间通信介绍 2 无名管道 2.1 无名管道特点 ​编辑 2.2 读无名管道 2.3 写无名管道 3 有名管道 3.1 有名管道特点 3.2 写有名管道 3.3 读有名管道 掌握&#xff1a;进程间通信方式介绍、无名管道特点、无名管道创建、无名管道读写特性&#xff1b;有名管道…

【面试题】——JavaIO篇(23题)

文章目录 1.什么是Java IO&#xff1f;2.如何从数据传输方式理解IO流&#xff1f;3.Java IO设计上使用了什么设计模式&#xff1f;4.什么是Java NIO&#xff1f;5.什么时BIO?6.什么是AIO?7.你怎么理解同步IO和异步IO?8.你怎么理解阻塞IO和非阻塞IO?9.IO中的输入流和输出流有…

Python项目实战:多线程并行计算 + 多进程并行计算

文章目录 一、简介&#xff1a;【进程 多进程】 【线程 多线程】1.1、系统支持的CPU核心处理器1.2、核心处理器的参数解析&#xff1a;12th Gen Intel( R ) Core( TM ) i7-12700 2.10 GHz 二、函数详解2.0、计算CPU核心数&#xff1a;os.cpu_count() mp.cpu_count()2.1、用…

MongoDB 解析:灵活文档数据库与 Docker Compose 部署

MongoDB 是一款开源、高性能的 NoSQL 数据库&#xff0c;以其无模式的文档存储格式&#xff08;BSON&#xff09;而著称&#xff0c;广泛应用于众多开源项目&#xff0c;包括但不限于 Yapi 等。它在大规模数据存储和实时数据处理方面表现出色&#xff0c;因此备受青睐。在本文中…

C++学习——优先级队列模拟实现与仿函数初步认识

目录 ​编辑 一&#xff0c;优先级队列 二&#xff0c;实现 1.构造priority_queue类 2.简单的top()与size()还有empty()函数 3.push函数 4.pop函数 5.构造函数 6.测试 三&#xff0c;仿函数 1.介绍 2.使用 一&#xff0c;优先级队列 优先级队列——priority_queue。这…

【C++】gnustl_static 与 c++_shared 的区别

参考&#xff1a;GNU与cSTL的区别与联系-爱代码爱编程​ gnustl_static 与 c_shared 的区别&#xff1a; 不同版本的 STL TSL是一个与STL兼容的多线程支持库。 STLport是一个可移植、高度兼容的STL实现。 SGI STL是最早的STL实现之一&#xff0c;对STL的发展起到了重要的作用…

深入MySQL数据库进阶实战:性能优化、高可用性与安全性

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 MySQL是世界上最流行的开…

Windows 下 MySQL 8.1.0 安装及配置图文指南,快速搭建实验学习环境

目录 下载 MySQL安装 MySQL配置 MySQL修改密码配置环境变量 卸载 MySQL开源项目微服务商城项目前后端分离项目 下载 MySQL 访问 MySQL 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 下载 MySQL 时&#xff0c;你可以选择 ZIP 包或 MSI 安装&#xff1a; ZIP包…

赴日IT课程分享 如何尽快就职日本IT公司?

想要做赴日IT工作&#xff0c;我们先要搞清楚一个问题&#xff0c;那就是日本IT行业的缺口真的很大吗&#xff1f;答案是肯定的&#xff0c;对于有3-5年实际开发经验&#xff0c;能独立做开发&#xff0c;日语口语也好&#xff0c;不需要协助就能独立跟日本人交流的人&#xff…

DeepFace【部署 01】轻量级人脸识别和面部属性分析框架安装使用详解(网盘分享模型文件)

DeepFace安装使用 1.安装1.1 官方的三种方式1.2 使用的方式 2.使用2.1 模型文件下载2.2 Facial Recognition2.3 Face Verification2.4 Face recognition2.5 Embeddings2.6 Face recognition models2.7 Similarity2.8 Facial Attribute Analysis2.9 Face Detectors 3.总结 Githu…

知网G4期刊-基础教育论坛-如何投稿?

《基础教育论坛》知网 3版5000字符 24年上半年刊期&#xff0c;可收中小学基础教育&#xff0c;幼儿教育等教育全科文章。 《基础教育论坛》主要刊登有关教育教学理论探讨及课程改革、教学改革、考试改革研究等方面的文章&#xff0c;为广大基础教育工作者提供学术交流的…

Lua学习笔记:debug.sethook函数

前言 本篇在讲什么 使用Lua的debug.setHook函数 本篇需要什么 对Lua语法有简单认知 依赖Sublime Text工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级标题 &…