GIF、JPEG、PNG是最符合在网页设计中使用的格式,但是要想将它们呈现在网页中,必须将它们链接在网页,这是通过HTML中添加到图片的路径链接来实现的。
使用html中的img可以实现该功能
图片的源地址(src属性)
<img src="文件路径">
实战:
<!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:///C|/Users/hasee/Pictures/12.jpg" />
</body>
</html>
结果:
也可以使用绝对路径,加载网页上的图片地址也可以
图片大小
<!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>
<img src="file:///C|/Users/hasee/Pictures/12.jpg" width="100" height="200" >
<img src="file:///C|/Users/hasee/Pictures/12.jpg" width="50%" height="50%" >
<body>
</body>
</html>
前面那个是具体大小后者是屏幕占比。
图片的说明(title属性)
title属性是对图片的文字说明,如果鼠标放在图片上稍作停留,title属性的值就会以浮动的形式显示出来
<!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>
<img src="../Pictures/12.jpg" title="daydayup" width="50%" height="50%" >
<body>
</body>
</html>
图片的备注说明(alt属性)
alt属性用于链接的图片不存在的情况,或者一些用户为了提高浏览速度而关闭了图片下载,alt很重要
<!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>
<img src="../Picture/12.jpg" title="daydayup" alt="hello" width="50%" height="50%" >
<body>
</body>
</html>