首页 > 代码库 > 今天学习image在html中的应用
今天学习image在html中的应用
今天学习image在html中的应用
上次在学习超级链接的使用中有一小问题，是在添加网址中href=http://www.mamicode.com/“http://www.baidu.com“
中不能忘记http：//，否则链接会出现莫名错误。
接下来学习image
网页中的图片多数支持gif/bmp/jpeg/png/tiff格式，最广泛的是gif和jpeg
Gif像素大小为256色
Jpeg最大像素达到1670万色
Png图片具有不失真，传输效率高，支持透明在网页中很流行
网页中图片路径有绝对路径和相对路径之分。
在网页中插入图片用
|
属性 |
值 |
描述 |
|
Alt |
Text |
定义图形简短的描述 |
|
Src |
url |
要显示图形的url |
|
Height |
Pixels% |
定义图形高度 |
|
Ismap |
url |
把图像定义为服务器端的图形映射 |
|
Usermap |
url |
作为客户端图形映射的一幅图像 |
|
Vspace |
Pixels |
定义图像顶部和底部的空白 |
|
width |
Pixels% |
定义图像的宽度 |
用于插入图像的语句
<img src=http://www.mamicode.com/”图片路径”>
这里的图片路径是指图片的储存路径，如c：image/1.png
路径可以是相对路径也可以是绝对路径
在网页中插入一张图片
<img src=http://www.mamicode.com/”1.jpg”>
从不同位置插入图片
{
来自一个文件夹的图片;
<img src=http://www.mamicode.com/”image/1.jpg”>
}
来自百度的图片:
{
<img src=http://www.mamicode.com/”http://baidu.com/image/0545151151.jpg”>
}
定义图片的高度和宽度
<img src=http://www.mamicode.com/”1.jpg” width=”500px” height=”300px”>
设置图片的提示字
<img src=http://www.mamicode.com/”1.jpg” alt=“这张图片来自百度”>
将图片设置成网页背景
<body background=”image/1.jpg”>
<h3>图像背景</h3>
排列图像像，会用到几个属性
Align=“bottom/middle/top“
在网页中排列图像
<p>图像<img src=http://www.mamicode.com/”1.jpg” align=“bottom“>在文本中
<p>图像<img src=http://www.mamicode.com/”1.jpg” align=“middle“>在文本中
<p>图像<img src=http://www.mamicode.com/”1.jpg” align=“top“>在文本中
注意在浏览网页中出现了图片不显示，一定要仔细检查图片路径。
如果在同一个文件中反复使用同一个图片，最好使用相对路径，不要使用绝对路径或者url，因为使用相对路径，浏览器只下载一次，再次使用时只显示即可。使用绝对路径每次都需要下载，大大降低了图像的显示速率。
附:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
在网页中插入一张图片<br/>
<img src="http://www.mamicode.com/image/0.jpg"><br/>
从不同位置插入图片<br/>
来自一个文件夹的图片;<br/>
<img src="http://www.mamicode.com/0.jpg"><br/>
来自百度的图片:<br/>
<img src="http://baidu.com/image/0545151151.jpg"><br/>
定义图片的高度和宽度<br/>
<img src="http://www.mamicode.com/0.jpg" width="500px" height="300px"><br/>
设置图片的提示字<br/>
<img src="http://www.mamicode.com/0.jpg" alt="这张图片来自百度"><br/>
将图片设置成网页背景<br/>
<!-- <body background="0.jpg"><br/> -->
<h3>图像背景</h3>
在网页中排列图像
<p>图像<img src="http://www.mamicode.com/0.jpg" align="bottom">在文本中</p><br/>
<p>图像<img src="http://www.mamicode.com/0.jpg" align="middle">在文本中</p><br/>
<p>图像<img src="http://www.mamicode.com/0.jpg" align="top">在文本中</p><br/>
</body>
</html>
今天学习image在html中的应用