第六章 HTML网页中的图片
本章要点
img标记
网页中图片的属性
图文混排
使用CSS样式表设置图片属性
目录：
6.1 在网页中加入图片
6.2 图片与文字的排版
6.3 网页背景图片
6.4 利用CSS样式在网页中加入图片
6.1 img标记及其属性
src 图像的源文件
alt 提示文字
width,height 宽度、高度
border 边框
vspace 垂直间距
hspace 水平间距
align 排列
6.2 图片与文字的排版
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐方式的效果和文字的对齐一样，只有3种：居左、居右、居中；而相对文字对齐方式是指图像与一行文字的相对位置。
top文字的中间线居在图片上方
middle文字的中间线居在图片中间
bottom文字的中间心啊居在图片底部
left图片在文字的左侧
right图片在文字的右侧
absbottom文字的底线居在图片的底部
absmiddle文字的底线居在图片的中间
baseline英文文字基准线对齐
texttop英文文字上边线对齐
6.3 网页背景图片
1.设置页面背景颜色
主体标记<body>中的bgcolor属性可以设定整个页面的背景颜色。
<body bgcolor="color_value">
与文字颜色相似，也是使用颜色名称或者十六进制值来表现颜色效果。color_value指的就是颜色的值。
2.设置页面背景图片
页面中可以使用JPG或GIF图片作为页面的背景图，通过主体标记<body>中的background属性来实现。它与向网页中插入图片不同，放在网页的最底层，文字和图片等等都位于它的上面。文字、图片等会覆盖背景图片。在默认的情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。
<body background="img_file_url">
img_file_url是指图片文件的路径。
6.4 利用CSS样式在网页中加入图片
1.应用CSS图像边框
2. 使用CSS设置图文环绕
可以使用float、margin和padding属性使正文环绕一个图像。
float：设置元素向左或向右浮动；
margin：设置图像到其他元素的间距；
padding：设置图像到边框的间距；
本章要点
img标记
网页中图片的属性
图文混排
使用CSS样式表设置图片属性
目录：
6.1 在网页中加入图片
6.2 图片与文字的排版
6.3 网页背景图片
6.4 利用CSS样式在网页中加入图片
6.1 img标记及其属性
src 图像的源文件
alt 提示文字
width,height 宽度、高度
border 边框
vspace 垂直间距
hspace 水平间距
align 排列
6.2 图片与文字的排版
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐方式的效果和文字的对齐一样，只有3种：居左、居右、居中；而相对文字对齐方式是指图像与一行文字的相对位置。
top文字的中间线居在图片上方
middle文字的中间线居在图片中间
bottom文字的中间心啊居在图片底部
left图片在文字的左侧
right图片在文字的右侧
absbottom文字的底线居在图片的底部
absmiddle文字的底线居在图片的中间
baseline英文文字基准线对齐
texttop英文文字上边线对齐
6.3 网页背景图片
1.设置页面背景颜色
主体标记<body>中的bgcolor属性可以设定整个页面的背景颜色。
<body bgcolor="color_value">
与文字颜色相似，也是使用颜色名称或者十六进制值来表现颜色效果。color_value指的就是颜色的值。
2.设置页面背景图片
页面中可以使用JPG或GIF图片作为页面的背景图，通过主体标记<body>中的background属性来实现。它与向网页中插入图片不同，放在网页的最底层，文字和图片等等都位于它的上面。文字、图片等会覆盖背景图片。在默认的情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。
<body background="img_file_url">
img_file_url是指图片文件的路径。
6.4 利用CSS样式在网页中加入图片
1.应用CSS图像边框
2. 使用CSS设置图文环绕
可以使用float、margin和padding属性使正文环绕一个图像。
float：设置元素向左或向右浮动；
margin：设置图像到其他元素的间距；
padding：设置图像到边框的间距；
2709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
