当前位置： 首页 > news >正文

005+limou+HTML——（5）HTML图片和HTML超链接

news 2026/4/1 8:37:55

1、图片标签<img>

（1）图片标签属性

  • [src]：用于指定这个图片所在的路径，常使用相对路径，比较少使用绝对路劲。如果图片路径有错误的话，就会发生图片显示错误
  • [alt]：用于指定图片的提示文字，这个描述文字是给收索引擎看的，当图片无法显示时，就会显示这个属性的文字
  • [title]：用于指定图片的提示文字，这个描述文字是给用户看的，当鼠标指针移动到图片上时，会显示这个属性的文字
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><img src="D:\limou_picture\bd90a92f3ac21ba8-1650856738514.png" alt="阿鸠" title="阿鸠和她的小伙伴" /></body>
</html>

在这里插入图片描述

（2）图片格式

图片格式一般有两种：像素图（位图）、矢量图（向量图）

  • 像素图：由像素点构成，无论是放大还是缩小都会有一定程度的失真
    • .jpg格式，很好处理大面积色调的图片，适合存储颜色丰富的复杂图片，例如照片、高清图片。但是一般体积较大，并且不支持保存透明背景
    • .png格式，是一种无损格式，可以无损压缩以保证页面打开速度。此外png体积小，并且支持保存透明背景，不过不适合存储颜色丰富的图片
    • .gif格式，图片效果最差，但是适合制作动画。在qq和微信发的表情包大都是gif格式的
    • 对于像素图一般采用Photoshop软件处理
  • 矢量图：是一种通过数学描述的方式来记录内容的图片格式，优点是图片可以任意放大缩小或旋转，不会有失真，缺点是难以表现色彩丰富的图片
    • 常见格式有，.ai、.cdr、.fh、.swf，其中“.swf”格式是最常用的
    • 对于矢量图一般采用illustrator、CorelDRAW软件处理

2、超链接标签<a>

（1）外部链接：跳转到其他外部网站

①文字超链接

②图片超链接

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><a href="https://www.baidu.com">一个百度的链接</a><a href="https://bilibili.com"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/></a></body>
</html>

在这里插入图片描述

③[target]属性

默认情况下，超链接都是在当前浏览器窗口打开新窗口，不过可以使用target属性改变这一默认
在这里插入图片描述
一般情况下只会用“_blank”这一个值就行

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><a href="https://www.baidu.com">一个百度的链接</a><a href="https://bilibili.com" target="_blank"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/></a></body>
</html>

在这里插入图片描述

（2）内部链接：指向内部链接指向“自身网站的页面”

①我们尝试把之前做的html文档链接进去，先建一个文件夹

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><a href="https://www.baidu.com">一个百度的链接</a><a href="https://bilibili.com" target="_blank"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/></a><br/><a href="website\my_web_2023_2_28.html" target="_blank">跳转页面1</a><br/><a href="website\my_web_2023_3_1.html" target="_blank">跳转页面2</a><br/><a href="my_web_2023_3_2.html" target="_blank">跳转页面3</a><br/></body>
</html>

在这里插入图片描述

②锚点链接主要是为了跳转到当前网页的某处，其实也算内部链接的一种

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页标题</title></head><body><div><a href="#article">推荐文章</a><br/><a href="#music">推荐音乐</a><br/><a href="#movie">推荐电影</a><br/></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><div id="article"><h3>推荐文章</h3><ul><li>计算机网络基础</li><li>深入浅出Java</li><li>C primer puls</li></ul></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><div id="music"><h3>推荐音乐</h3><ul><li>Ether Strike (以太打击)('Divine Mercy' Extended)</li><li>K-forest、Seiya komori - Break Over</li><li>World.Execute (Me) ;</li></ul></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><div id="movie"><h3>推荐电影</h3><ul><li>游戏人生-零</li><li>天气之子</li><li>夏日幻魂</li></ul></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p></body>
</html>

在这里插入图片描述

点击“推荐文章”、“推荐音乐”、“推荐电影”三个文字，就可以跳转到下面的文字
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章：

005+limou+HTML——（5）HTML图片和HTML超链接

