html之插入图片

来源：互联网发布：七骑士亚服充值淘宝编辑：程序博客网时间：2024/05/21 11:15

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>

0 0