前端入门-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.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频

景图片

本例演示如何向 HTML 页面添加背景图片。

<html>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>

</html>

HTML基础操作：图片显示

天分享一个CSS图片浏览效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>CSS相册浏览</title>

_uacct = "UA-780254-3";

urchinTracker();

</script>

h2,ul,li{margin:0;padding:0;list-style:none;}

img{border:0;}

.imgview{

position:absolute;

top:30px;

z-index:80;

float:left;

width:857px;

height:auto;

min-height:440px;

}

.imgview a{

text-decoration:none;

}

.imgview h2{

position:absolute;

top:10px;

left:10px;

width:290px;

height:30px;

background-color:#FFFFFF;

color:#000000;

font-size:1.2em;

text-indent:10px;

line-height:30px;

}

.imgview ul{

position:absolute;

top:48px;

left:10px;

z-index:90;

width:290px;

height:auto;

min-height:230px;

background-color:#FFFFFF;

}

.imgview ul li{

float:left;

width:82px;

height:59px;

margin:8px 6px 7px;

border:1px solid #DEDEDE;

}

.imgview ul li strong{

display:none;

}

.imgview ul li a:hover{

display:block;

width:100%;

height:100%;

}

.imgview ul li a:focus strong,

.imgview ul li a:active strong{

display:block;

position:absolute;

top:350px;

left:300px;

z-indent:100;

width:537px;

height:30px;

background-color:#FFFFFF;

color:#000000;

text-indent:10px;

line-height:30px;

}

.imgview ul li a:hover span img{

position:absolute;

top:240px;

left:1px;

width:200px;

height:140px;

}

.imgview ul li a:active span img,

.imgview ul li a:focus span img{

position:absolute;

top:-38px;

left:300px;

z-index:90;

width:537px;

height:380px;

}

.imgview ul li img{

width:80px;

height:57px;

}

.imgview .imgview-rep{

position:absolute;

top:287px;

left:10px;

z-index:10;

width:201px;

height:140px;

border:1px solid #999999;

color:#EFEFEF;

font-size:2em;

text-align:center;

line-height:140px;

}

.imgview .imgview-bgtext{

position:absolute;

top:9px;

left:309px;

z-index:10;

width:537px;

height:380px;

border:1px solid #999999;

color:#EFEFEF;

font-size:5em;

text-align:center;

line-height:380px;

}

.imgtag{

position:absolute;

top:130px;

left:10px;

}

.imgtag .tagname{

float:left;

width:100px;

height:30px;

text-align:center;

line-height:30px;

cursor:pointer;

}

.imgtag .tag1

.imgtag .tag2,

.imgtag .tag3{

position:absolute;

left:0;

width:100px;

}

.imgtag .tag1{

position:absolute;

left:0;

background-color:#BCC8C3;

}

.imgtag .tag1 .imgview{

left:0;

background-color:#BCC8C3;

}

.imgtag .tag2{

position:absolute;

left:102px;

background-color:#BFB6B4;

}

.imgtag .tag2 .imgview{

display:none;

}

.imgtag .tag2:hover .imgview{

display:block;

left:-102px;

z-index:80;

background-color:#BFB6B4;

}

.imgtag .tag3{

position:absolute;

left:204px;

background-color:#CCC8BF;

}

.imgtag .tag3 .imgview{

display:none;

}

.imgtag .tag3:hover .imgview{

display:block;

left:-204px;

z-index:80;

background-color:#CCC8BF;

}

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

</style>

</head>

<body>

<p>CSS图片浏览效果</p>

<div class="imgview-bgtext">PhotoView</div>

<div class="imgview-rep">PhotoView</div>

<h2>Photogallery 01</h2>

<ul>

<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>

<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>

<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>

<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>

<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>

<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>

<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>

<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>

<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>

</ul>

</div>

</div>

<div class="imgview-bgtext">PhotoView</div>

<div class="imgview-rep">PhotoView</div>

<h2>Photogallery 02</h2>