img标签详解

最新推荐文章于 2024-10-08 23:54:12 发布

twc829

最新推荐文章于 2024-10-08 23:54:12 发布

阅读量5.1k

点赞数 3

分类专栏： HTML

本文链接：https://blog.csdn.net/twc829/article/details/51318511

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

图像标签<img>用于向用户展示图片

注意：所有的标签都可以有属性

如：<img src="img/fishing.jpg" alt="Mr Green's Fish Emporium" width="100%">

其中，img是图像标签；之后都是属性：src是存储图片的源地址，且图片存放在与HTML文件同一路径下的img文件夹下，width和height是图片的宽度和高度（若指定width="100%"，表示不管图片尺寸，将图片设置为浏览器宽度的100%，自动按照比例确定图片高度），alt是提供替代图片的信息，使屏幕阅读器能获取关于图片的信息，即对图片作简要说明，这不会影响图片显示；

注意：这些图片设置可以在CSS实现，分为可视化部分、结构化部分，HTML用于结构构建，CSS用于视觉设计，推荐在CSS中将图片的宽度设置为100%

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
	</head>
	
	<body>
		<img src="img/fishing.jpg" alt="Mr Green's Fish Emporium" width="100%">
		
		<h1>Welcome to my smelly fish shop</h1>                      
		<p>We sell the smelliest fish on the planet</p>
	
		<h2>Types of Fish We Sell</h2>
		<h3>Freshwater Fish</h3>
		<p>We are experts in catching many types of freshwater fish...</p>
		<h3>Saltwater Fish</h3>
		<p>We are experts in catching many types of Saltwater fish...</p>
		
		<h2>About Us</h2>
		<p>Mr Green's Smelly Fish Emporium prides itself on catching, preparing and delivering
		the smelliest fish right to your doorstep. Whether you like to cook them, feed them to
		your cat, or just hide them in your unruly neighbours porch, Mr Green has it covered!</p>
		
		<h2>Contact Us</h2>
		<p>You can contact Mr Green in various ways...</p>
		<h3>By phone</h3>
		<p>222-222-Fish</p>
		<h3>By Email</h3>
		<p>twcyq@mrgreenfish.com</p>
		<h3>By carrier pidgeon</h3>
		<p>To do this, order your pidgeon at www.mrgreenfish.com</p>
	</body>
</html>