专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

html怎么插入图片,html图片插入方法

来源:小易整编  作者:小易  发布时间:2022-12-30 04:08
摘要:html怎么插入图片,html图片插入方法。一、图片格式网络上流行的图片格式主要有jpg、jpeg、png、gif等,以下是这几种格式的介绍。1、gif格式gif采用LZW压缩,是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何...

html怎么插入图片,html图片插入方法。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等,以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩,是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失,且压缩率高,支持动画效果,很适合互联网平台,但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片,通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失,这部分损失不影响图片显示,一般人眼是看不出来差异的。损失数据越多,图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式,它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点,还支持48 bit的色彩,跨平台的图像亮度控制,更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片,语法如下:

<img src="图片路径" alt="替换文本" />

具体示例:

<!DOCTYPE HTML><html><body><p>一幅图像:<img src="/i/eg_mouse.jpg" width="128" height="128" /></p><p>一幅动画图像:<img src="/i/eg_cute.gif" width="50" height="50" /></p><p>请注意,插入动画图像的语法与插入普通图像的语法没有区别。</p></body></html>

效果如下:

html怎么插入图片,html图片插入方法

替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时,替换文本属性可告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好地显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码,在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码,在网页中对一个图片进行超链接设置,点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外,还可以将图像划分成不同区域进行链接设置,比如一张地图中给每个省份图形进行超链接。

图像热区链接,使用usemap 属性通过#name指定到名叫name的map元素上,map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种,rect 方形,circle 圆形,poly 多边形。coords 属性定义坐标点位置,相对于图片左上角位置。

示例代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><p>点击太阳或其他行星,注意变化:</p><img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif"></map></body></html>

本文地址:百科问答频道 https://www.neebe.cn/wenda/886520.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • 怎样用Photoshop给图片进行反相处理

    怎样用Photoshop给图片进行反相处理

    反相概念的理解比较复杂,涉及到专业的色彩知识,可以简单理解为,一个像素或整张图片的反相颜色,就是225减去原图的RGB数值。怎样运用Photoshop中的反相进行抠图,详情请看下文。操作方法01同时按...

  • 口袋妖怪圣灰攻略图片6

    口袋妖怪圣灰攻略图片6

    口袋妖怪圣灰,是国外改版达人metapod23的改版,以火红为蓝本,严格按照动画剧情走流程,实在是一款非常不错的游戏改版。如果非要说有什么缺陷,那大概就是美工不算太好吧。有想要重温动画情节或者体验动画剧情的,一定不能错过哦操作方法...

  • cad怎样导出图片

    cad怎样导出图片

    我们在使用cad绘制工程图的时候,需要得到图片格式的文件,然后将图片放到设计文件里,那么我们使用CAD怎样才能够导出图片呢,一起来看看是如何操作的吧。操作方法01在桌面上双击CAD快捷图标,打开CAD...

  • 怎么批量修改图片名称

    怎么批量修改图片名称

    经常跟图片打交道的朋友可能会遇到要更改图片名称的情况,有时候几张图片还好说,但是如果是几十张甚至几百张图片要改名,那么一张一张改就累死了。下面小编就来教大家怎么批量修改图片名称。操作方法01...

  • 如何给图片做模糊处理

    如何给图片做模糊处理

    日常生活中我们常常要处理一些图片,比如上传的图片涉及部分隐私,需要将局部做模糊处理,这样我们常常要用到一些制图软件的功能,这里利用美图秀秀软件介绍两种办法,把图片打上马赛克和背景虚化。操作方法01第一...

  • 如何在PS软件中对图片的角度进行旋转

    如何在PS软件中对图片的角度进行旋转

    今天给大家介绍一下如何在PS软件中对图片的角度进行旋转的具体操作步骤。1.方法一:首先打开电脑,找到桌面上的ps软件,双击打开。2.选择想要旋转的图片,导入软件中。3.在右侧的图层后面,点击小锁图标,拖动到下方的垃圾桶中。4.按键盘上...

  • 手机如何拍照搜索?(有图片怎么进行搜索)

    手机如何拍照搜索?(有图片怎么进行搜索)

    现在很多搜索引擎都支持以图片的形式来搜索。接下来小编就以搜狗搜索为例,告诉大家如何通过图片来搜索相关内容。操作方法01首先进入搜狗搜索网站,点击“图片”。02然...

  • 如何在ps中使用镜像制作出互相对称的图片

    如何在ps中使用镜像制作出互相对称的图片

    有的小伙伴在使用PS软件编辑图片时,为了增加图片的美感,想要用镜像制作出互相对称的图片,但是却不知道如何制作,那么小编就来为大家介绍一下吧。具体如下:1.第一步,点击想要制做镜像的图片,可以看到图片尺寸为640*1138。2.第二步,双...

  • 周排行
  • 月排行
  • 年排行

精彩推荐