65条网页制作常用技巧整理

苗疆三刀的随手记

2014-09-18

自从学习WEB开发起，自己喜欢平时把常用的技巧和遇到的问题都收集起来。这个文档主要含在制作网页时常用的一些技巧。中间大多数是html/js/css等技巧。大家可以去下载PDF的收藏：http://www.docin.com/p-45120957.html

====================

1.将彻底屏蔽鼠标右键
oncontextmenu="window.event.returnvalue=false"
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:-Disabled"> 关闭输入法

8. 永远都会带着框架
<script language="javascript">

</script>

9. 防止被人frame
<SCRIPT LANGUAGE=javascript>

</SCRIPT>

10. 网页将不能被另存为
<noscript><iframe src=*.html></iframe></noscript>

11. <input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ http://www.51js.com/'";>

12.删除时确认
<a href='javascript:if(confirm("确实要删除吗?"location="boos.asp?&areyou=删除&page=1"'>删除</a>

13. 光标是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

14. 最小化、最大化、关闭窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Close"></OBJECT>
<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>

15.屏蔽功能键Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift键!"; //可以换成ALT　CTRL
}
document.onkeydown=look;
</script>

16. 网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">

17.怎样让表单没有凹凸感？(只是显示一条线)
<input type=text style="border:1 solid #000000">
或<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:1 solid #000000"></textarea>

18.让弹出窗口总是在最上面:
<body onblur="this.focus();">

19.不要滚动条?
让竖条没有: <body style='overflow:-Scroll;overflow-y:hidden'> </body>
让横条没有: <body style='overflow:-Scroll;overflow-x:hidden'> </body>
两个都去掉：<body scroll="no"> </body>

20.怎样去掉图片链接点击后，图片周围的虚线？
<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

21.电子邮件处理提交表单
<form name="form1" method="post" action="mailto***@***.com" enctype="text/plain">
<input type=submit>
</form>

22.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()

23.如何设定打开页面的大小
<body onload="top.resizeTo(300,200);">
打开页面的位置<body onload="top.moveBy(300,200);">

24.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<style>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</style>

25.获得一个窗口的大小
document.body.clientWidth; document.body.clientHeigh

26. TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> </textarea>

27.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

28.在规定时间内跳转
<META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

29. 网页是否被检索
<meta name="ROBOTS" content="属性值">
其中属性值有以下一些:
属性值为"all": 文件将被检索，且页上链接可被查询；
属性值为"none": 文件不被检索，而且不查询页上的链接；
属性值为"index": 文件将被检索；
属性值为"follow": 查询页上的链接；
属性值为"noindex": 文件不检索，但可被查询链接；
属性值为"nofollow": 文件不被检索，但可查询页上的链接。

30.变换网页的鼠标光标 ,IE光标,收藏夹图标
<body style="cursor: url(<link rel="bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

31.实现在任务栏显示小图标的效果？ (要使用绝对地址)
地址栏地址前显出小图标，添加到收藏夹后也在收藏栏中显示图标，这样很好的与其它站点有了区别。达到这个效果，先需做出这个图标文件，图像为16*16像素，不要超过16色。文件格式为ico，然后上传至你的网站。到文件的<head>和</head>之间<link rel="SHORTCUT ICON"href="<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 设定这是 HTML 文件及其编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，或者不设编码也可，纯英文网页建议使用 iso-8859-1。 <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> 这只表示该网页由什么编辑器写的。 <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com"> 这行较为实用，能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。

33.如何在网页中实现flash的全屏播放？
只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100％即可，当然也可以在Flash导出HTML文件的设置中进行设置，方法是：打开File菜单；选Publish Settings弹出导出设置对话框；在HTML标签下的Dimensions选项,下拉后选中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。

