html----有关图像

这一节内容可概括为：网页上插入图片，调整图片大小，使用缩略图链接至大图。

图片的三种格式：jpeg png gif

照片、复杂图像使用jpeg,单色图像、logo、几何图形使用png以及gif。

JPEG最适合连续色调图像，不支持透明度，文件比较小，便于Web页面高效显示，不支持动画。是一种”有损格式“，因为缩小文件大小时会丢掉图像的一些信息；包含多达1600万种不同颜色的图像。

PNG最适合单色图像和线条构成的图像（如logo、剪贴画、图像中的小文本）；分三种：PNG-8(支持256种颜色)、PNG-16(支持数千种颜色)、PNG-24（支持数百万种颜色）；是一种”无损”格式

压缩文件时不会丢掉信息；允许设置透明；与相应的JPEG相比，PNG更大。不过取决于PNG的颜色数，不都是绝对的大于。

GIF类似PNG，适用与简单图，可以表示256种不同颜色的图像；无损格式；支持透明度，不过只允许设置一种颜色透明；GIF往往比JPEG文件大；支持动画。

<a>标签可与<img>嵌套使用。<a href="lianjie"><img=""src="photo.jpg"></a>,点击图片链接到另一页面。

插入图片标签<img src="图片"> 图片与主页同一目录。在图片较多时，可建立一个新的文件夹用于存放图片，如一文件夹中有子文件index.html与photos文件夹，则图片路径为<img src="photos/photo.jpg">。此外img标签还可有alt属性，alt="用于描述图片的文字"，当图片文件过大浏览器加载速度就越慢，在图片并未加载出现时alt属性的描述性文字就出现在原图位置。

<!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。

总结下来，做事太粗心，要注意细节细节细节!多思考！

巴特西

html----有关图像

最新文章

热门文章