前端入門-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>