img標籤詳解

twc829發表於2016-05-04

影象標籤<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>



相關文章