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小技巧的一些小技巧

1.怎样定义网页语言(字符集)?             在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认...
  • shipeng22022
  • shipeng22022
  • 2015年07月16日 13:11
  • 2926

HTML与CSS布局技巧总结

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

JavaScript奇淫技巧(一)

if-else简化写法 代码中若出现多层if-else嵌套,代码就会显得臃肿不堪,这时可采用替代方案来浓缩代码。...
  • u010425776
  • u010425776
  • 2016年10月29日 20:21
  • 1224

十大 HTML 5 前端框架

原文  http://www.techug.com/front-frame 作为一名在前端死缠烂打 6 年并且懒到不行的攻城狮,这几年阅过很多从知名到很知名的前端框架,本来想拿 15-20 个...
  • ritterliu
  • ritterliu
  • 2016年03月11日 14:49
  • 2070

html基础回顾--html文本框常见运用技巧及示例

1、html文本框怎么用css变圆角: border-radius属性可以实现元素的圆角。如下css可以实现文本框(单行、多行)的圆角: input[type=text],textarea{bor...
  • u014516981
  • u014516981
  • 2016年12月15日 00:19
  • 710

Firebug折腾记_(2)HTML&CSS定位及调试小技巧

题外话传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本...
  • bomess
  • bomess
  • 2015年08月21日 12:16
  • 2034

HTML 小技巧

水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素...
  • liyuali2012
  • liyuali2012
  • 2017年11月09日 19:42
  • 60

HTML5 文字变化和排版技巧

文字变化和排版技巧 1.1段落效果——使用排版标签 1.1.1设置段落样式的标签 在HTML中利用标签来区分段落,换行可以用标签完成。 1.标签 标签是成对的标签,将置于段落起始初,置于段尾,这样不但...
  • zheng__jun
  • zheng__jun
  • 2016年08月25日 20:11
  • 11780

优化HTML代码的多种技巧

如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。...
  • powertoolsteam
  • powertoolsteam
  • 2016年01月13日 17:31
  • 1667

HTML页面技巧大全

 正好有朋友需要,看到了就把它贴出来,哈哈…… 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 no 可用于Tabl...
  • zhuzhu837_1
  • zhuzhu837_1
  • 2014年08月27日 10:26
  • 343
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML技巧
举报原因:
原因补充:

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