HTML技巧100例

疯子的紫梦 posted @ 2009年7月07日 04:08 in php , 1274 阅读

1. 链接控制

返回前页：使用OnClick="history.go(-1)"，如

返回主页：使用OnClick='top.location.href="../chinamail.html"'，如

2. 链接提示

在链接语句中增加

OnMouseOver="window.status='这里是 ...'; return true" OnMouseOut="window.status=''; return true"

如：去哪儿？ (在点击链接前注意看状态行显示的变化)

3. 背景音乐

显示操作面板：在相应地方加<embed src="aladdin.mid" width="140" height="35" autostart=true controls="middleconsole">

不显示操作面板：在页中任意地方加<embed src="aladdin.mid" hidden=true autostart=true loop=true>

或<embed src="tt.ram" autostart="true" loop="2" width="80" height="30">

对于不支持embed 标签的浏览器，可以改用标签。

4. 设置主页的缺省字符语言为简体中文(适用于Netscape)

在HTML文件的Head部分中加入<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=cn-gb">

5. 链接的不同方式

在帧里显示：在链接处加target="main"语句，其中main为帧名

整页显示：在链接处加target="_top"语句

开新窗口：在链接处加target="resource window"语句，如<A HREF="index.htm" TARGET="resource window"></A>

6. 强制主页每次都不进行缓存，而从服务器上重读

在Head部分加
<MEAT HTTP-EQUIV="Pragma" CONTENT="no-cache">

这样一来，浏览器将不考虑cacke中的内容而强制重新读入您的页面,等于用户使用Reload。

如果在您有计数器的页中使用，不管从什么地方返回这页
计数器都能加一。不过可能造成用户的反感。

如果在BBS程序中使用，可以实现不用Reload就可更新页的功能。

7. 自动刷新

定时刷新：<META HTTP-EQUIV="Refresh" content="10; URL=http://自己的URL">

幻灯片效果：语句类似上面，但在页面1中URL指向页面2，而页面2指向页面3 ...
页面n指回页面1，即可实现循环显示页面的效果

8.提前载入图片

如果您的站点中后面的页有大图形需要显示，您不妨在第一页中提前载入。把语句：
<img src="image.jpg" width=0 height=0> ,其中width,height要设置为0，放在第一页HTML中的任何地方。

如果您的访问者在第一页停留的时间足够长，当他进入第二页时，图象会立即显示出来

9. 自动连接

在预定时间后自动连入另一个指定的页面。
方法：
在<title>...</title>中加入以下一行：
<meta http-equiv="refresh" content="10"; url="otherpage.htm">
其中10代表10秒后自动连接。

10. 自动换行：

在主页中自动换行以适应不同的浏览器或分辨率。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

11. 用单像素的GIF文件控控制文本位置

要想准确的控制HTML中的文本位置，可以做一个1*1的透明图(如Blank.gif)。然后在HTML中加入代码：
<img src="Blank.gif" hspace=100>
改变数字100，即可控制

12. 容器标记

<BLOCKQUOTE></BLOCKQUOTE>标记可以把网页上所有的对象都包括起来，但不能对它加入变量。

13.设定图形大小

为使您的Web页在图形下载完之前，能够立即显示文字内容。
在您的主页中的图形元素中加入文件大小变量：
<img src="image.jpg" width=xxxx height=yyy>
xxx,yyy是您的图形的真实像素

14. 移动文字

这在主页上是常用的，其制作方法很简单。
<marquee>要移动的文字</marquee>
1.移动的方向：<direction=!> ！=left, right
2.移动的方式：<bihavior=!> !=scroll ,side,alternate
3.循环次数：<loop=!> !=次数。若未指定则循环不止。
4 循环速度：<scrollamount=!> !=数

15.如何去掉主页超链接的下划线?

把下列语句放在<head>...</head>之间
<style>
A {text-decoration: none}
}
</style>
<script language="javascript">
var contents = true;
</script>

更简单的是
<style>

</style>

16. 浮动背景（背景图像不滚动）

