HTML之基本语法(链接标签、路径的介绍和使用)
一、链接标签
语法:<a href="目标地址">这个标签上展示的内容</a>
作用:可以实现在当前页面跳转到新页面的操作
属性
1.target这个属性可以设置新页面在哪个窗口打开,当值为_blank时,可以在新窗口打开
2.a标签中默认有一个href属性,存放内容是目标网页的地址
3.href的属性值设置为#时,可以设置为空链接当用户点击时不会发生跳转,用来站位,一般用于开发阶段,因为很多页面还没有完成,用空链接进行站位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签及属性值</title>
</head>
<body>
<!-- 空链接,用#进行站位,也叫本页跳转 -->
<a href="#">百度一下,你就知道</a>
<br />
<!-- 有链接地址 -->
<a href="http://www.baidu.com">百度一下,你就知道</a>
<!-- 设置链接在新的窗口打卡 -->
<br />
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
二、路径
所谓的路径我们可以看做是在程序代码中用来查找某个具体的资源所“走”过的路,如D:\迅雷下载\HBuilderX.2.0.1.20190614\HBuilderX
1、绝对路径:一般以盘符为起点来进行查找,或者就是一个绝对的URL地址,但是在实际的工作中不建议使用绝对路径
2、相对路径:相对路径就是以一个已知的文件为起点进行查找
三、相对路径的用法
路径是一个通用的存在,以查找图片为例来讲解路径的使用方法,在实际工作中,相对路径使用的频率最高,认为的将相对路径分为三种:同级路径、下级路径、上级路径
注意:以图片为例的含义就是在HTML文件中插入一个HTML文件之外的图片,同时采用的是相对路径,所以这个相对路径的起点就是这个HTML文件
1.同级路径:同级指的就是HTML文件和目标图片在同一目录中,对于同级路径的使用方法,我们只要将图片的名称写到scr中就行
2.下级路径:下级指的就是图片在HTML文件的下级目录中,此时我们需要使用 / 来进行穿透查找(XX下的XX)
3.上级路径:目标图片在HTML文件的上一级目录中,此时使用 ../ 来进行回退查找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对路径</title>
</head>
<body>
<!-- 同级路径 -->
<img src="t014c45eaaa2508bc3e.webp.jpg"/ >
<!-- 下级路径 -->
<img src="src/t014c45eaaa2508bc3e.webp.jpg" />
<!-- 上级路径 -->
<img src="../t014c45eaaa2508bc3e.webp.jpg" />
</body>
</html>
HTML之基本语法(链接标签、路径的介绍和使用)的更多相关文章
- 认识HTML中文本、图片、链接标签和路径
前端之HTML.CSS(一) 开发工具 编辑器 Dreamware.Sublime.Visual Studio Code.WebStorm 浏览器 Chrome.IE(Edge).Safari.Fir ...
- H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
- 链接标签(a 标签)
一.链接标签 单词缩写: anchor 的缩写. 在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可. 语法格式: <a href="跳转目标" target ...
- HTML5:链接与路径
链接与路径 一.路径 绝对路径——指包含服务器协议的完全路径 相对路径——指被链接文档相对于当前文档的路径. 二.超链接<a> 1.语法: <a href=“目标”>链接文本& ...
- HTML的链接标签
网页的链接标签 文本超链接 图像超链接 格式:<a href="path" target="目标窗口位置" >链接文本或图像</a> 锚 ...
- ASP.NET Core教程【三】实体字段属性、链接标签、并发数据异常、文件上传及读取
前文索引:ASP.NET Core教程[二]从保存数据看Razor Page的特有属性与服务端验证ASP.NET Core教程[一]关于Razor Page的知识 实体字段属性 再来看看我们的实体类 ...
- 多测师讲解html _链接标签004_高级讲师肖sir
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链 ...
- Django学习——Django settings 源码、模板语法之传值、模板语法之获取值、模板语法之过滤器、模板语法之标签、自定义过滤器、标签、inclusion_tag、模板的导入、模板的继承
Django settings 源码 """ 1.django其实有两个配置文件 一个是暴露给用户可以自定义的配置文件 项目根目录下的settings.py 一个是项目默 ...
- 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例
JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...
随机推荐
- .net 扩展方法,lamada表达式 委托
扩展方法 (1)扩展方法是一种特殊的静态方法,它定义在一个静态类中,但可以在其他类的对象上向调用实例方法那样进行调用.因此,通过扩展方法,我们就可以在不修改一个类型的前提下对一个类型进行功能上的扩充, ...
- 无监督学习:Deep Generative Mode(深度生成模型)
一 前言 1.1 Creation 据说在费曼死后,人们在他生前的黑板上拍到如图画片,在左上角有道:What i cannot create ,I do not understand. Generat ...
- OVS调试介绍
基本概念 基本命令 ovs-vsctl # ovs-vsctl show 96a55a7e-f49c-4dbe-b359-bafdff2ccad7 Manager "ptcp:6640:92 ...
- CF1119F Niyaz and Small Degrees【treedp+堆】
如果枚举d来dp,那么就是设f[u][0/1]为u点不断/断掉和父亲的边,然后优先选取f[v][1]+w(u,v)<=f[v][0]的,如果断掉这些度数还是多就用一个堆维护剩下的按f[v][1] ...
- 洛谷P2583 地铁间谍
P2583 地铁间谍 题目描述 特工玛利亚被送到S市执行一个特别危险的任务.她需要利用地铁完成他的任务,S市的地铁只有一条线路运行,所以并不复杂. 玛利亚有一个任务,现在的时间为0,她要从第一个站出发 ...
- cogs 2057. [ZLXOI2015]殉国
2057. [ZLXOI2015]殉国 ★☆ 输入文件:BlackHawk.in 输出文件:BlackHawk.out 评测插件时间限制:0.05 s 内存限制:256 MB [题目描 ...
- Mac终端操作移动硬盘文件命令
桌面上看到的硬盘都挂载在 /Volumes目录下 例如移动硬盘名为ZTB,有System目录,则应输入命令: cd /Volumes/ZTB/System 注意:进入Volumes目录命令为cd /V ...
- gui - tkinter 开发
GUI 用户交互界面 tkinter 介绍 tkinter python自带的gui库,对图形图像处理库tk的封装 其他gui:pythonwin,wxpython,pyQT.. 概念介绍 组件:组成 ...
- bzoj3159决战 码农题 树剖套splay
最近沉迷码农题无法自拔 首先有一个暴力的想法:对于每个重链维护一个splay,需要翻转的连起来,翻转,接回去 然后发现这样没问题... 一条链只能跨log个重链,也就只有log个splay的子树参与重 ...
- Exception in thread "main" java.lang.UnsupportedClassVersionError: com/google/common/base/Function : Unsupported major.minor version 52.0的解决办法(图文详解)
不多说,直接上干货! 问题详情 Exception in thread "main" java.lang.UnsupportedClassVersionError: com/goo ...