飞鱼博客

首页 > 1 软件使用心得 > HTML网页设计的小技巧

HTML网页设计的小技巧

2010年8月5日 AEROFISH 1,669 views 发表评论阅读评论

有时你对网页做一些特殊的处理，比如定时刷新，添加首页按钮等等，下面一些HTML小技巧可能会帮到你。

<!--页面定时刷新,单位为秒 -->
<meta http-equiv="Refresh" content="60">

<!-- 页面定时转向新的地址,单位为秒 -->
<meta http-equiv="refresh" content="5;URL=http://www.google.com">

<!-- 设置网页不会被缓存 -->
<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">

<!-- 进入页面和退出页面时的特效 -->
<meta http-equiv="Page-Enter" content="revealTrans(duration=5, transition=3)" />
<meta http-equiv="Page-Exit" content="revealTrans(duration=5, transition=2)" />

<!--
说明：
duration表示特效的持续时间，以秒为单位。
transition表示使用哪种特效，取值为1-23:
0 矩形缩小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上刷新 5 上到下刷新
6 左到右刷新 7 右到左刷新 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗
12 点扩散 13 左右到中间刷新 14 中间到左右刷新 15 中间到上下 16 上下到中间 17 右下到左上
18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条 23 以上22种随机选择一种
-->

<!-- 禁止网页打印 -->
<mce:style><!--
@media print {
* { display: none }
}
-->
</mce:style>
<style mce_bogus="1">
@media print {
* { display: none }
}</style>

<!-- 背景图片不平铺，且拉动页面时背景图不动 -->
<STYLE>
body{
     background-image:url(logo.gif);
     background-repeat:no-repeat;
     background-position:center;
     background-attachment: fixed;
   }
</STYLE>

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

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

<!--禁止网页另存为 -->
<noscript>
     <iframe src="*.html" mce_src="*.html"></iframe>
</noscript>

<!--禁止鼠标选择、复制 -->
<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>

<!--禁止鼠标右键 -->
<script language="JavaScript">
function click(){
alert('右键已被禁止');
window.event.returnValue=false;
}
document.oncontextmenu=click;
</script>

<!--消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no -->
<img src="mypicture.jpg" mce_src="mypicture.jpg" height="100px" width="100px" galleryimg="no" />

<!-- 或者 -->
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<!--防止点击空链接时，页面往往重置到页面顶端-->
<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="myFunction();">空链接</a>

<!-- 设为首页 -->
<a href="#" mce_href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.google.com');">设为首页</a>

<!-- 添加到收藏夹 -->
<a href="javascript:window.external.AddFavorite('http://www.google.com','Google')" mce_href="javascript:window.external.AddFavorite('http://www.google.com','Google')">加入收藏夹</a>

<!-- 查看网页源代码 -->
<a href="javascript:window.location='view-source:http://www.google.com'" mce_href="javascript:window.location='view-source:http://www.google.com'">查看网页源代码</a>

<!-- 上一页的来源 -->
<a href="javascript:window.location=document.referrer" mce_href="javascript:window.location=document.referrer">转向将用户引入当前页面的位置URL</a>

<!-- 最小化、最大化、关闭窗口:本例适用于IE -->
<object id="min" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize" />
</object>
<object id="max" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize" />
</object>
<object id="close" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param NAME="Command" VALUE="Close" />
</object>
<input type="button" value="最小化" onclick="min.Click();" />
<input type="button" value="最大化" onclick="max.Click();" />
<input type="button" value="关闭" onclick="close.Click();" />

<!--关闭输入法-->
<input style="ime-mode:disabled" mce_style="ime-mode:disabled">

<!-- 电子邮件处理提交表单 -->
<form name="form1" method="post" action="mailto:hemingwang0902@126.com" enctype="text/plain">
请输入您的姓名：<input type="text" value=""/>
<input type="submit" value="提交"/>
</form>

【代码来源CSDN】

【最后修改时间：2011年7月9日】