HTML技巧

原创 2012年03月28日 11:05:30

如果一个HTML文档包含10个图像,那么为了正确显示这个页面,需要加载11个文件。加载图像是需要时间的,所以请谨慎使用图像。

例如:
背景图像

	<body background="./images/background.jpg">
		<h3>
			Look: A background image!
		</h3>
		<p>
			Both gif and jpg files can be used as HTML backgrounds.
		</p>
		<p>
			If the image is smaller than the page, the image will repeat itself.
		</p>
	</body>
</html>

这个例子说明了在HTML页面中如何添加背景图像。
对齐图像

<html>
	<body>
		<p>
			An image
			<img src="./images/xhtml.gif" align="bottom" width="100" height="50">
			in the text
		</p>
		<p>
			An image
			<img src="./images/xhtml.gif" align="middle" width="100" height="50">
			in the text
		</p>
		<p>
			An image
			<img src="./images/xhtml.gif" align="top" width="100" height="50">
			in the text
		</p>
		<p>
			Note that bottom alignment is the default alignment
		</p>
		<p>
			An image
			<img src="./images/xhtml.gif" width="100" height="50">
			in the text
		</p>
		<p>
			<img src="./images/xhtml.gif" width="100" height="50">
			An image before the text
		</p>
		<p>
			An image after the text
			<img src="./images/xhtml.gif" width="100" height="50">
		</p>
	</body>
</html>

这个例子说明了在文字中如何对齐图像。
浮动图像

<html>
	<body>
		<p>
			<img src="./images/xhtml.gif" align="left" width="100" height="50">
			A paragraph with an image. The align attribute of the image is set to
			"left". The image will float to the left of this text.
		</p>
		<p>
			<img src="./images/xhtml.gif" align="right" width="100" height="50">
			A paragraph with an image. The align attribute of the image is set to
			"right". The image will float to the right of this text.
		</p>
	</body>
</html>

这个例子说明了如何让图像浮动在段落的旁边。
调整图像大小

<html>
	<body>
		<p>
			<img src="./images/hackanm.gif" width="20" height="20">
		</p>
		<p>
			<img src="./images/hackanm.gif" width="45" height="45">
		</p>
		<p>
			<img src="./images/hackanm.gif" width="70" height="70">
		</p>
		<p>
			You can make a picture larger or smaller changing the values in the
			"height" and "width" attributes of the img tag.
		</p>
	</body>
</html>

这个例子说明了如何改变图像的大小。
图像的交互文本

<html>
	<body>
		<img src="./images/prev.gif" alt="Last Page">
		<p>
			Text-only browsers will only display the text in the "alt" attribute,
			which is "Last Page".Note that if you hold the mouse pointer over the
			image it will display the text.
		</p>
	</body>
</html>

这个例子说明了如何为图像创建交互文本。将鼠标放在图像上,将能够看到这个文本。
图像链接:

<html>
	<body>
		<p>
			You can also use an image as a link:
			<a href="back.htm"> <img border="0" src="./images/next.gif">
			</a>
		</p>
	</body>
</html>

这个例子说明了如何使用图像作为链接。
图像地图

<html>
	<body>
		<p>
			Click on one of the planets to watch it closer:
		</p>
		<img src="./images/planets.gif" width="145" height="126"
			usemap="#planetmap">
		<map id="planetmap" name="planetmap">
			<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
			<area shape="circle" coords="90,58,3" alt="Mercury"
				href="mercury.htm">
			<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
		</map>
		<p>
			<b>Note:</b> We use both an
			<b>id</b> and a
			<b>name</b> attribute in the map tag because some versions of
			Netscape don't understand the id attribute.
		</p>
	</body>
</html>

这个例子说明了如何创建带有可点击区域的图像地图。每个可点击区域是一个超级链接。
将图像转化为图像地图

<html>
	<body>
		<p>
			Move the mouse over the image, and look at the status bar to see how
			the coordinates change.
		</p>
		<p>
			<a href="ismap.htm"> <img src="./images/planets.gif" ismap
					width="146" height="126"> </a>
		</p>
	</body>
</html>

这个例子说明了如何将图像转化为图像地图。将鼠标在图像上移动,状态栏将显示坐标。


相关文章推荐

html js的一些实用技巧

  • 2011年07月28日 10:41
  • 115KB
  • 下载

HTML技巧100例

  • 2009年11月16日 16:52
  • 47KB
  • 下载

html布局:定位position使用技巧

布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,今天我们就说说定位在布局中的使用技巧和注意事项。...

HTML小技巧:将table边框改为细线

  • 2013年06月03日 14:09
  • 28KB
  • 下载

22个HTML5的初级技巧

  • 2011年12月24日 10:10
  • 183KB
  • 下载

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...

VB技巧_html格式

  • 2008年11月01日 20:06
  • 41KB
  • 下载

Html标签使用技巧

  • 2008年11月25日 16:54
  • 5KB
  • 下载

HTML滚动条样式代码及使用技巧

html中滚动条属性设置 scrollbar属性、样式详解 1、 overflow内容溢出时的设置(设定被设定对象是否显示滚动条)     overflow-x水平方向内容溢出时的设置    ...

HTML 代码优化原理与技巧.rar

  • 2012年08月14日 11:30
  • 5.09MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML技巧
举报原因:
原因补充:

(最多只允许输入30个字)