HTML常用小技巧

少女杀手

浏览: 131641 次
性别:
来自: 约旦河西岸

最近访客更多访客>>

wyx065747

wl185855253

l284849736

fhsh168

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML IE jQuery CSS 音乐

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

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

18.同一网页多种链接样式问题
<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>

19.添加透明FLSAH
   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挡住层问题
20.图片按比例缩小
    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="" onload="scaleImage(this, 100, 80)">
21.判断上一页的来源
   javascript:document.referrer
22.页面不要滚动条
   让竖条没有:<body style='overflow:scroll;overflow-y:hidden'></body>
   让横条没有:<body style='overflow:scroll;overflow-x:hidden'></body>
   两个都去掉？更简单了<body scroll="no"></body>
23.判断是左键还是右键按下
   <body onmousedown=if(event.button==1)alert("左键");if(event.button==2)alert("右键")>
24.获得操作系统的名称和浏览器的名称
   document.write(navigator.userAgent)；
25.自动完成功能
   <input type=text autocomplete=on>打开该功能
   <input type=text autocomplete=off>关闭该功能
26.显示本地计算机信息
   var WshNetwork = new ActiveXObject("WScript.Network");
   alert("Domain = " + WshNetwork.UserDomain);
   alert("Computer Name = " + WshNetwork.ComputerName);
   alert("User Name = " + WshNetwork.UserName);
27.获取分辨率（网上其它的不怎么好使）
    var hei=screen.height;
    var wid=screen.width;
28.计算内容宽和高
   <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>
29.访问剪贴板
   event.dataTransfer.setData("URL", oImage.src);
   sImageURL = event.dataTransfer.getData("URL")
   (2)普通访问
   window.clipboardData.setData("Text",oSource.innerText);
   window.clipboardData.getData("Text");
30.以图片方式插入视频
   <IMG height=240 loop=infinite dynsrc=http://amedia.efu.com.cn/EFUADD0001.rmvb width=320>
32.设置为首页
   <A href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('url');">设为首页</A>
33.背景音乐链接
   <bgsound src=地址 loop="-1">
34.表单电子邮件提交
   <form name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

35.禁止鼠标右键查看网页源代码
   <SCRIPT language=javascript〉
    function click()
    {
     if (event.button==2){
       alert(`你好,欢迎光临！`) ;
     }
    }
     document.onmousedown=click
〈/SCRIPT〉
36.经过设置后的弹出窗口
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
〈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脚本结束
37.脚本永不出错
<SCRIPT LANGUAGE="JavaScript">

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

   进入页面<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种随机选择一种
39.table 相关
   /*表格中文字多时自动换行（根据空格匹配）*/
.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

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

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

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

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

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

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

5
顶

0
踩

分享到：

关于我的昵称“少女杀手” | JAVA给图片加水印（无损原图片）

2009-05-07 23:45
浏览 1768
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论