HTML插入图片

一、src属性

符号:img
特点:单标签
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>要展示的图片:</p>
			<img src="fish.jpg">
		</body>
</html>

总结:在img标签中引入src属性名即可完成对图片的插入,其中src的属性值为“文件名”或“路径./文件名”,注:要插入的图片必须与html项目在同一文件夹中!此部分在下文会有重点说明。

二、其余属性

属性名属性功能
alt替换文本,当图片无法成功显示时显示alt属性对应属性值的内容
title当鼠标悬停与图片上时,显示title属性对应属性值的内容
width宽度大小,若手动设置宽度则自动匹配合适的高度
height高度大小,若手动设置高度则自动匹配合适的宽度

三、alt用法

说明:当图片因某些原因无法显示时,显示alt属性对应的属性值。
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>要展示的图片:</p>
			<img src="potato.jpg" width="500" alt="土豆">
		</body>
</html>

效果:

要展示的图片:

土豆

四、title用法

说明:若图片正常显示,则当鼠标悬停于图片上时,显示title属性对应属性值的内容
代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>要展示的图片:</p>
			<img src="fish.jpg" width="500" alt="" title="这是一条熟的鱼">
		</body>
</html>

效果:若图片可以正常显示,将鼠标停留在图片上,会出现“这是一条熟的鱼”字样。

五、属性特点

图片标签的属性特点适用绝大多数的HTML标签:

1.标签的属性写在开始标签内部
2.标签内可同时存在多个属性
3.属性间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性间没有顺序之分

六、src路径的讲解

若出现图片无法显示的情况,则多半是src的属性值出现了问题,即路径问题。对于此部分的详细说明可以参考我的另一篇文章——《路径讲解与跨级别插入图片》

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值