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

目录

一.相对路径

二.绝对路径

三.超链接标签 

四.锚点链接


首先,扩展一些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.rhkb.cn/news/142491.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

奇舞周刊第507期:通过 View Transition API 在状态之间添加丰富的过渡动画

记得点击文章末尾的“ 阅读原文 ”查看哟~ 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■ 通过 View Transition API 在状态之间添加丰富的过渡动画 W3C 2023 年度全球技术大会 (TPAC2023) 于今年9月 11 - 15 日召开。W3C CSS 工作组成员 Bramus Van Damme(Google) 为本届…

SpringBoot集成easypoi实现execl导出

<!--easypoi依赖&#xff0c;excel导入导出--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.4.0</version></dependency>通过Exce注解设置标头名字和单…

Linux工具(二)

前言&#xff1a;在Linux工具&#xff08;一&#xff09;中&#xff0c;我们学习了yum软件安装工具和vim文本编辑器工具&#xff0c;那么本次我们就再来介绍两种工具&#xff0c;分别是&#xff0c;编辑器gcc/g、项目自动化构建工具-make/Makefile &#xff0c;接着我们再来写一…

React的高阶函数

1.认识高阶函数 高阶组件 本身不是一个组件&#xff0c;而是一个函数函数的参数是一个组件&#xff0c;返回值也是一个组件 高阶组件的定义 import ThemeContext from "../context/theme_context"function withTheme(OriginComponent) {return (props) > {retur…

python安全工具开发笔记(六)——Python爬虫BeautifulSoup模块的介绍

一、Python爬虫基础知识介绍 1.1 Python相关库 1、requests、re 2、BeautifulSoup 3、hackhttp 1.2 Python BeautifulSoup Python BeautifulSoup模块的使用介绍∶ 1、解析内容 from bs4 import BeautifulSoup soup BeautifulSoup(html_doc) 2、浏览数据 soup.title soup…

vue 实现数字验证码功能

需求&#xff1a;写了一个 手机发送验证码后 输入固定验证码的功能 封装成一个组件,如下: <template><div class"conts"><div class"box"><div class"code_list"><div :class"[ code_item, hideIndex 0 ? co…

mysql超级聚合with rollup

超级聚合&#xff0c;是在group by的基础上&#xff0c;再次进行聚合。 它再次聚合的列&#xff0c;是select中没有用到聚合函数的列。 文章目录 例子1解释例子2表以及数据 例子1 mysql> SELECT year, country, product, SUM(profit) AS profitFROM salesGROUP BY year, c…

Vue+ElementUI实现动态树和表格数据的分页模糊查询

目录 前言 一、动态树的实现 1.数据表 2.编写后端controller层 3.定义前端发送请求路径 4.前端左侧动态树的编写 4.1.发送请求获取数据 4.2.遍历左侧菜单 5.实现左侧菜单点击展示右边内容 5.1.定义组件 5.2.定义组件与路由的对应关系 5.3.渲染组件内容 5.4.通过动态…

PHP8中伪变量“$this->”和操作符“::”的使用-PHP8知识详解

对象不仅可以调用自己的变量和方法&#xff0c;也可以调用类中的变量和方法。PHP8通过伪变量“$this->”和操作符“::”来实现这些功能。 1.伪变量“$this->” 在通过对象名->方法调用对象的方法时&#xff0c;如果不知道对象的名称&#xff0c;而又想调用类中的方法…

zabbix实现钉钉报警

首先钉钉创建一个团队 自定义关键词 查看zabbix-server脚本存放的位置&#xff1a; [rootcontrolnode ~]# grep ^AlertScriptsPath /etc/zabbix/zabbix_server.conf AlertScriptsPath/usr/lib/zabbix/alertscripts zabbix server设置 在配置文件书写脚本目录vim /etc/za…

威胁追踪如何增强您的网络安全态势

网络威胁的复杂性、频率和影响正在加剧。2022 年&#xff0c;勒索软件攻击达到2.361 亿次&#xff0c;其中 39% 的英国企业遭受网络攻击。 这些攻击需要工具和资源来识别和纠正漏洞&#xff0c;以在云环境中维护强大的安全框架&#xff0c;从而降低数据泄露和合规违规的风险。…

ptmalloc源码分析 - realloc()函数的实现(11)

目录 一、步骤1-判断边界情况&#xff0c;realloc也可以执行malloc和free的功能 二、步骤2-原chunk如果MMAP方式分配&#xff0c;申请新内存并拷贝实现 三、步骤3-非MMAP方式分配&#xff0c;则_int_realloc进行合并/裁剪等实现 1. _int_realloc函数&#xff1a;老chunk足够…

系统化思考,从初级到高级书单推荐

用思考工具进行系统思考&#xff0c;解决复杂问题&#xff0c;成为某个领域的高手&#xff0c;下面这几本书就是补充你脑海的系统思考的工具&#xff0c;一定要保存。 《简单的逻辑学》 作者&#xff1a;麦克伦尼 一切的系统源自于逻辑&#xff0c;如果你没有逻辑分析的能力&…

jenkins容器内配置python项目运行环境(Python3.7.3)

目录 1.查看启动的容器2.进入jenkins容器内部3.使用wget&#xff1a;提示没有wget命令4.查看jenkins容器系统版本5.换成国内源&#xff08;阿里&#xff09;5.更新apt-get6.安装wget7.创建python存放目录8.下载python9.解压10.安装依赖11.运行脚本configure12.make编译make ins…

JavaWeb 学习笔记 11:JDBC

JavaWeb 学习笔记 11&#xff1a;JDBC 1.简介 JDBC 是一个 Java 为接入不同类型的数据库定义的一个数据库连接和执行 SQL 的 API。 可以用下图表示&#xff1a; 图中的具体数据库的驱动实际上就是数据库厂商提供的 JDBC 接口的实现类。 2.快速开始 用 Maven 创建一个简单的…

使用 PyTorch 的计算机视觉简介 (5/6)

一、说明 本文主要介绍CNN中在pytorch的实现&#xff0c;其中VGG16网络&#xff0c;数据集来源&#xff0c;以及训练过程&#xff0c;模型生成和存储&#xff0c;模型调入等。 二、预训练模型和迁移学习 训练 CNN 可能需要大量时间&#xff0c;并且该任务需要大量数据。但是&am…

Python+Django前后端分离

程序示例精选 PythonDjango前后端分离 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjango前后端分离》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应…

安防视频/集中云存储平台EasyCVR(V3.3)部分通道显示离线该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

c语言练习67:写一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

写一个宏&#xff0c;可以将一个整数的二进制位的奇数位和偶数位交换。 #define SwapIntBit(n) (((n) & 0x55555555) << 1 | ((n) & 0xaaaaaaaa) >> 1) 交换奇偶位&#xff0c;需要先分别拿出奇偶位。既然是宏&#xff0c;分别拿出用循环不是很现实&…

消息中间件(二)——kafka

文章目录 Apache Kafka综述什么是消息系统&#xff1f;点对点消息类型发布-订阅消息类型 什么是Kafka?优点关键术语Kafka基本原理用例 Apache Kafka综述 在大数据中&#xff0c;会使用到大量的数据。面对这些海量的数据&#xff0c;我们一是需要做到能够收集这些数据&#xf…