1、图片标签<img> &#xff08;1&#xff09;图片标签属性 [src]&#xff1a;用于指定这个图片所在的路径&#xff0c;常使用相对路径&#xff0c;比较少使用绝对路劲。如果图片路径有错误的话&#xff0c;就会发生图片显示错误[alt]&#xff1a;用于指定图片的提示文字…...

编程日记 2023/3/9 1:03:35

ES6 Generator

Generator Generator是es6引入的&#xff0c;主要用于异步编程。 最大特点是可以交出函数的执行权(即暂停执行)。 它和普通的函数写法有点不同 function关键字与函数名之间有一个*号&#xff0c;以与普通函数进行区别。 它不同于普通函数&#xff0c;是可以暂停执行的。 Gen…...

编程日记 2023/3/9 1:02:34

SCI期刊写作必备（二）：代码｜手把手绘制目标检测领域YOLO论文常见的性能对比折线图，一键生成YOLOv7等主流论文同款图表，包含多种不同功能风格对比图表

绘制一个原创属于自己的YOLO模型性能对比图表 具体绘制操作参考：（附Python代码，直接一键生成，精度对比图表代码 ） 只需要改动为自己的mAP、Params、FPS、GFlops等数值即可，一键生成 多种图表风格📈，可以按需挑选 文章目录 绘制一个原创属于自己的YOLO模型性能对比图…...

编程日记 2023/3/9 1:01:31

linux cpu飙高排查

linux定位cpu飙高原因 jpstop 定位应用进程 pidtop -Hp {pid}找到线程 tid将 tid 转换成十六进制 printf “%x\n” {tid}jstack 打印堆栈信息过滤出我们想要的 jpstop 定位应用进程 pid jps或ps -ef | grep java查看java进程id jps结果&#xff1a; 57152 abc.jar 83383 e…...

编程日记 2023/3/9 1:00:30

2023实习面试公司【二】

2023实习面试第二家公司 文章目录2023实习面试第二家公司前言一、面试官所问的问题&#xff1f;二、总结1.公司待遇2.推荐指数3.自己的感受前言 某岸科技&#xff0c;这家公司是我从拉钩上找的第二家面试公司&#xff0c;也是北京本地的一家公司。 提示&#xff1a;以下是本篇…...

编程日记 2023/3/9 0:59:26

C++ thread_local 存储类

目录标题概述实现场景总结概述 thread_local指示对象拥有线程存储期。也就是对象的存储在线程开始时分配&#xff0c;而在线程结束时解分配。每个线程拥有其自身的对象实例。唯有声明为 thread_local 的对象拥有此存储期。 thread_local 能与 static 或 extern 结合一同出现&am…...

编程日记 2023/3/9 0:58:24

冥想第七百二十三天

1.周日早上跑了5公里&#xff0c;很舒服精力满满的&#xff0c;感谢老婆给我做的饭&#xff0c;鱿鱼面筋腐竹。都非常的好吃。 2.下午13&#xff1a;19分送我到了地铁口&#xff0c;这个点卡的真好&#xff0c;以至于离高铁开车只剩5分钟&#xff0c;14&#xff1a;41发车。到上…...

编程日记 2023/4/24 15:24:12

zookeeper 集群配置

文章目录zookeeper 集群配置1、集群安装zookeeper 集群配置 1、集群安装 1) 集群安装 在 hadoop102、hadoop103 和 hadoop104 三个节点上都部署 Zookeeper。 2) 解压安装 在 hadoop102 解压 Zookeeper 安装包到/opt目录下 输入命令&#xff1a;tar -zxvf apache-zookeeper-3.…...

编程日记 2023/4/24 15:24:10

怎么用消息队列实现分布式事务？

当消息队列和事务联系在一起时&#xff0c;它指的是消息生产者和消息消费者之间如何保持数据一致性。 什么是分布式事务&#xff1f; 事务是指当我们进行若干项数据更新操作时&#xff0c;为了保证数据的完整性和一致性&#xff0c;我们希望这些更新操作要么都成功&#xff0…...

编程日记 2023/4/24 15:24:08

什么蓝牙耳机佩戴舒适？2023长时间佩戴最舒适的蓝牙耳机

现如今&#xff0c;很多蓝牙耳机的产品都在不断地更新&#xff0c;市面上的耳机也是越来越普及&#xff0c;可以说是成为我们日常生活中不可或缺的一类电子设备&#xff0c;下面介绍一些佩戴舒适性好的蓝牙耳机。 一、南卡小音舱蓝牙耳机 音质推荐指数&#xff1a;★★★★★…...

