在html中加入网址,网页超链接怎么做,添加超链接网址的的详细步骤

2023-11-09

此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。

f0a8fc09eb01d4561babd6ba1989e9bc.png

程序员写代码

在HTML中添加图片其实很简单,就是添加一个img的标签。

f0a8fc09eb01d4561babd6ba1989e9bc.png

图片标签的语法

一般有src、alt、width、height四种属性就够用了。

效果:

f0a8fc09eb01d4561babd6ba1989e9bc.png

图片的显示效果

图片路径的写法

src表示的是图片的路径,这里面的值应该怎么写呢?

(1)html文件和图片在相同一个文件夹下。

HTML文件和图片文件在相同的目录下,可以直接书写文件的名称。

f0a8fc09eb01d4561babd6ba1989e9bc.png

写文件名的写法,如上面的HTML

(2)图片在HTML文件所在目录的文件夹内:

如图:

f0a8fc09eb01d4561babd6ba1989e9bc.png

图片文件在文件夹内

此时需要加上文件夹名称,并加上“/”表示下层目录:

f0a8fc09eb01d4561babd6ba1989e9bc.png

下层目录的图片写法

(3)图片文件在上层目录

如果图片在HTML文件所在的上层目录,则需要写“..”表示向上一级。如图:

f0a8fc09eb01d4561babd6ba1989e9bc.png

上层目录

超链接

超链接就是可以链接到某个资源的东西,比如我们打开百度首页搜索后,产生的就是超链接:

f0a8fc09eb01d4561babd6ba1989e9bc.png

这些蓝字超链接

这些蓝色的文字标题,我们点击之后可以跳转到新的网站。这就是超链接。下面我们自己写一个超链接:

f0a8fc09eb01d4561babd6ba1989e9bc.png

超链接的写法

f0a8fc09eb01d4561babd6ba1989e9bc.png

超链接预览

超链接中的属性

超链接中的潮涌属性包括:href(网页地址)、title(说明描述)、target(打开网页的位置)、name(名称)。

其中href支持带有任何协议的连接。title是对超链接的说明。

f0a8fc09eb01d4561babd6ba1989e9bc.png

程序员

target包括四个值:

_blank

在新的窗口打开连接

_self

在当前窗口打开超链接

_parent

在父窗口打开超链接,这个后面会说,不常用

_top

在整个窗口中打开被链接文档。

