HTML图像设计

1.图像的基础知识

  图像可以分为两类，位图图像和矢量图。

  位图又称为光栅图，是由许多像素组成的图。常见的位图格式有JPEG、PNG、GIF，当然位图的格式还有很多，比如BMP、TGA、TIFF、PSD。

  矢量图是以一种数学描述的方式来记录图像内容。矢量图由于其可以随意放大缩小的特点，通常被看成一种图像模版放在图库中。矢量图的后缀一般有.ai、.cdf、。fh、swf等。

  图像的分辨率，分辨率的单位是dpi（display pixels/inch），即每英寸显示的线数。

2.网页中的图片一些技巧

 （1）align属性可以对齐图片，align属性可以放在<img>标签内，可以左对齐，右对齐，居中对齐在img内不起作用的，依然是左对齐

 （2）图片与文本的对齐方式

         分别是图像的顶部、中间、底部与同一行的文本对齐，最后一个比较特殊，与文本的基线对齐

                <p><img src="../img4/图鉴1.jpg" style="vertical-align: text-top;"/>明月几时有，把酒问青天。不知天上宫阙，今夕是何年。</p><p><img src="../img4/图鉴2.jpg" style="vertical-align:middle"/>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p><p><img src="../img4/图鉴3.jpg" style="vertical-align: text-bottom;"/>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p><p><!--图像的底部和文本的基线对齐，与text-bottom的区别是它会超出图片的下边线--><img src="../img4/图鉴3.jpg" style="vertical-align: baseline;"/>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>

（3）控制图像与文本的距离

       hspace与vspace，具体看代码

      

                <h1>图像与文字的距离</h1><img src="../img4/黑白照片.jpg" hspace="30"/>这段文字距离左边图片的距离是30px，图片距离左右的内容都是30px<hr><img src="../img4/黑白照片.jpg" vspace="30"/>这段文字距离上面图片的距离是30px，图片距离上下的内容都是30px

 （4）给图像加边框 

         border属性，这个没啥说的

 （5）页面背景

        background-image:url()

       //图像是否重复使用

      background-repeat: repeat-x/repeat-y/no-repeat

3.我的练习作品，哈哈

项目地址：https://gitee.com/yuanhan93/HTML5andCSS3   【d4文件夹】