005+limou+HTML——(5)HTML图片和HTML超链接
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> (1)图片标签属性 [src]:用于指定这个图片所在的路径,常使用相对路径,比较少使用绝对路劲。如果图片路径有错误的话,就会发生图片显示错误[alt]:用于指定图片的提示文字…...
ES6 Generator
Generator Generator是es6引入的,主要用于异步编程。 最大特点是可以交出函数的执行权(即暂停执行)。 它和普通的函数写法有点不同 function关键字与函数名之间有一个*号,以与普通函数进行区别。 它不同于普通函数,是可以暂停执行的。 Gen…...
SCI期刊写作必备(二):代码|手把手绘制目标检测领域YOLO论文常见的性能对比折线图,一键生成YOLOv7等主流论文同款图表,包含多种不同功能风格对比图表
绘制一个原创属于自己的YOLO模型性能对比图表 具体绘制操作参考:(附Python代码,直接一键生成,精度对比图表代码 ) 只需要改动为自己的mAP、Params、FPS、GFlops等数值即可,一键生成 多种图表风格📈,可以按需挑选 文章目录 绘制一个原创属于自己的YOLO模型性能对比图…...
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结果: 57152 abc.jar 83383 e…...
2023实习面试公司【二】
2023实习面试第二家公司 文章目录2023实习面试第二家公司前言一、面试官所问的问题?二、总结1.公司待遇2.推荐指数3.自己的感受前言 某岸科技,这家公司是我从拉钩上找的第二家面试公司,也是北京本地的一家公司。 提示:以下是本篇…...
C++ thread_local 存储类
目录标题概述实现场景总结概述 thread_local指示对象拥有线程存储期。也就是对象的存储在线程开始时分配,而在线程结束时解分配。每个线程拥有其自身的对象实例。唯有声明为 thread_local 的对象拥有此存储期。 thread_local 能与 static 或 extern 结合一同出现&am…...
冥想第七百二十三天
1.周日早上跑了5公里,很舒服精力满满的,感谢老婆给我做的饭,鱿鱼面筋腐竹。都非常的好吃。 2.下午13:19分送我到了地铁口,这个点卡的真好,以至于离高铁开车只剩5分钟,14:41发车。到上…...
zookeeper 集群配置
文章目录zookeeper 集群配置1、集群安装zookeeper 集群配置 1、集群安装 1) 集群安装 在 hadoop102、hadoop103 和 hadoop104 三个节点上都部署 Zookeeper。 2) 解压安装 在 hadoop102 解压 Zookeeper 安装包到/opt目录下 输入命令:tar -zxvf apache-zookeeper-3.…...
怎么用消息队列实现分布式事务?
当消息队列和事务联系在一起时,它指的是消息生产者和消息消费者之间如何保持数据一致性。 什么是分布式事务? 事务是指当我们进行若干项数据更新操作时,为了保证数据的完整性和一致性,我们希望这些更新操作要么都成功࿰…...
什么蓝牙耳机佩戴舒适?2023长时间佩戴最舒适的蓝牙耳机
现如今,很多蓝牙耳机的产品都在不断地更新,市面上的耳机也是越来越普及,可以说是成为我们日常生活中不可或缺的一类电子设备,下面介绍一些佩戴舒适性好的蓝牙耳机。 一、南卡小音舱蓝牙耳机 音质推荐指数:★★★★★…...
刮刮乐--课后程序(Python程序开发案例教程-黑马程序员编著-第4章-课后作业)
实例1:刮刮乐 刮刮乐的玩法多种多样,彩民只要刮去刮刮乐上的银色油墨即可查看是否中奖。每张刮刮乐都有多个兑奖区,每个兑奖区对应着不同的获奖信息,包括“一等奖”、“二等奖”、“三等奖”和“谢谢惠顾”。假设现在有一张刮刮乐…...
LeetCode 全题解笔记:两数相加(02)
两数相加(medium) 题目描述 给你两个非空的链表,表示两个非负的整数。它们每位数字都是按照逆序的方式存储的,并且每个节点只能存储 一位数字。请你将两个数相加,并以相同形式返回一个表示和的链表。你可以假设除了数…...
网络工程师面试题(面试必看)(1)
作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页 目录 前言 一.正题 1.TCP UDP协议的区别...
MySQL基础操作指南:第一篇
MySQL基础操作指南 一、数据库操作 1.1 概念阐述 基本操作语法结构创建数据库create database 数据库名 character set utf8;删除数据库drop database 数据库名选择数据库use 数据库名;查看当前选择的数据库select database();查看当前数据库包含的数据表show ta…...
C#中包含?的运算符使用汇总
总目录 文章目录总目录前言一、使用概述二、使用说明1.可空类型修饰符2.三目运算符3.空合并运算符4.NULL 检查运算符结语前言 本文将含有?运算符的各种使用进行汇总,方便系统性记忆和知识回顾。 一、使用概述 用法描述?可空类型修饰符?:三目运算符?…...
剑指 Offer 56 - I. 数组中数字出现的次数
剑指 Offer 56 - I. 数组中数字出现的次数 难度:middle\color{orange}{middle}middle 题目描述 一个整型数组 numsnumsnums 里除两个数字之外,其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n),空间复杂度…...
MySQL事务日志
1.概述 事务有4种特性:原子性、一致性、隔离性和持久性。那么事务的四种特性到底是基于什么机制实现呢? 事务的隔离性由 锁机制 实现而事务的原子性、一致性和持久性由事务的 redo 日志和undo 日志来保证 REDO LOG 称为 重做日志,提供再写入操作,恢复…...
极速开发,无限可能,2023网易低代码大赛全新赛季启动
去年火爆的低代码大赛还犹在目,近800人用轻舟低代码平台畅享开发乐趣。这不,2023网易低代码大赛即刻启动,3月6日至3月27日限时开放报名,全新角逐,正式展开!1\ 获胜者可得万元大奖、猪厂工作机会 /Low Code …...
C++ | 详细介绍缺省参数的作用
文章目录一、前言1、缺省参数概念2、缺省参数的使用规则二、全缺省参数【备胎是如何使用的♿】1、四种实参传递方式说明2、疑难细究三、半缺省参数【⭐】1、错误用法示范2、正确用法示范🔥实参缺省与形参缺省的混合辨析🔥3、小结四、缺省参数的实际应用 …...
【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_…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
