第九章 在网页中使用图像

9.3 HTML内嵌图像

<img src="image.jpeg">

图片的格式有很多、

9.3.1 给图像添加代替文本

<img src="image.jpeg" alt="This is an apple">

alt属性可以用来描述图片的内容，而且不会显示在网页上

9.4.1 文本和图像对齐

要修改内嵌图像与文本的对齐关系，可以使用CSS属性vertical-align

这个属性的取值可以是：

baseline: 图像的下边缘和文本的基线对齐，这是默认设置

top: 图像的上边缘和行的上边缘对齐

middle:图像的中心和父元素中小写字母的中间对齐

bottom：图像的下边缘和行的下边缘对齐

text-top:图像的上边缘和父元素中文本的上边缘对齐

text-bottom:图像的下边缘和父元素中文本的下边缘对齐

sub:将图像视为下标

length:将图像上移或下移指定的距离

sup:将图像视为上标

<img src="img.jpg" style="vertical-align:bottom;">

9.4.2  将文本绕图像

<img src="img.jpg" style="float:left;">

这样图像就会在文字的左边浮动了 

禁用文字绕排：

  可以使用属性clear,它有以下取值

left: 不在将元素放在左对齐图像右边

right:不在将元素放在右对齐图像左边

both:都是

<img src="img.jpg" style="float:left">
<p style="clear:left">
.....
</p>

9.4.3 调整图像周围空白区域大小

  

<img src="img.jpg" style="float:left padding:50px">

这样这个图像就会在左边浮动，而且跟左边框相距50像素

9.6.1 图像尺寸和缩放

<img src="img.jpg" style="float:left;height:100px;width:200px;">

将图像用作背景

<div style="background-image;url('black_rook.png');
height=200px;width=120px">
....
</div>