HTML网页中的图像
1、第六章 网页中的图像<img>
图片是网页中不可或缺的元素，网页中巧妙地使用可增色不少。
6.1.1 网页中支持的图片格式
网页中可以使用GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，主要用的是GIF和JPEG。
6.1.2 图像中的路径
HTML文档支持文字、图片、声音、视频等媒体格式，除文本格式是写在HTML中的，其它都是嵌入式的，HTML只记录这些文件路径。
2、绝对路径
例如：在E盘的webs目录下的images下有一个tp.jpg图像，那么它的路径就是E:\webs\images\tp.jpg，这种完整描述文件位置的路径就是绝对路径。表示方法如下：
E：\webs\images\tp.jpg
如果使用了绝对路径进行图片链接，在本地电脑上会一切正常。上传到服务器后，就会不正常。必须从webs文件夹开始，放到服务器的E盘。
如果是链接到其他的站点资源，必须要用绝对路径。
2、相对路径
以当前位置为参考点，相对于目标的位置。表示方法如下：
images/tp.jpg
在相对路径中，“..”表示上一级目录。“../..”表示上级的上级目录。
3、2.1 案例1--插入图像
src属于指定图像源文件的路径,是img必不可少的属性,语法如下:
<img src=”图像路径”>
4、例6.1 在网页中插入图像
<!DOCTYPE html>
<html>
<head>
<title>插入图片</title>
</head>
<body>
<img src="F:/timg.gif">
</body>
</html>
5、2.2 案例2--从不同位置插入图像
例6。2 从不同位置插入图像
<!DOCTYPE html>
<html>
<body>
来自一个文件夹的图像：
<img src="F:/u=3571610415,1645332962&fm=26&gp=0.jpg">
来自baidu的图像:
<img
src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.g
if"/>
</body>
</html>
6、3编辑网页中的图像
<!DOCTYPE html>
<html>
<head>
<title>设置图像的高度和宽度</title>
</head>
<body>
<img src="F:/u=1721267607,1804734888&fm=26&gp=0.jpg">
<img src="F:/u=2459498676,1022768213&fm=26&gp=0.jpg"width="200">
<img src="F:/u=509326540,2278894529&fm=26&gp=0.jpg"width="200
height="300">
</body>
</html>
设置图像的高度和宽度
7、3.2设置图像的提示文字
图像的提示文字作用：当浏览网页时，如图像下载完成，鼠标停在图片上，会显示提示文字；未下载完成则显示提示文字。
<!DOCTYPE html>
<html>
<head>
<title>图片文字提示</title>
</head>
<body>
<img src="F:/u=1721267607,1804734888&fm=26&gp=0.jpg" alt="未加载完成时
显示的替代文" title="白云悠悠">
</body>
</html>
8、3.3 案例5—将图片设置为网页背景
<!DOCTYPE html>
<html>
<body>
<img src="F:/u=1721267607,1804734888&fm=26&gp=0.jpg" >
<h3>图像背景</h3>
</body>
</html>
9、3.4 案例六—排列图像
<!DOCTYPE html>
<html>
<body>
<h2>未设置对齐方式的图像</h2>
图像<img src="F:/timg.gif">在文本中
<h2>已设置的对齐方式的图像：<h2>
图像<img src="F:/u=1721267607,1804734888&fm=26&gp=0.jpg"
align="bottom">在文本中
图像<img src="F:/u=1721267607,1804734888&fm=26&gp=0.jpg"
align="middle">在文本中
图像<img src="F:/u=1721267607,1804734888&fm=26&gp=0.jpg"
align="top">在文本中
</body>
</html>
