1.4HTML网页之img标签

最新推荐文章于 2025-02-18 21:19:12 发布

原创最新推荐文章于 2025-02-18 21:19:12 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML网页之img标签

前端专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML中的图片标签(img)及其使用方法，包括相对路径、绝对路径和网络路径的应用。同时，讲解了如何使用跑马灯(marquee)标签实现图片滚动效果，以及如何设置图片大小。

1.4HTML网页之img标签

各大网站 — 缺少不了图片
引出：图片标签 img 单标签
格式：当图片无法显示提示的信息
分析：图片的资源路径分为三种
1.相对路径 — 根据当前网页或者某一个网页为基础，来定位某一个图片
2.绝对路径 — 当前电脑的某个盘符为基准
结论：使用绝对路径，也可以找到指定的资源
前提:不能以当前web项目为基准进行查找
3.网络路径: http://www.baidu.com/img/baidu.png

跑马灯标签: marquee direction — left right up down
对图片的大小进行设置：
width 宽度
height 高度
使用像素进行设置例如： 100px 200px
也可以使用百分比进行设置: 例如： 100% 30%

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标签</title>
	</head>
	<body>
		<!--1.相对路径-->
		<img src="img/01.png" />
		<!--<img src="img/西瓜妹2.jpg"/>-->
		<!--2.绝对路径-->
		<img src="D:/logo-201305-b.png" alt="当前图片无法显示"/>
	    <!--3.网络路径 直接可以访问某一个服务器下的资源-->
	    <img src="http://www.baidu.com/img/baidu.png" />
	    <hr/>
	    <!--4.跑马灯标签-->
	    <marquee direction="down">
	    	<img src="img/01.png"/>
	    	<img src="img/02.png"/>
	    	<img src="img/03.png"/>
	    	<img src="img/04.png"/>
	    	
	    </marquee>
	    <hr/>
	    <!--5.对图片可以设置大小-->
	   <img src="img/西瓜妹2.jpg" width="100px" height="200px"/>
	
	
	</body>
</html>