HTML2——图像、超链接

最新推荐文章于 2022-07-26 17:41:10 发布
最新推荐文章于 2022-07-26 17:41:10 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： web前端 java 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coy_done/article/details/104301164
版权

文章目录

图像

常见图像格式

在日常生活中，使用比较多的图像格式有4中，即JPG格式、GIF格式、BMP格式、PNG格式。

JPG格式

JPG（JPEG）是在Internet上被广泛支持的图像格式，它是联合图像专家组（Joint Photographic Experts Group）的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所有比较适合在网页中使用。此格式最适合用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含数百万种颜色。随着JPG格式文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。

GIF格式

GIF是网页中使用最广泛、最普遍的一种图像格式,它是图像交换格式(Graphics Interchange Format)的英文缩写。GIF格式文件支持透明色,使得GIF格式图像在网页的背景和一些多层特效的显示上用得非常多,还支持动画,这是它最突出的一个特点,因此GIF格式图像在网页中应用非常广泛。

BMP格式

BMP格式图像在Windows操作系统中使用得比较多,它是位图(Bitmap)的英文缩写。BMP格式图像文件与其他Microsoft Windows程序兼容,但它不支持文件压缩,也不适用于Web页面。

PNG格式

PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。流式网络图形格式（Portable Network Graphic Format，PNG）名称来源于非官方的“PNG is not GIF”，是一种新兴的Web图像格式。

图像标签的基本语法

<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

  • src:设置图片的路径

    • 绝对路径：磁盘路径或互联网路径
    • 相对路径：同一级：直接调用；上一级：…/；下一级:img/a.jpg

  • width和height:设置图片的宽和高, 一般要么都不写，显示的是图片的真实大小，要么只是宽或者高，让图片等比例缩放，避免失真。

  • border : 设置图像的边框，以像素为单位。

  • alt:指定替代的文本，表示图像无法显示时（如图片路径错误或网速太慢等）用来替代显示的文本。这样，即使图像无法显示时，用户也可以看到网页丢失的信息内容。

  • title：提供额外的提示和帮助信息，当鼠标移至图片上时显示提示信息。

超链接

超链接的基本用法

超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为<a>标签的href属性；二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的连接地址。

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href表示链接地址的路径

target:设置链接在哪个窗口打开，默认是在当前页打开。_blank:在一个新窗口打开，_self 在当前页打开。_top：最顶层框架；_parent：父框架_search：在浏览器的搜索区装载文档。

当超链接不需要到任何的地址，在href里面加#, <a href="#">这是一个超链接</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<!--图像超链接-->
		<a href="https://www.baidu.com" target="_blank">
			<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度"/>
