初学HTML用法大全指导(二)html对图像的设置

本文主要是介绍初学HTML用法大全指导(二)html对图像的设置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上一篇博客聊了html页面中对文本的设置，这一篇博客我们来聊一聊web前端中的网页中对图像的设置，我们现在每天浏览的五花八门高大上绚丽无比的网站其中都离不开图片的支持，如果离开了图片，web网页会大大丢失色彩。其中html中用<img>标签来设置web页面中的图片。

1：初步在网页中加载html图片用src属性来表示路径：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初步学习图片加载</title>
</head>
<body bgcolor="gray"><img src="html.jpg"/>
</body>
</html>

2：设置图片的相对路径和图片的绝对路径，及设置图片的尺寸。其中相对路径的概念是：是从当前路径开始的路径；绝对路径：是从电脑磁盘符开始的路径。在html脚本语言中常常使用相对路径方法。height：设置图片的高；width：设置图片的宽度。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对路径和绝对路径</title>
</head>
<body>
<h1>相对路径</h1>
<div>当前路径:<br/><img src="html.jpg" height="40" width="40"/>
</div>
<div>上一层路径:<br/><img src="../html.jpg" height="80" width="80"/>
</div>
<h1>绝对路径</h1>
D盘下的路径:<br/><img src="D://html.jpg" height="120" width="120"/>
</body>
</html>

3：用alt属性为图像设置替换文本。如果图片存在则显示图片，否则显示alt属性中的文字去代替图片。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对路径和绝对路径</title>
</head>
<body>
<h1>相对路径</h1>
<div>当前路径不存在图片:<br/><img src="html.jpg" alt="html图片" height="40" width="40"/>
</div>
<div>上一层路径存在图片:<br/><img src="../html.jpg" alt="html图片" height="80" width="80"/>
</div>
<h1>绝对路径</h1>
<div>
D盘下的路径存在图片:<br/><img src="D://html.jpg" alt="html图片" height="120" width="120"/>
</div>
<div>
D盘下的路径不存在图片:<br/><img src="D://html1.jpg" alt="html图片" height="120" width="120"/>
</div>
</body>
</html>

4：用title属性为图片设置标题。鼠标放在图片上时则显示title属性里面赋予的值。border属性设置图片的边框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片设置标题</title>
</head>
<body>
<img src="../html.jpg" height="300" width="250" title="html代码图片" alt="html代码图片" border="3px;"/>
</body>
</html>