一、链接标签

　　语法：<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之基本语法（链接标签、路径的介绍和使用）的更多相关文章

  1. 认识HTML中文本、图片、链接标签和路径

    前端之HTML.CSS(一) 开发工具 编辑器 Dreamware.Sublime.Visual Studio Code.WebStorm 浏览器 Chrome.IE(Edge).Safari.Fir ...

  2. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  3. 链接标签（a 标签）

    一.链接标签 单词缩写: anchor 的缩写. 在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可. 语法格式: <a href="跳转目标" target ...

  4. HTML5：链接与路径

    链接与路径 一.路径 绝对路径——指包含服务器协议的完全路径 相对路径——指被链接文档相对于当前文档的路径. 二.超链接<a> 1.语法: <a href=“目标”>链接文本& ...

  5. HTML的链接标签

    网页的链接标签 文本超链接 图像超链接 格式:<a href="path" target="目标窗口位置" >链接文本或图像</a> 锚 ...

  6. ASP.NET Core教程【三】实体字段属性、链接标签、并发数据异常、文件上传及读取

    前文索引:ASP.NET Core教程[二]从保存数据看Razor Page的特有属性与服务端验证ASP.NET Core教程[一]关于Razor Page的知识 实体字段属性 再来看看我们的实体类 ...

  7. 多测师讲解html _链接标签004_高级讲师肖sir

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链 ...

  8. Django学习——Django settings 源码、模板语法之传值、模板语法之获取值、模板语法之过滤器、模板语法之标签、自定义过滤器、标签、inclusion_tag、模板的导入、模板的继承

    Django settings 源码 """ 1.django其实有两个配置文件 一个是暴露给用户可以自定义的配置文件 项目根目录下的settings.py 一个是项目默 ...

  9. 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例

    JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...

随机推荐

  1. Apache Shiro知识点总览

    名词解释 权限认证 授权 ini文件配置 jsp标签授权 Shiro会话机制 自定义Realm 加密.解密 特性 与spring整合 名词解释 Subject:认证主体 Reaml:认证来源[jdbc ...

  2. Trigonometric Function - Base

    虽然三角函数是初中知识,比较简单,却也因为是初中知识,距现在比较久,难免忘掉一些,所以复习一下. 三角函数英文单词 正弦:sine 余弦:cosine 正切:tangent 余切:contangent ...

  3. STP-10-RPVST+

    RPVST+(快速每VLAN生成树+)是一种以每个VLAN为基础,分别运行RSTP的形式,类似于PVST+.它拥有之前所描述的PVST+的优势,这为RSTP带来了亚秒级的收敛速度.因此,RPVST+和 ...

  4. easyui---datalist相关知识

    datalist 笔记: class:class="easyui-datalist" //对应标准元素:ul 表格线:lines="true" 远程数据绑定: ...

  5. ES6新特性使用小结（五）

    十二.class 与 extends ①.类的基本定义和生成实例 { class Parent{ constructor(name='Lain'){ //定义构造函数 this.name = name ...

  6. P2152 [SDOI2009]SuperGCD

    传送门 非常显du然liu的一道题 就是求GCD 因为数据范围... 所以要上压位高精+非递归的辗转相减 关于辗转相减: 如果 A是二的倍数,B是二的倍数   那么GCD(A,B)=2 * GCD(A ...

  7. 重建 orainvenotry

    目标 当 Central inventory 损坏或者丢失,如何在 Oracle 目录中重建 oraInventory(Central Inventory)? 解决方案 步骤 1:  找到 centr ...

  8. Android Bitmap（位图）详解

    一.背景 在Android开发中,任何一个APP都离不开图片的加载和显示问题.这里的图片来源分为三种:项目图片资源文件(一般为res/drawable目录下的图片文件).手机本地图片文件.网络图片资源 ...

  9. ListView 视图（View）

    自定义视图,设置默认ListView,ListViewItems默认样式 public class VirtualStackPanelView : ViewBase { public static r ...

  10. C# 实现本地化日志管理

    1.新建一个类库解决方案 CommnoLog 2.新建两个文件夹 2.1FileUtil.cs  代码如下 public static class FileUtil { /// <summary ...