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>
效果如下:
替换文本属性(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,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!