html----有關圖像

時間 2019-11-09

標籤 html 有關圖像欄目 HTML 简体版

原文原文鏈接

這一節內容可歸納爲：網頁上插入圖片，調整圖片大小，使用縮略圖連接至大圖。html

圖片的三種格式：jpeg png gif瀏覽器

照片、複雜圖像使用jpeg,單色圖像、logo、幾何圖形使用png以及gif。動畫

JPEG最適合連續色調圖像，不支持透明度，文件比較小，便於Web頁面高效顯示，不支持動畫。是一種」有損格式「，由於縮小文件大小時會丟掉圖像的一些信息；包含多達1600萬種不一樣顏色的圖像。spa

PNG最適合單色圖像和線條構成的圖像（如logo、剪貼畫、圖像中的小文本）；分三種：PNG-8(支持256種顏色)、PNG-16(支持數千種顏色)、PNG-24（支持數百萬種顏色）；是一種」無損」格式htm

壓縮文件時不會丟掉信息；容許設置透明；與相應的JPEG相比，PNG更大。不過取決於PNG的顏色數，不都是絕對的大於。圖片

GIF相似PNG，適用與簡單圖，能夠表示256種不一樣顏色的圖像；無損格式；支持透明度，不過只容許設置一種顏色透明；GIF每每比JPEG文件大；支持動畫。it

<a>標籤可與<img>嵌套使用。<a href="lianjie"><img=""src="photo.jpg"></a>,點擊圖片連接到另外一頁面。io

插入圖片標籤<img src="圖片"> 圖片與主頁同一目錄。在圖片較多時，可創建一個新的文件夾用於存放圖片，如一文件夾中有子文件index.html與photos文件夾，則圖片路徑爲<img src="photos/photo.jpg">。此外img標籤還可有alt屬性，alt="用於描述圖片的文字"，當圖片文件過大瀏覽器加載速度就越慢，在圖片並未加載出現時alt屬性的描述性文字就出如今原圖位置。im

<!DOCTYPE html>
<html>
<head>
<title>mypod.downtown</title></head>
<body>
<h1>Downtown</h1>
<p><img src="../photos/seattle_downtown.jpg"></p>
</body>
</html>總結

劃線部分在寫的時候出錯 ,直接寫了photo/seattle_downtown.jpg，圖片加載不出。此代碼爲一個縮略圖所連接的html頁面，即縮略圖的大圖。有創建了一個存放大圖html的文件夾（與photos文件夾同目錄），要在html中找到大圖，其相對路徑從html文件夾返回上級父文件夾再進入photos文件夾找到seattle_downtown.jpg，..（dot dot 意爲返回上級），所以路徑改成../photos/seattle_downtown.jpg。

總結下來，作事太粗心，要注意細節細節細節!多思考！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。