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.xdnf.cn/news/147889.html

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

相关文章

求各区域热门商品Top3 - HiveSQL

背景&#xff1a;这是尚硅谷SparkSQL练习题&#xff0c;本文用HiveSQL进行了实现。 数据集&#xff1a;用户点击表&#xff0c;商品表&#xff0c;城市表 题目: ① 求每个地区点击量前三的商品&#xff1b; ② 在①的基础上&#xff0c;求出每个地区点击量前三的商品后&a…

【管理运筹学】第 8 章 | 动态规划(5,设备更新问题)

系列文章 【管理运筹学】第 8 章 | 动态规划&#xff08;1&#xff0c;多阶段决策过程与动态规划基本概念&#xff09; 【管理运筹学】第 8 章 | 动态规划&#xff08;2&#xff0c;动态规划的基本思想与模型求解&#xff09; 【管理运筹学】第 8 章 | 动态规划&#xff08;3&…

MySQL进阶 —— 超详细操作演示!!!(下)

MySQL进阶 —— 超详细操作演示&#xff01;&#xff01;&#xff01;&#xff08;下&#xff09; 五、锁5.1 概述5.2 全局锁5.3 表级锁5.4 行级锁 六、InnoDB 引擎6.1 逻辑存储结构6.2 架构6.3 事务原理6.4 MVCC 七、MySQL 管理7.1 系统数据库7.2 常用工具 MySQL— 基础语法大…

基于蜉蝣优化的BP神经网络(分类应用) - 附代码

基于蜉蝣优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于蜉蝣优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.蜉蝣优化BP神经网络3.1 BP神经网络参数设置3.2 蜉蝣算法应用 4.测试结果&#xff1a;5.M…

【C++】设计模式之——建造者

建造者模式概念模拟实现建造者模式代码实现 建造者模式 首先先大体了解一下&#xff0c;建造者模式是什么意思&#xff0c;它是怎么实现的&#xff1f; 首先&#xff0c;建造者模式是一种创建型设计模式再一个它是使用多个简单的对象一步一步的搭建出一个复杂的对象它可以将一个…

基于蚁狮优化的BP神经网络(分类应用) - 附代码

基于蚁狮优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于蚁狮优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.蚁狮优化BP神经网络3.1 BP神经网络参数设置3.2 蚁狮算法应用 4.测试结果&#xff1a;5.M…

第81步 时间序列建模实战:Adaboost回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们介绍AdaBoost回归。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal Syndr…

react create-react-app 配置less

环境信息&#xff1a; create-react-app:v5 react:18.2.0 node:18.16.0 如果你不必须使用 less 建议直接使用scss。 因为less配置会遇到很多问题。 配置less过程&#xff1a; 如果你只需要 sass的话&#xff0c;就可以直接使用sass。因为默认配置了scss。 npm、yarn、cnpm、…

【算法训练-二分查找 一】二分查找、在排序数组中查找元素的第一个和最后一个位置

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是螺旋矩阵&#xff0c;使用【二维数组】这个基本的数据结构来实现 二分查找【EASY】 从最简单的二分查找入手&#xff0c;进而开始解决一系列其变体…

【C语言】【动态内存管理】malloc,free,calloc,realloc

1.malloc函数 void* malloc(size_t size)功能&#xff1a;向内存申请字节为 size大小的空间 使用时要包含头文件&#xff1a;<stdlib.h> 开辟成功&#xff1a;返回开辟好的空间初始地址的指针 开辟失败&#xff1a;返回空指针 NULL 使用举例&#xff1a; (malloc和free…

你写过的最蠢的代码是?——后端篇

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…

k8s全栈-笔记6-Prometheus+Alertmanager构建监控系统

k8s全栈-笔记6-PrometheusAlertmanager构建监控系统 实验环境: Pormetheusgrafanaalertmanager安装在k8s集群,k8s环境如下 K8S集群角色IP主机名安装的组件控制节点(master)172.20.252.181k8s-master01apiserver,controller-manager,schedule,kubelet,etcd,kube-proxy,容器运…

国庆中秋特辑(六)大学生常见30道宝藏编程面试题

以下是 30 道大学生 Java 面试常见编程面试题和答案&#xff0c;包含完整代码&#xff1a; 什么是 Java 中的 main 方法&#xff1f; 答&#xff1a;main 方法是 Java 程序的入口点。它是一个特殊的方法&#xff0c;不需要被声明。当 Java 运行时系统执行一个 Java 程序时&…

安全基础 --- MySQL数据库的《锁》解析

MySQL的ACID &#xff08;1&#xff09;ACID是衡量事务的四个特性 原子性&#xff08;Atomicity&#xff0c;或称不可分割性&#xff09;一致性&#xff08;Consistency&#xff09;隔离性&#xff08;Isolation&#xff09;持久性&#xff08;Durability&#xff09; &…

Python学习笔记之运算符的使用

Python学习笔记之运算符的使用 整型&#xff1a;二进制0b100十进制4、八进制0o100十进制64、十进制100、十六进制0x100十进制256浮点型&#xff1a;123.456&#xff0c;1.23456e2字符串型&#xff1a;‘Hello’&#xff0c;“Hello”布尔型&#xff1a;True、False复数型&…

Postgresql源码(114)视图权限授予逻辑

0 速查 被授权的对象在系统表中记录授权信息&#xff0c;例如pg_namespace中的nspacl列&#xff1a; {mingjieUC/mingjie,UC/mingjie,pusr1UC/mingjie}pusr1UC/mingjie的含义&#xff1a; mingjie是赋予者pusr1是被赋予者UC是权限&#xff0c;表示USAGE和CREATE 1 视图权限…

PHP 反序列化漏洞:身份标识

文章目录 参考环境访问修饰符访问修饰符PHP 与访问修饰符 手写身份标识身份标识定义身份标识控制字符 NUL在 PHP 中如何表示空字符&#xff1f; 通过空字符尝试构建包含非公共属性对象的序列化文本 空字符的传输控制字符的不可打印性结论另辟蹊径URL 字符编码将非 ASCII 字符文…

SpringBoot整合RocketMQ笔记

SpringBoot版本为2.3.12.Release RocketMQ对比kafka 学习链接 https://zhuanlan.zhihu.com/p/335216381 代码实战 https://www.cnblogs.com/RedOrange/p/17401238.html Centos安装rocketmq https://blog.csdn.net/chuige2013/article/details/123783612 RocketMQ详细配置与…

C++——继承

继承的概念 在C&#xff0c;继承是一种可以代码复用的重要手段&#xff0c;它允许一个类继承另一个类的属性和方法。继承可以实现类之间的层次关系&#xff0c;提供代码重用和多态性有关的功能。同时&#xff0c;C支持多重继承&#xff0c;即一个类可以继承多个基类的特性 继…

123. 买卖股票的最佳时机 III

给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉之前的股票&#xff09;。 Ans:思路&#x…