HTML常用小技巧

Aquila311

于 2009-05-07 23:45:54 发布

阅读量149

点赞数

分类专栏： HTML 文章标签： HTML IE jQuery CSS 音乐 ViewUI

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[b][/b]在网上看了很长时间，基本上都是粘贴复制，而且大多写的都很乱很杂，内容也很少，有的时候找半天才找到我想要的，我就把平时总是遇到的HTML问题总结下来，有些是借鉴别人的，有些事自己写的！希望对大家有帮助！
[b]1.透明效果[/b]
.bgcss{ background-color:gray;filter:alpha(opacity=90);/*透明度*/}
/*在层层叠时引用此样式显示透明效果*/
[b]2.屏蔽右键，防止粘贴复制[/b]
<body οncοntextmenu=self.event.returnValue=false onselectstart="return false">
[b]3.取消选取、防止复制[/b]
<body onselectstart="return false">
[b]4.防止复制[/b]
οncοpy="return false;" oncut="return false;"
[b]5.网页定时关闭（仅支持IE）[/b]
<script language="javascript">
　 function closeit(){
setTimeout("self.close()",3000) //毫秒
}
　</script>
然后再在<body>标内加入如：<body οnlοad="closeit()">
[b]6.网页自动刷新[/b]
在head部记入<META HTTP-EQUIV="Refresh" content="9">其中9为9秒后自动刷新，你可以更改为任意值。
[b]7.网页自动跳转[/b]
<META HTTP-EQUIV="Refresh" CONTENT="时间(秒);URL=地址">
单击事件跳转（用于Buttom）
<input type="image" src="tijiao.jpg" onClick="javascript: location.href=register2.jsp';" />
或者改成document.location.assign(‘register2.jsp’)
[b]8.返回上一页[/b]
<a href=javascript:history.back(1)>『返回上一页』</a>
<INPUT TYPE="button" οnclick=window.history.back() value=back>//后退
<INPUT TYPE="button" οnclick=window.history.forward() value=forward>前进

[b]9.iframe透明背景[/b]
<IFRAME ID="iFrame1" SRC="iframe.htm" allowTransparency="true" style="background-color:green"></IFRAME>
[b]10.IE地址栏前换成自己的图标[/b]
<link rel="Shortcut Icon" href="favicon.ico">
[b]11.可以在收藏夹中显示出自己的图标[/b]
<link rel="Bookmark" href="favicon.ico">
[b]12.关闭输入法[/b]
<input style="ime-mode:disabled">
[b]13.防止被人frame[/b]
<SCRIPT LANGUAGE=JAVASCRIPT>
if (top.location != self.location)top.location=self.location;
</SCRIPT>
[b]14.网页不能被另存为[/b]
<noscript><iframe src=*.html></iframe></noscript>
[b]15.删除时确认[/b]
<a href='javascript:if(confirm("确实要删除吗?"))location="zone.jsp"'>删除</a>
[b]16.网页不被缓存[/b]
<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">
[b]17.CSS一些常用功能[/b]
<input type=text style="border:1 solid #000000"> //文本框显示细边框

<input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br> //checkbox扁平

<span style="border:1px solid #000000; position:absolute; overflow:hidden;" > //细线SELECT
<select style="margin:-2px;">
<option>1111</option>
<option>11111111111111</option>
<option>111111111</option>
</select></span>

/*改变鼠标*/
<style type="text/css">
.bod{ cursor:pointer;}
/* pointer:手型 auto:光标性（I） crosshair:十字形还有一些，自己试去吧*/
cursor:url(mouse.ani); /*将鼠标定义成指定图像*/
</style>

/*层永远居中，无论窗口大小怎样改变*/
<div class="bod" style="position:absolute;height:300px; width:200px; left:-100px;
margin-left:50%; border:1px solid #0033CC"/>
/*按钮变为指定图片*/
.style3 { background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
.style4 { background: url(image/buttonbg2.gif); border: 0px; width: 60px; height: 22px}

<input type="submit" name="Submit2" value="提交" οnmοuseοver="this.className='style4'"
οnmοuseοut="this.className='style3'" class="style3">
/*滚动条颜色*/
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFCBC8;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8;
SCROLLBAR-BASE-COLOR: #FFFFFF
}

[b]18.同一网页多种链接样式问题[/b]
<style type="text/css">

</style>
引用上面的样式
第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>
第二种样式 <a class="red" href="http://www.dayanmei.com">个人日志</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.dayanmei.com">个人日志</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.dayanmei.com">个人日志</a></div>