每天一个知识点,带你迈向软件编程大神,一起努力吧。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在html中加入网址,网页超链接怎么做,添加超链接网址的的详细步骤 的相关文章

  • 简单聊聊FPGA的一些参数

    笔者 E林1010 在上一篇中 我们已经知道了 FPGA的几个主流厂家和其中Intel家族中FPGA的系列的分类 上一篇文章链接 https mp weixin qq com s 1YufdRZ3Kvvk1znDGu69Og 本文微信公众号
  • word无法显示图片的问题终于搞定!oh yeah!

    我的word中的图片只显示一个方框 这个问题困扰我有一段时间了 今天终于搞定 原因如下 Word中不能显示公式 问 在Word 2003中编辑好的公式无法显示 只显示为一个方框 该怎么办 答 Word把使用公式编辑器输入的公式作为图形处理
  • SPECCPU 2017测试指导

    一 依赖包下载安装 安装前需要安装依赖包 可通过本地源进行安装 yum install gcc gfortran 离线场景下需要外网下载好后传到本地再安装 Deepin gfortran安装包手动安装3个gfortran的包 可选 yum
  • UDS应用层协议解析(史上最全)

    UDS应用层协议解析 UDS应用层协议解读 下 诊断服务分类 基础服务类 0x10 诊断会话模式 任何会话模式切换至默认会话模式时 非默认会话模式下设置的状态需要reset 28服务 85服务设置的状态需要恢复至默认状态 27服务解锁状态需
  • Win平台搭建WordPress环境

    Win平台搭建WordPress环境 WordPress是一个开源流行的个人信息发布平台 使用PHP编写 现在有众多的网站都使用WordPress来搭建的 同时WordPress还提供了大量的插件 能够帮助人们搭建个性化的网站 安装PHP
  • 在IntelliJ IDEA上使用Maven创建Spring项目HelloWorld

    因为IDEA自带Maven插件 所以使用IDEA是不需要在下载Maven的文件的 也可使用自己下载的Maven Spring我们则是通过Maven来下载构建 所以不需要下载jar包的 大神勿喷 请自行绕道 本博客面向第一次接触spring的
  • 使用Python绘制语音信号的波形图

    improt library import numpy as np import wave import pylab as pl download open souce audio in http www voiptroubleshoote
  • (一)基于物联网的智能安防监控机器人2207231212569

    基于物联网的智能安防监控机器人2207231212569 项目摘要 机器人是人类一直期待的东西 但自动化的东西有点不同 理想情况下 机器人能够做的事情比自动化机器人想做的要多得多 自动化机器人希望实现监控和制造商想要实现的另一主要可用性 但
  • 【六袆 - Dubbo】Dubbo服务的简单调用;

    这里写目录标题 1 Dubbo服务的基本调用过程 1 1在Java中定义dubbo服务 以interface接口的方式 1 2 Provider提供服务的具体实现 并声明为dubbo服务 1 3 Consumer使用dubbo服务 1 Du
  • ArrayList LinkedList Set HashMap介绍

    在Java中提供了Collection和Map接口 其中List和Set继承了Collection接口 同时用Vector ArrayList LinkedList三个类实现List接口 HashSet TreeSet实现Set接口 直接有
  • 11-13 输入输出流的位置

    1 获取文件流的读取位置 使用 ftell 函数可以获取当前文件流的读取位置 其返回值为当前位置距 0 位置的字节数 文件以二进制形式打开后 默认从 0 位置开始读取 读取一定字节后 读取位置会向后推移该字节数 例如下面的代码 未读取时 p
  • Java中FileInputStream简介说明

    转自 Java中FileInputStream简介说明 FileInputStream简介说明 FileInputStream对象的功能用于从文件中读取数据 我们可使用new 关键字创建此对象 FileInputStream功能 用于从文件
  • C++报错 invalid operands to binary expression

    C 报错 invalid operands to binary expression c 为什么加 const 就解决了 invalid operands to binary expression c 为什么加 const 就解决了 inv
  • 四种IO模型

    四种IO模型 目录 一 什么是IO 二 阻塞IO 三 非阻塞IO 四 信号驱动IO 五 异步IO 目录 一 什么是IO 对于IO的简单理解 我们首先通过两个数据之间的交互过程来理解什么是IO 向上面这样数据从对应的发送缓冲区发送到对应的接受
  • 视频中的I帧、B帧、P帧

    视频文件都是一帧一帧存储的 为了使文件的大小减小 通常会对文件进行压缩 mpeg4 MP4 文件中的每一帧开始都是固定的 00 00 01 b6 那么在接下来的每一帧分别是什么帧呢 I帧 B帧 P帧 一般在这固定帧的后面2bit就是标志是什
  • 【山河送书第十一期】:朋友圈大佬都去读研了,这份备考书单我码住了,考研书籍五本!!

    朋友圈大佬都去读研了 这份备考书单我码住了 数据结构与算法分析 计算机网络 自顶向下方法 现代操作系统 深入理解计算机系统 概率论基础教程 原书第10版 线性代数 原书第10版 线性代数及其应用 重磅推荐 参与方式 往期赠书回顾 八九月的朋
  • 【翻译】torch.device的使用举例

    参考链接 class torch device 原文及翻译 torch device torch device栏目 class torch device torch device 类型 A torch device is an object
  • 我们为什么选择CentOS

    服务器操作系统大多采用Unix和Linux操作系统 而Linux发行版本系统中 多使用CentOS Redhat Ubuntu Gentoo Debian 而这些发行版本可以大体分为两类 一类是商业公司维护的发行版本 一类是社区组织维护的发
  • Spark Shuffle 中 JVM 内存使用及配置内幕详情

    引言 Spark 从1 6 x 开始对 JVM 的内存使用作出了一种全新的改变 Spark 1 6 x 以前是基于静态固定的JVM内存使用架构和运行机制 如果你不知道 Spark 到底对 JVM 是怎么使用 你怎么可以很有信心地或者是完全确

