零点起飞学html+css之图像的使用

《零点起飞学html+css之图像的使用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章图像的使用图像是网站制作中应用最多的元素，它可以让网页变得丰富多彩。如果一个网页中只有一大堆文字而没有图像，那么浏览者多半会失去阅读的兴趣。而图像在网页中的应用不仅仅是“插入图片”那么简单，除了美观外，还有很多相关的图像属性来支持页面中图像的应用。本章我们就来详细讲解图像在网站中的应用。5.1图像的格式在网页中，图片一般包括.gif、.jpg、.png、.bmp这4种格式，比较常用的就是gif格式和jpg格式。5.2设置背景图像有时候为了美观，设计师会在网页的背景里插入图片，这就是背景图像。background属性就是用来设置背景图像的。background属性的语法结构如下。

2、dybackground="#">5.3图像标签在网页中，如果整个页面都是文字，那样会显得很单调，浏览者看多了只会觉得枯燥乏味。这时候我们只需要在网页中加入图片进行进一步的修饰，就会给网页带来很大的生机。标签的作用就是在网页中插入图片。5.3.1选择路径src路径就是告诉浏览器图片的具体位置。想要插入图片，就需要插入正确的路径。标签中的src属性就是来来为图片插入正确的路径的。其语法结构如下。5.3.2替换文本alt替换文本alt属性是告诉浏览器在图片无法显示

3、或不存在的时候，提供文字描述，以告诉浏览者这个图片所代表的含义。其语法结构如下。5.3.3图片宽度width在网页中插入图片时使用width属性，是可以设置插入的图片的宽度的。在设置了图片宽度以后，图片会根据指定的宽度适当的调整图片的高度。其语法结构如下。5.3.4图片高度height和设置图片的宽度一样，在网页中插入图片的时候也是可以设置图片的高度的。height属性就是用来设置图片的高度。其语法结构如下。<

4、imgsrc="路径"height="高度"/>5.3.5图片排版align插入图片后，我们还可以对图片进行排版，让它出现在想出现的地方。标签中的align属性就可以设定图片出现的位置。其语法结构如下。5.3.5图片排版align在align属性里的值常用的有5个，如表5.1所示。1．底部对齐底部对齐bottom是把图片设置在每行的最底端位置。当图片是插在文字中，可以设置图片和同一行的文字的底部对齐。适用于文字和图片并存在同一行上。其语法形式如

5、下。2．左对齐左对齐left是把图片设置在每行的最左边位置。此属性值适用于图片放在文字前头。当图片是放在文字前头时，图片效果居左后，后面的文字无论有多少行，只要不超过图片的高度，都会放在图片的右边。其语法结构如下。3．居中对齐居中对齐middle是把图片设置在以高度为相对位置的居中。当图片是插在文字中，可以设置图片居中在同一行的文字上。其语法结构如下。

6、ddle"/>4．右对齐右对齐right是把图片设置在每行的最右边位置。当图片右对齐后，后面的文字无论有多少行，只要不超过图片的高度，都会放在图片的左边。其语法结构如下。5．顶端对齐顶端对齐top是把图片设置在每行的最顶部位置。当图片是插在文字中，可以设置图片和同一行的文字的高度是并列以顶端为准显示。其语法结构如下。5.3.6设定边框border图片在

7、使用的时候，有时会由于有背景图片的关系，使得图片与背景图片难以区分，这时可以给图片添加一个边框来区分或者突显图片。标签里的border属性，就是用来设置图片的边框。其语法结构如下。5.3.7图像间距通常浏览器不会在图片和其周围的文字之间留出很多空间，会显得拥挤。标签中可以通过hspace和vspace属性来分别设