最低0.47元/天 解锁文章
苦岩
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面转换为jpg,html2Canvas将html转化成图片
weixin_39639286的博客
05-30 1018
1、安装html2Canvsnpm install html2canvas --save2、相应组件中引入html2Canvasimport html2canvas from 'html2canvas'3、创建需要生成图片的html需要生成图片的html4、html2canvas 生成canvas图片// 注意： allowTaint: true 和 useCORS: true 不能同时...
html文件转换动态图片,GitHub - jukrb0x/webp2jpg-online: 在线图片格式转化器,纯前端实现，无需上传文件,可将jpeg、jpg、png、gif、webp、svg、ic...
weixin_36060465的博客
05-31 698
webp2jpg-online 介绍我常常需要把webp图片转成jpg格式，很多在线转化提供的功能都需要上传文件，不爽。有非上传的但是ui很难用，谷歌一番后了解到html5自带接口的canvas.toBlob有转换图片格式的功能，索性就自己搞这个webp2jpg-online。在线图片格式转化器, 可将jpeg、jpg、png、gif、webp、svg、ico、bmp文件转化为jpeg、png、w...
html2image踩坑笔记，解决导出jpg红色底图、中文乱码、letter-space字距样式不能生效的问题
ffychina的专栏
06-14 3478
解决的方式是改写xhtmlrenderer源码：org.xhtmlrenderer.render.AbstractOutputDevice.java 修改方法：
保持原图比例放大缩小图片
04-14
使用方法：调用onload=AutoResizeImage()即可： <img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" /> 注意设置width="0" height="0" 也可onload="AutoResizeImage(0,250,this)"或onload="AutoResizeImage(250,0,this)" ，注意体会。 以下为使用示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>最新javascript自动按比例显示图片，按比例压缩图片显示</title> <script language="javascript" src="./resizepic.js"></script> </head> <body> <br /> 原图显示（534 X 800）<br /> onload="AutoResizeImage(0,0,this)<br /> <a href="./sample_pic.jpg" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br /> 1.按宽度250压缩,不限制高度 按比例压缩<br /> onload="AutoResizeImage(250,0,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br /> 2.按高度250压缩,不限制宽度 按比例压缩<br /> onload="AutoResizeImage(0,250,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br /> 3.按高度250宽度250 按比例压缩<br /> onload="AutoResizeImage(250,250,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br /> 4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br /> onload="AutoResizeImage(400,512,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br /> 5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br /> onload="AutoResizeImage(300,600,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="./sample_pic.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br /> 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br /> 原图444 x 207,压缩为 500 x 600,将保持原图显示<br /> onload="AutoResizeImage(500,600,this)"<br /> <a href="http://www.toyi.cc" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br /> </body> </html>
超链接和图像
11-29
Dreamweaver第二部分 超链接和图像 3.3 设置超链接 第4章 使用CSS 第5章 使用图像
动物相册——HTML效果
01-21
在HTML部分，描述可能包含了使用`<img>`标签来插入图像，通过`src`属性指定图片路径，并使用`alt`属性提供图片的文字描述，这对于屏幕阅读器用户和加载失败时尤为重要。此外，可能会用到`<a>`标签创建超链接，使得...
html操作——适合初学者
03-16
2. HTML标签：HTML标签是定义文档内容和结构的关键元素，如`<html>`、`<head>`、`<title>`、`<body>`等。例如，`<title>`标签用于定义页面的标题，在浏览器标签页中显示。 3. HTML文本元素：`<h1>`到`<h6>`定义了六...
狂神说——HTML完整教学通俗易懂
05-20
2. HTML标签：HTML由各种标签组成，例如、、到（标题）、（段落）、（超链接）等。这些标签告诉浏览器如何显示内容。例如，标签用于插入图像，需要指定src属性来指定图像源，alt属性则提供文字描述。 3. CSS与HTML...
从入门到精通HTML5——PDF——网盘链接
02-27
　2.5.3 背景图像属性——background 32 　2.5.4 设置链接文字属性——link 35 　2.5.5 设置边距——margin 37 　2.6 页面的注释标记 38 　2.7 实例演练——创建基本的HTML网页 38 　2.8 小结 39 　2.9 习题 40 　第...
xxaxverloaqq2:Basi HTML页面
03-31
在这个元素内部，有两个重要的子元素——`<head>`和`<body>`。 3. **头部（）**：`<head>`元素包含了不直接显示在页面上的元数据，如页面标题、字符编码声明、CSS样式表链接、JavaScript文件引用等。例如，`<title>...
html2image.jar最新html转成jpg图片
02-16
html2image.jar最新html转成jpg图片包含 html2image-0.9.jar，html2image-0.9-javadoc.jar，html2image-0.9-sources.jar
Html2Image (JAVA)
热门推荐
许三多的博客
09-25 2万+
一 . 背景介绍 最近公司业务有个小小的修改，需要我将一个简单的HTML静态页面，转换成BMP图片方便打印机打印 运行环境：Windows 10 上网查了资料，也踩过几个坑，在这里与大家分享 二. 大致过程 引入Html2Image的Maven依赖 <dependency> <groupId>com.github.xuwei-k</groupId> <artifactId>
图像&超链接&多媒体
lucky_xy1997的博客
02-06 318
图像&超链接&多媒体 图像 1、图像标签img <img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）"> 属性 说明 src 图像的文件地址 alt 图片显示不出来时的提示文字 title 鼠标移到图片上的提示文字 2、相对路径和绝对路径 对于一个网站而言，外部文件或图片的引用都是使用相对路径，几乎不用绝对路径。 3、图片格式 （1）位图 位图分为8位、16位、24位和32位。在制作页面的时候，
润乾——超链接书写格式
贾志远的专栏
02-28 794
1.通过报表名称展现：../../mis2/vrsr/showReport1.jsp?raq=/flexdesigner/reportFiles/12089.raq 2.通过资源ID展现：../../mis2/vrsr/showReport1.jsp?resID=12090 3.通过名称或ID展现时，传递需要加解密的参数："../../mis2/vrsr/showReport1.jsp?res
div背景图片等比例缩小如何居中
未曾远去
07-10 1万+
有时候我们想通过CSS使背景图片background-image居中显示，但是发现CSS语法并没有提供background-align:center这样的用法，这篇教程详细地讲解了CSS背景图片background-image缩放如何居中显示，分为两种情况：①背景图片尺寸小于容器尺寸；②背景图片尺寸大于容器尺寸。 背景图片尺寸小于容器尺寸 通过background的center属性实现背景图片...
怎么做图片超链接？
青峰专栏
06-14 2067
<br />做图片形式的超连接 代码如下<br /><a href=#><img src="xxx.gif" alt=hello></a><br />src后是图片  alt后是鼠标悬浮时的说明文字
HTML图片超链接
weixin_72013458的博客
07-26 1308
HTML基础
图片超链接
m0_62816172的博客
10-11 490
对整个一幅图像文件设置超链接 语法： <a herf="链接地址" target="目标窗口打开方式"><img src="图像文件的地址"></a> 功能： 为图片添加超链接 在图像属性中可以添加图像的其他参数，如 heigth、border、hspace 等 ...
怎么用adopedream waver图像进行超链接
最新发布
06-10
2. 在页面上选择您想要添加超链接的图像。单击鼠标右键，在弹出的菜单中选择“超链接”。 3. 在“超链接”对话框中，输入您想要链接的网页或文件的地址。您可以输入完整的URL地址或相对地址。 4. 在“目标”下拉...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值