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

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

news 2025/9/15 22:09:00

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

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/9/6 15:52:58

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/9/7 2:04:00

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/8/25 22:27:27

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/9/13 0:33:11

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/7/28 0:01:58

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/9/2 17:49:26