<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>插入图片</title>
</head>
<body>
<!--<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
alt 属性用来为图像定义一串预备的可替换的文本。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。-->
<h2>插入一张泰山图片</h2>
<img border="0" src="/images/mountain.jpg" alt="泰山" width="400" height="300"/>
<h2>插入一张图像</h2>
<img src="smiley.gif" alt="Smiley face" width="40" height="40"/>
<h2>插入一张动态图像</h2>
<img src="hackanm.gif" alt="Computer man" width="100" height="100"/>
<h2>插入文件夹中的图像</h2>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"/>
<h2>百度图片中的图像</h2>
<img src="http://www.baidu.com/images/logo.png" alt="baidu.com" width="200" height="200"/>
<!-- 排列图片 -->
<h3>默认对其的图像（align="bottom"）</h3>
<p>春天在哪里。<img src="smiley.gif" alt="Smiley face" width="40" height="40"/>春天在这里。</p>
<h3>图片使用 align="middle":</h3>
<p>小螺号<img src="smiley.gif" alt="Smiley face" align="middle" width="40" height="40"/>滴滴滴吹</p>
<h3>图片使用 align="top"</h3>
<p>屁股翘翘<img src="smiley.gif" alt="Smiley face" align="top" width="40" height="40"/>心怦怦跳</p>
<!-- 浮动图片 -->
<p>
把一张图片插入到文本中，图片浮动在文本的左边
<img src="smiley.gif" alt="Smiley face" style="float:left" width="40" height="40"/>
</p><br/><br/>
<p>
把一张图片插入到文本中，图片浮动在文本的右边
<img src="smiley.gif" alt="Smiley face" style="float:right" width:"40" height="40"/>
</p>
<!-- 设置图像链接 -->
<p>
创建图片链接：
<a href="http://www.baidu.com"><img border="5" src="smiley.gif" alt="百度" width="40" height="40"/></a>
</p>
<p>
无边框的图片链接：
<a href="http://www.baidu.com"><img border="0" src="smiley.gif" alt="百度" width="40" height="40"/></a>
</p>
<!-- 创建影像链接 -->
<p>点击图片中某一位置</p>
<img src="planets.gif" width="200" height="150" alt="Planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,100,200" alt="Sun" href="ssssdun.html">
<area shape="circle" coords="120,60,5" alt="Mercury" href="baidu.html">
<area shape="circle" coords="130,60,14" alt="Venus" href="jindpong.html"
</map>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