[b]19.添加透明FLSAH[/b]
a.<embed src=a.swf height="flash高度" width="该flash宽度" wmode=transparent> </embed>
b. <object id="movi" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100" height="480">
<param id="movie" name="movie" value="zone_picture/daohag/11716.swf">
<param id="wmode" name="wmode" value="transparent">
</object> 如果改为<param id="wmode" name="wmode" value="opaque">将解决FLASH挡住层问题
[b]20.图片按比例缩小[/b]
function scaleImage(ImgD, FitWidth, FitHeight){
var width = ImgD.width, height = ImgD.height;
var w = width / FitWidth, h = height / FitHeight;
if (w >= h) { //宽度固定，高度缩放
ImgD.width = FitWidth;
ImgD.height= height / w;
jQuery(ImgD).css("margin-top", (FitHeight-ImgD.height) / 2); //垂直居中
} else { //高度固定，宽度缩放
ImgD.height= FitHeight;
ImgD.width = width / h;
}
}
<img src="" οnlοad="scaleImage(this, 100, 80)">
[b]21.判断上一页的来源[/b]
javascript:document.referrer
[b]22.页面不要滚动条[/b]
让竖条没有:<body style='overflow:scroll;overflow-y:hidden'></body>
让横条没有:<body style='overflow:scroll;overflow-x:hidden'></body>
两个都去掉？更简单了<body scroll="no"></body>
[b]23.判断是左键还是右键按下[/b]
<body οnmοusedοwn=if(event.button==1)alert("左键");if(event.button==2)alert("右键")>
[b]24.获得操作系统的名称和浏览器的名称[/b]
document.write(navigator.userAgent)；
[b]25.自动完成功能[/b]
<input type=text autocomplete=on>打开该功能
<input type=text autocomplete=off>关闭该功能
[b]26.显示本地计算机信息[/b]
var WshNetwork = new ActiveXObject("WScript.Network");
alert("Domain = " + WshNetwork.UserDomain);
alert("Computer Name = " + WshNetwork.ComputerName);
alert("User Name = " + WshNetwork.UserName);
[b]27.获取分辨率（网上其它的不怎么好使）[/b]
var hei=screen.height;
var wid=screen.width;
[b]28.计算内容宽和高[/b]
<SCRIPT language="javascript">
function test(obj)
{
var range = obj.createTextRange();
alert("内容区宽度: "+range.boundingWidth + "px\r\n内容区高度: "
+range.boundingHeight + "px");
}
</SCRIPT>
<BODY>
<Textarea id="txt" height="150">sdf</textarea>
<INPUT type="button" value="计算内容宽度" onClick="test(txt)">
</BODY>
[b]29.访问剪贴板 [/b]
event.dataTransfer.setData("URL", oImage.src);
sImageURL = event.dataTransfer.getData("URL")
(2)普通访问
window.clipboardData.setData("Text",oSource.innerText);
window.clipboardData.getData("Text");
[b]30.以图片方式插入视频[/b]
<IMG height=240 loop=infinite dynsrc=http://amedia.efu.com.cn/EFUADD0001.rmvb width=320>
[b]32.设置为首页[/b]
<A href=# οnclick="this.style.behavior='url(#default#homepage)';this.setHomePage('url');">设为首页</A>
[b]33.背景音乐链接[/b]
<bgsound src=地址 loop="-1">
[b]34.表单电子邮件提交[/b]
<form name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

[b]35.禁止鼠标右键查看网页源代码[/b]
<SCRIPT language=javascript〉
function click()
{
if (event.button==2){
alert(`你好,欢迎光临！`) ;
}
}
document.οnmοusedοwn=click
〈/SCRIPT〉
[b]36.经过设置后的弹出窗口[/b]
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
〈SCRIPT LANGUAGE="javascript"〉
〈!--
window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no,
menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
//写成一行
--〉
〈/SCRIPT〉
参数解释：
<SCRIPT LANGUAGE="javascript"〉 js脚本开始；
window.open 弹出新窗口的命令；
`page.html` 弹出窗口的文件名；
`newwindow` 弹出窗口的名字（不是文件名），非必须，可用空``代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
〈/SCRIPT〉 js脚本结束
[b]37.脚本永不出错[/b]
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
[b]38.页面进入和退出的特效[/b]

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。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种随机选择一种
[b]39.table 相关[/b]
/*表格中文字多时自动换行（根据空格匹配）*/
.table{table-layout: fixed;}
.talbe td{word-break: break-all; word-wrap:break-word;}

table显示细边框
<table width="733" bgcolor="#ffffff" border="1" cellspacing="0" cellpadding="0"
bordercolordark="#ffffff" bordercolorlight="#0000CC"frame="box" >
或者用样式表
<style type="text/css">
.table1{border-collapse:collapse}
.table1 td{border:1px solid #ddd}
</style>
或者，但是内外样色有区别
<table width="200" border="1" style="BORDER-COLLAPSE: collapse;">

取第x,y的值
alert(document.getElementById('table1').rows[0].cells[0].innerHTML);
或者
alert(document.getElementById('table1').rows.item(0).cells.item(0).innerHTML);
改变表格中的内容
document.getElementById('table1').rows[2].cells[2].innerHTML='<font color="#ffcc00">sdfsdfsdf</font>';

document.getElementById('table1').rows[2].cells[2].innerText='<font color="#ffcc00">sdfsdfsdf</font>';

其他一些对表格的操作看这里就可以啦，他写的不错
http://www.iteye.com/post/998418

[b]附加：[/b]
获取选中Option中的文本
var ss = document.getElementById("cont").options[document.getElementById("cont").selectedIndex].text;
alert("this is:"+ss);
cont为select的ID

[b]去除HTML标签的js[/b]
/<.+?>/gim

/<\/?[^>]*>/g

/<\/?[^>]+>/g

/<[^>]*>|<\/[^>]*>/gm

/<(.*)>.*<\/\1>|<(.*) \/>/