使用图像
- 图形处理软件分为：
矢量：也称面向对象的图形应用程序，文件所占的存储空间更小
位图：（GIF，JPEG）位图应用程序也叫光栅应用程序，使用微小的点（像素）来创建图形，对于尺寸大小调整较困难。
- Web图像文件格式：
- Web图片的两种压缩方式：
1;有损压缩：从原始图像中永久性地移除一些数据，压缩率越高，小的细节区域丢失越多。
2;无损压缩：压缩前后实际数据几乎相同。
- 分辨率：指的是图像文件的分辨率，对于Web图片，标准的文件分辨率是72ppi(ppi即每英寸上的像素数)【dpi常用于表示打印机“每英寸的点数”，ppi常用于显示器“每英寸的像素数”】
- 透明度：支持透明度的文件类型可分为：二进制类型（对于一个指定的像素，要么透明，要么不透明）和可变类型（也称alpha通道，允许像素部分透明，可创造渐变效果）。
- 动画：一些Web文件格式不仅支持图像，也支持动画。这些动画文件包含两个或多个独立的文件，每个独立的文件称为一个动画帧。
Web浏览器能识别的流行图片文件格式：GIF，JPEG，PNG。如果试图在Web页面加载一幅TIFF或PICT图片，由于Web浏览器不能识别此格式，用户将看到一个破裂的图像标志。
-
GIF:图形交换格式(Graphic
Interchange Format)。使用的压缩方式称为LZW压缩，是一种不会导致文件数据丢失的无损压缩方法。对于文本，绘制的线条，漫画，色彩层次较少的图片都适合与另存为GIF格式。当在图形处理软件中将一个文件另存为GIF格式时，可以选择在保存图像时是否允许抖动（如果告诉图像处理程序使用抖动，可以将抖动值设置为介于0~100之间的一个百分比）。在GIF的调色板中，颜色越少，图片文件越小。 -
JPEG：由静态图像专家组（Joint
Photographic Experts Group）创建，不包含严格的色彩集合，适合压缩照片，有损压缩可能会改变某些颜色，所有JPEG文件都采用RGB（Red，Green，Blue）色彩模式。把一个图像另存为JPEG文件格式时，可选择不同的质量等级，质量等级越低，JPEG文件越小。 -
PNG：Portable Network
Graphic（可移植性网络），32位色彩格式，具有一个遮罩通道，可用作alpha透明度，具有灰度校正功能
<!doctype html>
<html>
<head>
<title>~~~~</title>
<style>
body{font-family:Tahoma, Geneva;
background-image:url(“~~.gif”);
background-attachment:fixed;
<!--背景图像保持固定状态-->
background-repeat:no-repeat;
<!--背景图像不重复显示-->
}
figure{float:left; margin:5px;} <!--float是告诉浏览器，将被浮动元素放置的位置，然后浮动其余页面的内容环绕图片。使用浮动时，浮动的内容必须放在包围它的任何其他内容之前。若某段落要清除浮动，用<p style=”clear:left;”>-->
figcaption{font-size:smaller; text-align:center;}
figure img{border-radius:20px;}
<!-- img标记定义一个border特性，可以指定边框的宽度，border特性值以像素为单位，对于有链接的图像，border默认值为1，否则为0-->
</style>
</head>
<body>
<div id=”copy”>
<h1>~~</h1>
<p>~~~~~~~~~~~~</p>
<figure> <!--默认情况，figure元素在所有的四条边上都具有15像素的外边距。如果打开的浏览器窗口足够宽，所有浮动图片都将显示在同一行，如果宽度不够，那么其余图片将紧接着在第一行的下边重新开始一行显示。-->
<img src=”~~.jpg” alt=”~~~~~”> <!--将图像插入到Web页面中，使用img元素,img是image的缩写，在img元素中添加src（source的缩写）特性，并赋相应的值即可立即将图像显示在Web页面上-->
<figcaption>~~~</figcaption> <!-- figcaption 放在figure之中，有开始和结束标记，通过这个元素可以定义一个图表的标题-->
</figure>
<figure>
<img src=”~*~.jpg” alt=”~~~~~”> <!--img元素是空元素，所以无对应的结束标记。通过img标记中的height和width特性，告诉浏览器图片的尺寸，可以帮助浏览器快速显示Web页面-->
<figcaption>~*~~</figcaption>
</figure>
<figure>
<img src=”~@~.jpg” alt=”~~~~~”> <!--使用<img>标记中的alt特性，可以为图像设置一个替代文本，它将显示在一个代替图片位置的方框中，当浏览器加载图像不成功时，将显示在该方框代替图像。如果标记中添加title特性，可以为用户提供一个快速提示，简要解释页面元素内容。-->
<figcaption>~@~~</figcaption>
</figure>
<figure>
<a href=”~~~~”><img src=”~~.jpg” alt=”~~~~” width=”~~” usemap=”#**”></a> <!-- 添加<a>标记，可将整幅图片作为链接还可为图像中的某些区域创建链接，即创建图像映射，图像映射中的每一个热点区域可以链接到一个Web页面。<img>标记中使用usemap特性告诉浏览器到哪去查找映射文件，映射名称前加#-->
<map name=”**”> <!--定义名为**的映射,name的特性是用于建立图像与映射之间的关联-->
<area shape=”~~” cords=” ” href=”~~~” alt=” ~~”> <!--<map>和</map>标记之间包含area标记，每一个area标记定义一个热点区域。area元素有4个基本特性：shape值有rect(矩形)，poly(多边形)，circle；coords：区域边界x,y，圆形还有r；href：热点区链接到的目标页面；alt-->
</map>
<figcaption>~~~</figcaption>
</figure>
</div>
</body>
</html>
网友评论