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

来源：互联网发布：网络直播议论文编辑：程序博客网时间：2024/06/05 10:27

上一篇博客聊了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>

5：img标签中还有很多属性，这里只是介绍了其中最常用的属性，其他属性如果用到时，我们可以仿照上面的例子进行调试使用。

0 0