35. 自动显示主页最后更新日期.
<script>
document.write("最后更新日期："+document.lastModified+""
</script>

36. 如何让滚动条出现在左边？
<html dir="rtl">
<body bgcolor="#000000" text="#FFFFFF">
<table height=18 width=212 align=center bgcolor=#FFFFFF dir="ltr" cellspacing="1" 　cellpadding="0">
<tr>
<td bgcolor="#FF0000" >是不是你的滚动条在左边啊</td>
</tr>
</table>

37. 关于<!DOTYPE>的说明解释
〈!DOCTYPE HTML PUBLIC'-//W3C//DTD HTML 4.01//EN'>是声明HTML文件的版本信息。

38. 禁止鼠标右键查看网页源代码
<SCRIPT language=javascript>
function click()
{if (event.button==2) {alert('你好,欢迎光临！') }}
document.onmousedown=click
</SCRIPT>
鼠标完全被封锁,可以屏蔽鼠标右键和网页文字。
< body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

39,按钮查看网页源代码
<input type="BUTTON" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href' name="BUTTON">

40. <IFRAME>给网页中插入网页
只有在浏览器不支援 iframe 标记时才会显示，如<noframes>一样，可以放些提醒字句之类的话。<iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>
src="iframe.html"网页来源，必要加上相对或绝对路径。
name="test"这是连结标记的 target 参数所需要的。
align="center"可选值为 left, right, top, middle, bottom，
width="300" height="100"框窗的宽及长，以 pixels 为单位。
marginwidth="1" marginheight="1"该插入的文件与框边所保留的空间。
frameborder="1"使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）
scrolling="Yes"使用 Yes 表示容许卷动（内定）， No 则不容许卷动。

42 .加入收藏的链接，设为首页，加入频道
<onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.zzist.net/gbz/');return false;">
<a href="#" onClick="window.external.AddFavorite('链接','收藏夹内显示文字');return false"><img src="图片源" height="20" border="0"></a>
<a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a>

43.透明flash的插入方法和实例
<table border='0' cellspacing='0' cellpadding='0' align='center'>
     <tr> <td class=top background=背景图片
             <OBJECT　classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%">
             <PARAM name="movie" VALUE="flash地址">
             <PARAM name="quality" VALUE="high">
             <PARAM name="wmode" VALUE="transparent">
</object>
       </td> </tr>
</table>

43.点击关闭窗口，打印，打印预览
<a href='javascript:window.close()'><font color="#FF6633"><strong>点击关闭窗口</strong></font></a>
<a href="/" onclick="javascript:window.close(); return false;">关闭窗口</a>
【<A href="javascript:window.print()">打印此文</A>】【<A href="javascript:window.close();">关闭窗口</A>】
打印预览：
<script language="JavaScript" type="text/javascript">
    function printPreview() {
        var e = event.srcElement;
        e.style.visibility = "hidden";
        WebBrowser1.ExecWB(7, 1);
        e.style.visibility = "visible";
    }
</script>

44. 点击打开固定大小的窗口
<a onClick="window.open('modifyxing.asp?action=modify&id=<%=rs("id")%>','','status=no,scrollbars=no,top=200,left=200,width=580,height=400')"><%=trim(rs("xname"))%></a>

45. 隐藏状态栏里出现的LINK信息
<a href="http://"; onMouseOver="window.status='none';return true">梦想天空</a>

46.进入主页后自动最大话
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

47.进入主页以后自动播放声音
<embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>

48.状态栏动态显示现在时间
<script>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}</script>
<body onload=see()>

49.按下F12键返回首页
<script>function look(){
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}
}
if(document.onkeydown==null)
{document.onkeydown=look}
</script>

50. 后退,刷新,前进
<input type=button value=后退 onclick=history.go(-1)>
<input type=button value=刷新 onclick=history.go(-0)>
<input type=button value=前进 onclick=history.go(+1)>

51.我的电脑，网上邻居，我的文档，回收站，控制面板，拨号网络访问
<a href="<a　href="<a href="<a href="<ahref="<a href="