一、链接标签

　　语法：<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. css正方形盒子 自适应

      <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="U ...

  2. django 模版 语法与使用

    目录 django 模版语法与使用 django模板语言介绍 (摘自官方文档) 链接 什么是模板? 模板语句的 注释 变量 {{ 变量 }} 点(.)在模板语言中有特殊的含义,用来获取对象的相应属性值 ...

  3. 剑指Offer的学习笔记（C#篇）-- 从上往下打印二叉树

    题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 一 . 题目解析 了解过二叉树就应该知道,二叉树存在三种遍历方法:前序遍历(根→左→右).中序遍历(左→根→右).后续遍历(左→右→根 ...

  4. c#之quartz任务调度的使用

    这里讲下,quartz这种任务调度程序的简单使用 这是使用的quartz的3.x 版本 2.x 版本与此稍有区别,可以在网上查看2.x版本教程 使用语言为c# quartz的使用分为几个步骤 创建一个 ...

  5. react native 使用iconfont

    安卓的配置: 1.在android/app/src/assets/fonts文件夹下复制从iconfont下载的   (下载后的icon名称可以在下载来的文件中的html文件中) 2.在android ...

  6. p标签间距问题

    用<p></p>标签写文本时,控制行与行之间的高度最好用line-height,不要用margin或padding:   因为P标签本身就带有一定的上下间距,且自带的间距在模拟 ...

  7. python进阶03 继承

    python进阶03 继承 一.继承 课堂练习:假设你正在参与一个魔幻类角色游戏的开发,公司需要腻味这个游戏设计两个角色的类: a.剑士 属性:1.角色名:2.角色等级:3.生命值:4.攻击力 行为: ...

  8. 如何使用在Windows 下AspNetCore Api 和 consul

    在Windows 下如何使用 AspNetCore Api 和 consul https://blog.csdn.net/sD7O95O/article/details/80750803 一.概念:什 ...

  9. scrapy 一些设置和问题

    scrapy设置ua池 设置后在setting启用 DOWNLOADER_MIDDLEWARES = { 'laogou.middlewares.LaogouDownloaderMiddleware' ...

  10. PT100/PT1000

    热敏电阻:互换性差,非线性严重,测量范围窄-50~300℃. 金属电阻:准备稳定可靠.-200~500℃ PT100:测量范围宽比PT1000宽,分辨率比PT1000低(100倍,即PT1000每变化 ...