查看“插入图像”的源代码

== 图像元素img ==
img 元素向网页中嵌入一幅图像。img元素是行内元素。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
*[[文件:w3-22.png]]

===支持类型===
img种常用的三个图片格式：'''png、jpg、gif'''，想要展示色彩丰富的高品质图片，可以使用jpg格式，但是体积较大；一般使用png格式，体积较小且支持保存透明背景；如果需要展示动画图片，可以使用gif图片格式。

==图像属性==
===src路径===
*<img src="图像URL" [其它各种可选属性] />
  src属性指定图像路径及文件名，文件必须是jpeg、jpg、gif或png格式。
  src可以是绝对 URL - 指向其他站点（比如 src="http://www.example.com/"）
  src也可以是相对 URL - 指向站点内的文件（比如 src="/i/image.gif"）
*源代码：
 <nowiki><html>
   <body>
     <p>这张图片来自文件夹i：<img src="/i/ct_netscape.jpg" />
     </p>
     <p>来自 W3School.com.cn 的图像：<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
     </p>
   </body>
 </html></nowiki>
*试一试：[http://www.w3school.com.cn/tiy/t.asp?f=html_image2 W3C实例]
*[[文件:w3-23.png]]

相对路径的设置分为以下3种∶

图像文件和html文件位于同一文件夹∶只需输入图像文件的名称即可，如<img
src="logo.gif"/>。

图像文件位于html文件的下一级文件夹∶输入文件夹名和文件名，之间用"/"
隔开，如<img src="img/img01/logo.gif"/>。

图像文件位于html文件的上一级文件夹∶在文件名之前加入"../"，如果是上
两级，则需要使用"../.."，以此类推，如<img src="../logo.gif"/>。

===alt属性===
*alt：alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，给用户提供一些提示信息。该属性虽然是标签的必备属性，但是省略该属性并不会发生错误，但是为方便搜索引擎抓取到图片，同时也为使用屏幕阅读器的残疾人提供方便，推荐网页开发人员在引入图像中都使用这个属性。

*[[文件:w3-25.png]]
*试一试：[http://www.w3school.com.cn/tiy/t.asp?f=html_image_align W3C实例]
*源代码:
 <nowiki><html>
 <body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="/i/eg_cute2.gif" alt="卡通图片卡哇伊" > 在文本中</p>
</body>
</html></nowiki>

==图像的宽度和高度==
*title：指定当鼠标指向图片时显示的提示信息。
*width：设置图像的宽度；
*height：设置图像的高度；
*为了保证图片不失真，最好不要同时定义它的宽度和高度

*[[文件:w3-26.png]]
*试一试:[http://www.w3school.com.cn/tiy/t.asp?f=html_image_size W3C实例]
 <nowiki><html>

<body>

<img src="/i/eg_mouse.jpg" width="50%" height="50%">

<br />

<img src="/i/eg_mouse.jpg" width="100%" height="100%">

<br />

<img src="/i/eg_mouse.jpg" width="20%" >

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>
</html></nowiki>

*为了保证图片不失真，最好不要同时定义它的宽度和高度

往往容器的大小和位置是在页面布局时就已经确定好的，后续一般不会随意改变，建议在上传图片时事先将图片剪切来匹配容器大小，或者在引用图片时调整图片的样式大小为容器的100%，同时对容器使用overflow.∶hidden属性，避免图像占据过多的空间。

[[文件:cloud201028.png|600px]]

 <nowiki>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"><title></title>
	<style type="text/css">
		.box{	width:100px;
			height: 100px;
			border: 1px solid;}
	</style>
</head>
<body>
	<div class="box"><img src="img/h5.jpg" ></div>
</body>
</html>
</nowiki>

下一节 [[图像样式]]