3.2 图像标记
俗话说“一图胜千言”，图片是网页中不可或缺的元素，巧妙地在网页中使用图片可以为网页增色不少。网页支持多种图片格式，并且可以对插入的图片设置宽度和高度。
3.2.1 背景图案的设定
本章节中所讲的背景图案的设定是指利用<body>标签的相关属性为整个页面增加背景图案，这样进行设定的好处在于网页的整个页面能够被背景所美化，当你的选择（背景图片或颜色）适合了你的设计，那么你的网页将瞬间上升一个台阶。
<body>拥有两个配置背景的标签。背景可以是颜色或者图像。
1．背景颜色（bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。例如下面的代码均将背景颜色设置为黑色。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
2．背景（background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。例如下面的代码就分别加载了两个网页背景图片。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
根据以上的代码，可以看出URL可以是相对地址，如第一行代码；也可以是绝对地址，如第二行代码。那么究竟什么是相对地址？什么是绝对地址？它们又有什么区别呢？
相对地址就是说地址是相对存在的，它往往只表现一个网址后面的部分，不带有域名，如：clouds.gif，当有多个域名的时候，对相关的URL使用相对的地址是非常有效的，这样可以保证每一个域名都能够准确地到达相应的页面。
但是相对地址也有一定的缺陷，就是不能保证内容的原创度。当有人来复制我们的内容的时候，很多的时候会把链接一起复制，这个时候我们使用的相对地址就会变成对方的地址了。如对方的站B，那么这个时候URL就会变成B/:clouds.gif，所以说相对地址对网站的版权保护不是很有效。
绝对地址也可以说是一种物理路径，也就是一条完整的路径。绝对地址还能够提升打开的速度。如：http://www.w3school.com.cn/clouds.gif，这样就是一个绝对的网站地址，它能够准确地表达我们要去访问的是哪一个页面。
绝对路径有很多的优势，但是对于不同的网站来说，有一定的劣势。有的网站可能因为改版等多种原因造成了网站域名的变更，这样我们使用的绝对地址就全部变成了死链接了。因此，对于不同的网站，采用哪种URL途径还是需要根据具体的情况来考察的。
提示：如果你打算使用背景图片，你需要谨记以下几点：
① 相对地址和绝对地址各有优势，不同位置给予不同的选择效果可能会更好。
② 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过10KB。
③ 背景图像是否与页面中的其他图像搭配良好。
④ 背景图像是否与页面中的文字颜色搭配良好。
⑤ 图像在页面中平铺后，看上去还可以吗？
⑥ 对文字的注意力被背景图像喧宾夺主了吗？
3.2.2 网页中插入图像
3-4 图像标记IMG
在网页中插入图像，其实是相对简单的一件事，如果使用可视化编辑器来完成，则更加容易，但本章节仅讲解使用标签的操作方法，其具体语法格式如下：
<img src="url" width="值" height="值" />
这里url是图像存储的路径，可以是相对路径，也可以是绝对路径，而width为图片的宽度，height为图片的高度。
例题3-4：插入绝对路径和相对路径图片的标签属性设置方法。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页中插入图片</title>
</head>
<body>
<img src="file:///f|/2017-2018（1）/文档/教材/网页设计与制作/第3章/3-1.JPG" width="244"
height="358" />
<img src="3-1.JPG" width="244" height="358" />
</body>
</html>
在浏览器中预览的效果如图3-4所示。
图3-4 网页中插入图像的执行效果
从上边的src的属性设置中能够看出，绝对路径下，页面是无法随意移动的，每移动一次，就必须更改路径地址，而相对路径下，页面是可以随同图片的存储位置一同移动的，所以相对路径应用较多，也较为方便。
3.2.3 <img> 标签属性的使用
3-5 绝对路径与相对路径
从上一节看出，在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。根据上节中的学习我们知道，要在页面上显示图像，需要使用源属性（src）。src指“source”。源属性的值是图像的URL地址。本节我们学习<img>标签定义的其他属性的使用。
1．图像的取代文字alt
alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
例题3-5：<img>标签属性的使用。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img标签的alt属性的使用</title>
</head>
<body>
<img src="boat.gif" alt="我是替代文本，在图像无法加载时显示">
</body>
</html>
在浏览器中预览的效果如图3-5所示。
图3-5 alt属性的使用效果
从效果来看，在浏览器无法载入图像时，替换文本属性告诉读者它们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
2．设定图像的高度和宽度（height、width）
在上一节中也看到了<img>标签的height和width属性是用于设置图像的尺寸的。例如可以将图像宽度和高度分别设置为200像素，代码如下：
<img src="/i/mouse.jpg" height="200" width="200" />
提示：
① 为图像指定height和width属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此，当图像加载时，页面的布局就会发生变化。
② 不要通过height和width属性来缩放图像。如果通过height和width属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
3．设定图像的边框border
<img>标签的border属性规定图像周围的边框的宽度，就是说，可以增加或去掉图像的边框。其具体语法格式如下：
<img border="value" />
可以通过设置border的不同的值，得到不同粗细的边框。
提示：不推荐使用img元素的border属性，请使用CSS代替。
4．设定图像的对齐方式align
<img>标签的align属性定义了图像相对于周围元素的水平和垂直对齐方式，我们可以通过<img>标签的align属性来控制带有文字包围的图像的对齐方式。可以通过设置图像对齐属性值：left、right、top、middle和bottom，来改变图像的对齐方式。例如，设置文本中的图像的对齐方式为居中显示，代码如下：
<img src="/i/eg_cute.gif" align="middle" />
提示：因为HTML5不支持<img>标签的align属性，所以本节中不再过多地讲解该属性，在后面的学习中可以通过使用CSS来代替。
5．设定图像与文本之间的距离vspace、hspace
<img>标签的hspace和vspace属性可以设置图像周围的空间。hspace和vspace属性可以给图像一个自由呼吸的空间。通过hspace，可以以像素为单位，指定图像左边和右边的文字与图像之间的间距；而vspace值则是图像上面和下面的文字与图像之间的间距。例如，可以设置一个图像hspace和vspace的值为30像素，代码如下：
<img src="w3school.gif" hspace="30" vspace="30" />
提示：不推荐使用img元素的hspace和vspace属性，可以使用CSS样式来代替。