当你拉住下拉条时，背景不动。（会使浏览速度减慢。:-( ）加入：
<body backgroud="#ffff" bgproperties="fixed">

或用CSS样式表定义：
<style type="text/css">

</style>

17. 让背景图像不平铺
CSS样式表定义：
<style type="text/css">

</style>

18. 测试浏览器类别并自动装入不同的网页

目前微软和网景的浏览器并不能完全兼容所有网页,有的在某种浏览器里非常漂亮,而用其它浏览器查看时却一团糟。如果你需要测试浏览器,可以加入以下JavaScript代码并保存单独一个网页:

<script language="JavaScript">
function TestBrowser(){
ie = ((navigator.appName ==
"Microsoft Internet Explorer") & &
(parseInt(navigator.appVersion) >= 3 ))
ns = ((navigator.appName == "Netscape") & &
(parseInt(navigator.appVersion) >= 3 ))
if (ns) {
setTimeout(''location.href="nn4.htm"'',10);
} else {
setTimeout(''location.href="ie4.htm"'',10);
}
}
</script>

19. 定义本网页的关键字

在网页中加入关键字，可以供某些搜索站台机器人的使用，它们会利用该关键字为你的网站做索引，这样，当别人用关键字搜索网站时，如果你的网页包含该关键字，那么就可以被列出了，定义本网页关键字，可以加入以下代码：
<meta name="keywords" content="html,dreamweaver,flash,css">
content 所包含的就是关键字，你可以自行设置。
这里有个技巧，你可以重复某一个单词，这样可以提高自己网站的排行位置，如:
<meta name="keywords" content="dreamweaver,dreamweaver,dreamweaver">

20. 在网页中加入E-mail链接并显示预定的主题

<a href=mailto:cnshell@163.com?subject=hello>

21. 隐藏在状态栏里出现的链接信息

当指向一个链接时，该链接的信息会出现在浏览器状态栏里，如果需要隐藏信息，可以如下设置：
<a href="http://www.yy0736.com" onMouseOver="window.status='none';return true">test</a>
如果想要指向一个链接时，浏览器状态栏里出现特定的信息，把none 改成你需要的文字即可。

22. 在网页中将表单提交给自已的电子邮箱

表单提交需要CGI程序的支持，但你也可以利用E-mail 提交，当你设计好表单后，把action 内容加入邮件地址即可，如下：
<form method="post" action="mailto:cnshell@163.com" enctype="text/plain">

23. 隐藏免费计数器的的图标

许多网友使用免费计数器，它能帮助你分析网站的流量，如果你想隐藏该服务图标，可以把服务代码中的width=88 height=31都改为1即可。

24. 在网页中加入最后修改日期

在body 中加入以下代码即可：
<script Language="JavaScript">
document.write
("最后修改日期" + document.lastModified);
</Script>

25. 打开一个新的浏览器窗口并设置窗口的属性

如果你需要在载入站点的同时,再打开另一个新窗口,加入以下代码即可:

<script language="JavaScript">

</script>

期中pop.htm可以设置为你的htm文件,对于设置新窗口的属性,对照以下设置:

popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');

width:宽,height:高,resizable:是否允许访客缩放新窗口,scrollbars:如果文本超过一屏,是否生成滚动条,status:是否显示状态栏,menubar:是否显示菜单,location:是否显示地址栏.

以上所有属性使用格式为:属性=yes或者no.而width和height两个属性为:width=#pixels,height=#pixels.

26.怎样判断服务器使用的操作系统?

在浏览器地址栏里,输入要察看的服务器地址,一定要包含目录和文档名字,然后回车,出现请求页面,试着把文档名改为大写格式,如果返回该页面不存在,那么可能该服务器使用的操作系统为unix或macintosh,如果页面内容返回,那么可能该服务器为windwos操作系统,因为windows对大小写不敏感.

27. 怎样提高站点在搜索引擎中被搜索到的机会?

当你把自己站点登记到搜索引擎中后,并不表示你的站点就会被经常搜索到,如何提高这个几率呢,很简单,你的主页一般会有一个标题,一般设置在<title></title>中间,这时,你可以在设置完标题后,跟着把关键字也设置在这里,比如:
<title> 宇风多媒体-china,love,dhtml,yufeng21,yahoo</title>.因为搜索引擎会首先察看站点的标题,并把标题作为你站点的关键字,当你把关键字也设置在了标题中后,搜索引擎也会加入这些关键字,这比其它所有的方法都好,唯一缺点,你站点标题变长了.

28. 如何测试网站的下载速度?

准备一个能读秒的表,比如跑步表,这样精度高些,当然也可以使用普通的表.

首先我们测试纯文本的下载时间,打开浏览器,关闭下载图片功能,然后连接上网,在地址栏输入站点地址,回车后,计时开始,当全部文本内容下载完后,停止计时.

如果你要测试整个站点下载速度,打开图片下载功能,如果你站点含有JavaScript,也要在浏览器选择为支持,同上,打入地址,回车,计时开始,当所有内容下载完后,停止计时.

经过以上两种测试,你就会对自己站点的连接下载速度,作到心中有数了.

29. 如何让站点自动跳转到另一页?

加入以下代码到HTML文件中即可：
<meta http-equiv="refresh" content="5;url=http://www.PHP100.com/index.htm">
content中的"5"为停留的秒数，http://www.PHP100.com/index.htm 是将要跳转的页面。

30.怎样让广告随机出现?

当你想展示许多广告,但页面空间不够时,你可以让广告随机出现,你只需要加入一段代码.网上有这样的代码，搜索……