编程日记 2023/4/24 15:24:05

刮刮乐--课后程序(Python程序开发案例教程-黑马程序员编著-第4章-课后作业)

实例1&#xff1a;刮刮乐 刮刮乐的玩法多种多样&#xff0c;彩民只要刮去刮刮乐上的银色油墨即可查看是否中奖。每张刮刮乐都有多个兑奖区&#xff0c;每个兑奖区对应着不同的获奖信息&#xff0c;包括“一等奖”、“二等奖”、“三等奖”和“谢谢惠顾”。假设现在有一张刮刮乐…...

编程日记 2023/4/24 9:41:09

LeetCode 全题解笔记：两数相加（02）

两数相加&#xff08;medium&#xff09; 题目描述 给你两个非空的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照逆序的方式存储的&#xff0c;并且每个节点只能存储 一位数字。请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。你可以假设除了数…...

编程日记 2023/4/24 15:24:03

网络工程师面试题（面试必看）（1）

作者简介：一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭：低头赶路，敬事如仪 个人主页：网络豆的主页​​​​​​ 目录 前言 一.正题 1.TCP UDP协议的区别...

编程日记 2023/4/24 9:41:02

MySQL基础操作指南：第一篇

MySQL基础操作指南 一、数据库操作 1.1 概念阐述 基本操作语法结构创建数据库create database 数据库名 character set utf8;删除数据库drop database 数据库名选择数据库use 数据库名&#xff1b;查看当前选择的数据库select database();查看当前数据库包含的数据表show ta…...

编程日记 2023/4/24 9:40:57

C#中包含？的运算符使用汇总

总目录 文章目录总目录前言一、使用概述二、使用说明1.可空类型修饰符2.三目运算符3.空合并运算符4.NULL 检查运算符结语前言 本文将含有&#xff1f;运算符的各种使用进行汇总&#xff0c;方便系统性记忆和知识回顾。 一、使用概述 用法描述?可空类型修饰符?:三目运算符?…...

编程日记 2023/4/24 9:40:47

剑指 Offer 56 - I. 数组中数字出现的次数

剑指 Offer 56 - I. 数组中数字出现的次数 难度&#xff1a;middle\color{orange}{middle}middle 题目描述 一个整型数组 numsnumsnums 里除两个数字之外&#xff0c;其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n)&#xff0c;空间复杂度…...

编程日记 2023/4/24 9:40:40

MySQL事务日志

1.概述 事务有4种特性:原子性、一致性、隔离性和持久性。那么事务的四种特性到底是基于什么机制实现呢? 事务的隔离性由 锁机制 实现而事务的原子性、一致性和持久性由事务的 redo 日志和undo 日志来保证 REDO LOG 称为 重做日志&#xff0c;提供再写入操作&#xff0c;恢复…...

编程日记 2023/4/24 9:40:32

极速开发，无限可能，2023网易低代码大赛全新赛季启动

去年火爆的低代码大赛还犹在目&#xff0c;近800人用轻舟低代码平台畅享开发乐趣。这不&#xff0c;2023网易低代码大赛即刻启动&#xff0c;3月6日至3月27日限时开放报名&#xff0c;全新角逐&#xff0c;正式展开&#xff01;1\ 获胜者可得万元大奖、猪厂工作机会 /Low Code …...

编程日记 2023/4/24 9:40:24

C++ | 详细介绍缺省参数的作用

文章目录一、前言1、缺省参数概念2、缺省参数的使用规则二、全缺省参数【备胎是如何使用的♿】1、四种实参传递方式说明2、疑难细究三、半缺省参数【⭐】1、错误用法示范2、正确用法示范&#x1f525;实参缺省与形参缺省的混合辨析&#x1f525;3、小结四、缺省参数的实际应用 …...

编程日记 2023/4/24 9:40:16

【sdx62】sdx62分析代码中Serial Number的寄存器地址及获取Serial Number的方法

计算Serial Number寄存器地址 查看Serial Number ./boot_images/boot/QcomPkg/SocPkg/Library/XBLLoaderLib/boot_info_log.c /* Array of raw fuse addresses and names to be logged during boot loginitialization. Array must be null terminated. */ static struct boot_…...

