欢迎光临
我们一直在努力

HTML | 引用插入图片

当我们想在HTML中插入图片时可以使用<img>标签,学习使用<img>标签前,必须掌握相对路径与绝对路径的知识。

图片的引用

下面是通过相对路径或绝对路径获取图片的方法,后面是文档的目录结构,结合参考。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是一个标题</title>
	</head>
	<body>
	<!-使用相路径获取图片->
	<img src="img/11.jpg"  width="100px"/><br />
	<img src="./img/11.jpg" width="125px"/><br />
	<img src="/HTML/img/11.jpg" width="150px"><br /><hr />
	
	<!-使用绝对路径获取图片->
	<img src="file:///C:/Users/15238/Documents/HBuilderProjects/HTML/img/11.jpg" />
	<!-注意,想要显示绝对路径图片只能本地访问html文件!通过web无法访问本地资源->
	</body>
</html>

图片的属性

<img>标签具有以下几个基本属性

  • src="地址",设置引用图片的地址
  • alt="描述文字",设置图片的描述文字
  • width="像素值或百分数",设置图片的宽度
  • height="像素值或百分数",设置图片的高度
<!-图片的属性->
<img src="img/11.jpg"  width="100px" height="100px" alt="散人超可爱" /><br />
赞(2) 打赏
未经允许不得转载:散人研 » HTML | 引用插入图片
分享到: 更多 (0)

评论 抢沙发

7 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