图像标签<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>
2434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