编程日记 2023/4/24 9:40:06

3步解锁魔兽争霸III最佳体验：WarcraftHelper全方位优化工具指南

3步解锁魔兽争霸III最佳体验&#xff1a;WarcraftHelper全方位优化工具指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款专为…...

编程新知 2026/4/1 8:36:49

基于 LlamaFactory 与 LoRA 微调开源大模型：构建高效文本分类系统的实践指南

1. 为什么选择LlamaFactoryLoRA做文本分类&#xff1f; 最近在做一个政务工单分类项目时&#xff0c;我发现传统BERT模型遇到三个头疼问题&#xff1a;标注成本高&#xff08;需要上万条数据&#xff09;、领域迁移难&#xff08;换个场景就失效&#xff09;、小样本表现差&…...

编程新知 2026/4/1 7:33:21

【JAVA基础面经】深拷贝与浅拷贝

文章目录基本概念浅拷贝深拷贝重写 clone() 方法实现深拷贝使用序列化实现深拷贝使用复制构造函数或工厂方法基本概念 浅拷贝&#xff1a;创建一个新对象&#xff0c;然后将原对象的非静态字段&#xff08;基本类型和引用类型&#xff09;直接复制到新对象中。对于引用类型字段…...

编程新知 2026/4/1 7:27:12

Word文档自动更新日期技巧

设置Word文档自动显示当天日期打开Word文档后&#xff0c;可以通过插入日期字段实现每次打开时自动更新为当天日期。方法1&#xff1a;使用日期字段在Word文档中定位光标到需要显示日期的位置。点击菜单栏"插入"→"文本"→"日期和时间"。在弹出的…...

编程新知 2026/4/1 6:21:34

Chandra AI在教育领域的应用：智能学习助手开发

Chandra AI在教育领域的应用&#xff1a;智能学习助手开发 1. 引言 想象一下这样的场景&#xff1a;一个学生在深夜复习功课&#xff0c;遇到一道数学难题却找不到老师请教&#xff1b;一个上班族想学习新技能&#xff0c;但时间碎片化难以系统学习&#xff1b;一个老师面对几…...

编程新知 2026/4/1 5:47:08

从原理到代码：深入解析UniFormer的多头关系聚合器(MHRA)设计

从原理到代码&#xff1a;深入解析UniFormer的多头关系聚合器(MHRA)设计 视频理解领域近年来经历了从3D卷积网络到视觉Transformer的范式转变&#xff0c;但两者在时空特征提取上各有限制。3D CNN擅长捕捉局部时空特征却受限于固定感受野&#xff0c;而视觉Transformer虽能建模…...

编程新知 2026/4/1 5:02:47

量子密钥分发系统的工程实践(四)：基于FPGA的后处理核心模块剖析

1. FPGA在QKD后处理中的核心作用 量子密钥分发&#xff08;QKD&#xff09;系统的后处理环节就像一位严谨的会计&#xff0c;需要把原始账本&#xff08;量子信号&#xff09;整理成无可争议的最终报表&#xff08;安全密钥&#xff09;。而FPGA在这个过程中的角色&#xff0c;…...

编程新知 2026/4/1 5:00:39

3步掌握B站视频下载：解锁大会员4K高清内容

3步掌握B站视频下载&#xff1a;解锁大会员4K高清内容 【免费下载链接】bilibili-downloader B站视频下载&#xff0c;支持下载大会员清晰度4K&#xff0c;持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader Bilibili-downloader是你获取B站…...

编程新知 2026/4/1 4:07:45

5分钟快速上手LosslessCut：零编码视频剪辑的终极指南

5分钟快速上手LosslessCut&#xff1a;零编码视频剪辑的终极指南 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 你是否曾因视频剪辑导致画质下降而烦恼&#xff1f;是…...

编程新知 2026/4/1 2:12:00

高数值孔径物镜焦斑分析

背景介绍在显微成像、激光加工、光存储与单分子探测等应用中&#xff0c;高数值孔径物镜承担着“把光压缩到极小空间”的关键任务。物镜聚焦后的焦斑尺寸、形状、能量分布以及偏振特性&#xff0c;直接决定系统的分辨率、加工精度和探测灵敏度。因此&#xff0c;如何准确分析高…...

编程新知 2026/4/1 1:57:48