随机推荐

  • 面试官的技术面试技巧与步骤

    面试官进行技术面试的常用技巧与步骤 面试需求 解读人员需求与岗位说明 了解岗位需求和工作内容 明确岗位对人员的知识技能 工作经验和基本素质要求 面前准备 分析应聘者简历 判断人员需求 岗位说明与应聘人员的匹配度 发现需进一步确认的信息 分析
  • 基于产品的RFM模型的k-means聚类分析

    首先我们可以看看数据集的数据形态 导入rfm数据 查看数据的统计学参数 df pd read csv rfm csv df describe 在实施Kmeans聚类之前 我们必须检查这些关键k means假设 变量对称分布 不倾斜 具有相同
  • Ubuntu安装Vmware tools

    点击vmware右上角虚拟机的下拉菜单中点击 安装 VMware Tools 然后在桌面上会有一个压缩包 右击打开当前文件夹 重命名这个压缩包为vmwaretools tar gz 在当前文件夹中打开terminal cp vmwareto
  • 机器学习算法(二十三):DTW(Dynamic Time Warping,动态时间调整)

    目录 1 DTW 动态时间调整 2 算法的实现 3 例子 4 python实现 5 DTW的加速算法FastDTW 5 1 标准DTW算法 5 2 DTW常用加速手段 5 3 FastDTW 1 DTW 动态时间调整 动态时间调整算法是大多
  • java pv uv_前端数据收集(pv/uv)

    所谓web 即使你我素未谋面 便知志趣相投 足不出户 亦知世界大 01 什么是PV UV 网站流量分析 是指在获得网站访问量基本数据的情况下对有关数据进行统计 分析 从中发现用户访问网站的规律 并将这些规律与网络营销策略等相结合 从而发现目
  • Cadence Allegro(8):生成网络报表(Netlist)

    Cadence Allegro 8 生成网络报表 Netlist 前提摘要 PCB设计软件版本 原理图设计 Pad Designer 16 6 PCB设计 PCB Editor 16 6 个人说明 限于时间紧迫以及作者水平有限 本文错误 疏
  • selenium chrome java 无头模式使用cdp设置navigator.permission

    Chrome Devtools Protocol 前提 chromium无头模式下和gui模式是不同的 userData无法指定 也无法通过模拟点击alert授权 或者进入chrome settings 通过selenium控制授权 因为无
  • 奶牛碑文。

    include
  • 八大数据结构

    八大数据结构 数据结构分类 1 数组 2 栈 3 队列 4 链表 5 树 6 散列表 7 堆 8 图 1 数组 数组是可以再内存中连续存储多个元素的结构 在内存中的分配也是连续的 数组中的元素通过数组下标进行访问 数组下标从0开始 例如下面
  • ORACLE 生成唯一id

    1 创建一个序列 create sequence id 序列名称 increment by 1 以1递增 start with 1 从1开始 maxvalue 999999999 最大值 2 创建函数调用上边创建的序列 CREATE FUN
  • PyCharm 使用教程:PyCharm常用技巧指南,轻松学会

    在 PyCharm 中 打开已有的项目有 3 种方式 欢迎界面中选择open 菜单栏中选择 File gt open 打开远程 Git 的项目 在 PyCharm 中 打开已有的项目可以在第一次打开的欢迎界面中选择open来打开你电脑中已经
  • 【‘XXX‘ is declared but its value is never read.】

    遇到问题了 引入一个弹窗组件 已经import了 也在template中写了弹窗组件 但是弹窗就是不出来 1 看看报错信息 没啥报错 2 看看代码 import中的代码暗淡了 鼠标移入出现上面的报错 突然想起来没有在component中写入
  • breach靶场练习详细全过程

    补充 桥接 nat host only三种网络模式的区别 模式 特点 场景 bridge桥接模式 特点 虚拟机使用物理机的网卡 不用虚拟网卡 占用一个ip 需要配置ip以后才可以访问互联网 场景 虚拟机需要连接实体设备的时候 nat网络地址
  • 最好用的 6 个 React Tree select 树形组件测评与推荐

    本文完整版 最好用的 6 个 React Tree select 树形组件测评与推荐 React Tree select 树形组件 1 React Sortable Tree 全功能 树状单选多选 可拖拽 过滤搜索 多种主题可选 2 Rea
  • android开发浏览器!写给1-3年安卓程序员的几点建议,聪明人已经收藏了!

    前言 作为一个程序员 如果你在新知识 新技术面前仍一无所知 依然吃着十多年前的老本 那你在知识技术上肯定落伍 如果又未能进入管理层面 那你肯定就会被长江的后浪拍在沙滩上了 而不少与时俱进 善于学习的程序员他们仍是行业的中坚力量 这只是说明当
  • 面试利器(二)-------插入排序(直接插入排序和希尔排序(Shell排序))

    一 直接插入排序 抓住关键字 插入 1 基本思想 顺序地把待排序的序列中的各个数据按其关键字的大小 插入到已排序的序列的适当位置 2 运行过程 1 将待排序序列的第一个数据看做一个有序序列 把第二个数据到最后一个数据当成是未排序序列 2 从
  • openblas第一弹:openblas 使用说明和常用接口介绍

    openblas 使用说明 openblas 是一个开源的矩阵计算库 包含了诸多的精度和形式的矩阵计算算法 就精度而言 包括float和double 两种数据类型的数据 其矩阵调用函数也是不一样 不同矩阵 其计算方式也是有所不同 姑且认为向
  • C++设计模式 - 组合模式(Composite)

    数据结构模式 常常有一 些组件在内部具有特定的数据结构 如果让客户程序依赖这些特定的数据结构 将极大地破坏组件的复用 这时候 将这些特定数据结构封装在内部 在外部提供统一的接口 来实现与特定数据结构无关的访问 是一种行之有效的解决方案 典型
  • 遗传算法基本介绍

    1 主要解决什么问题 是一种仿生全局优化算法 2 原理 思路是什么 选择 优胜劣汰 交叉 变异 一些重要概念 生物遗传概念在遗传算法中的对应关系 编码策略 常用的遗传算法编码方法主要有 二进制编码 浮点数编码等 可以证明 二进制编码比浮点数
  • 在html中加入网址,网页超链接怎么做,添加超链接网址的的详细步骤

    此系列教程主要讲解HTML从基础到精通 自己能够设计一个完整的前端网页项目 程序员写代码 在HTML中添加图片其实很简单 就是添加一个img的标签 图片标签的语法 一般有src alt width height四种属性就够用了 效果 图片的