DHTML学习笔记
1、网页技术的三方面
2、DHTML的组成
3、rgb颜色表示
4、js删除提示
5、前进、后退、返回某页、刷新、关闭
7、定时关闭网页
8、背景音乐
9、浏览器显示不同格式
10、链接的不同方式target
11、强制不缓存
12、定时刷新、幻灯片效果
13、大图片提前载入
15、移动文字
16、浮动背景（背景图像不滚动 ）
17、让背景图像不平铺的CSS样式表
18、判断不同浏览器
19、定义本网页的关键字
21、改变链接在浏览器状态栏信息
26、打印按钮
27、查看源码按钮
28、去掉页面滚动条
30、水平线、垂直线
31、下拉式菜单中的链接来打开一个新的窗口
34、跳到页面的顶部
36.一个站点不同页面间播放同一音频文件
38、定制新窗口
40. 删除图片链接的蓝色边框
47. table标签经验
49.js读java变量：
51、 （空格）占一个字符或两个字符
52、在线播放:
53、树状显示js代码
54、鼠标移到就显示下拉菜单
55、防止下载网页信息的简单方法（防君子不防小人，对此问题目前没有绝对办法）
56、js设置输入框焦点
57、option标签没有value属性时
58、不保留缓存方法：
59、全选、全不选js方法
1.网页技术分为三个方面：静态网页、网页美工、动态网页。
2.DHTML(动态HTML)是一种通过各种技术的综合而得以实现的概念，包括三部分：HTML、Script(JavaScrip or VBScript)、CSS(Cascading Style Sheets)。
3.rgb颜色“#rrggbb”六位十六进制数。
4.js提示（删除时）
1 <a href="#" onclick="return(confirm('删除后无法恢复,您确定删除吗?'))">删除</a>
1 <input type=button value="删除" onclick="javascript:reload()"> 2 <script type="text/javascript"> 3 function reload() { 4 if (confirm("确认?")){ 5 var url="#"; 6 window.location.href=url; 7 } 8 }
1 <a href="#" >删除</a> 2 <script language="javascript" type="text/javascript"> 3 function delete_confirm(){ 4 if( event.srcElement.outerText=="删除" || event.srcElement.value=="删除" ) 5 event.returnValue=confirm("删除后将不能恢复，您确认执行删除操作么？"); 6 } 7 document.onclick=delete_confirm; 8 </script>
5.前进、后退、返回某页、刷新、关闭
1 //返回前页：使用OnClick="history.go(-1)" 2 //返回主页：使用OnClick='top.location.href="index.jsp"' 3 <a href="javascript:history.back()">后退</a> 4 <a href="javascript:history.go()">前进</a> 5 <a href="javascript:location.reload()">刷新</a>
7.定时关闭网页
1 <script language="javascript" type="text/javascript"> 2 setTimeout('window.close();',2000); //表示两秒后自动关闭窗口 3 </script>
8. 背景音乐
显示操作面板：
在相应地方加<embed src="aladdin.mid" width="140" height="35" autostart=true controls="middleconsole">
不显示操作面板：
在页中任意地方加<embed src="aladdin.mid" hidden=true autostart=true loop=true>
或<embed src="aladdin.mid" autostart="true" loop="2" width="80" height="30">
9. 如何让浏览器正确显示word 文件格式?
为了正确处理word 等格式，你需要在HTML文件中设置好该文件类型
1 <meta http-equiv="Content-Type" content="application/msword"> 2 <-- 3 还有其它经常设置的文件类型： 4 application/msword Microsoft Word Document 5 application/pdf PDF Document 6 application/wordperfect6.0 WordPerfect 6.0 Document 7 application/zip ZIP archive 8 audio/x-wav WAV audio format 9 audio/midi MIDI audio format 10 audio/x-pn-realaudio RealAudio 11 image/gif GIF image format 12 image/jpeg JPEG image format 13 image/png PNG image format 14 text/html HTML document 15 text/plain Plain text 16 video/mpeg MPEG video format 17 video/quicktime QuickTime video format 18 video/x-msvideo AVI video format 19 -->
10. 目标窗口target及其设置
目标窗口是页面链接所指内容显示的窗口，也就是当你单击了页面某一个链接后，该链接所指的内容在那个窗口显示。大多数情况下，我们无
需关心它，因为一般都是在同一窗口显示。target是链接标签<a>的属性，它的作用就是指定目标窗口，target有以下几个值：
1）_blank
<a href="document.html" target="_blank">my document</a>
浏览器会另开一个新窗口显示document.html文档
2）_parent
<a href="document.html" target="_parent">my document</a>
指向父frameset文档
3）_self
<a href="document.html" target="_self">my document</a>
把文档调入当前页框
4）_top
<a href="document.html" target="_top">my document</a>
去掉所有页框并用document.html取代frameset文档
5）***
在链接处加target="***"语句，其中main为frame名，就可以在***frame里打开页面。
小技巧：可以在文件头加：<base target="_self">，则此页所有链接都在本页打开
12. 自动刷新
定时刷新：<META HTTP-EQUIV="Refresh" content="10; URL=http://自己的URL">
幻灯片效果：语句类似上面，但在页面1中URL指向页面2，而页面2指向页面3 ...
页面n指回页面1，即可实现循环显示页面的效果
13、大图片提前载入
如果您的站点中后面的页有大图形需要显示，您不妨在第一页中提前载入。把语句：
<img src="image.jpg" width=0 height=0> ,其中width,height要设置为0， 放在第一页HTML中的任何地方。
如果您的访问者在第一页停留的时间足够长，当他进入第二页时，图象会立即显示出来
15. 移动文字
这在主页上是常用的，其制作方法很简单。
<marquee>要移动的文字</marquee>
1.移动 的方向：<direction=!> !=left, right
2.移动的方式：<bihavior=!> !=scroll ,side,alternate
3.循环次数：<loop=!> !=次数。若未指定则循环不止。
4 循环速度：<scrollamount=!> !=数
16. 浮动背景（背景图像不滚动 ）
当你拉住下拉条时，背景不动。
1 <style type="text/css">2 body { background-image: url(image/bg.gif); background-attachment: fixed}3 </style> 4 <body backgroud="#ffff" bgproperties="fixed">
17. 让背景图像不平铺的CSS样式表
1 <style type="text/css"> 2 body { background-image: url(image/bg.gif); background-repeat: no-repeat} 3 </style>
18、判断不同浏览器
1 <script language="javascript"> 2 function TestBrowser(){ 3 ie = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 3 )) 4 ns = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 )) 5 if (ns) { 6 setTimeout(''location.href="nn4.htm"'',10); 7 } else { 8 setTimeout(''location.href="ie4.htm"'',10); 9 } 10 } 11 </script>
19. 定义本网页的关键字
在网页中加入关键字，可以供某些搜索站台机器人的使用，它们会利用该关键字为你的网站做索引，这样，当别人用关键字搜索网站时，如果你的网页包含该关键字，那么就可以被列出了，定义本网页关键字，可以加入以下代码：
<meta name="keywords" content="html,dreamweaver,flash,css">
content 所包含的就是关键字，你可以自行设置。
这里有个技巧，你可以重复某一个单词，这样可以提高自己网站的排行位置，如:
<meta name="keywords" content="dreamweaver,dreamweaver,dreamweaver">
21. 改变链接在浏览器状态栏信息
当指向一个链接时，该链接的信息会出现在浏览器状态栏里，如果需要隐藏信息，可以如下设置：
<a href="http://www.yhyhw.com" onMouseOver="window.status='none';return true">test</a>
如果想要指向一个链接时，浏览器状态栏里出现特定的信息，把none 改成你需要的文字即可。
26. 打印按钮
1 <form> 2 <input type="button" name="Print" value="Print" onClick="window.print();return false"> 3 </form>
27. 查看源码按钮
1 <input type=button name="view" value="查看源码" onClick=''window.location="view-source:" +window.location.href'' style="font-size:9pt">
28. 去掉页面滚动条
1 <body bgcolor="#000000" leftmargin="0" topmargin="0" style="overflow-x: hidden; overflow-y: hidden; width: 100%">
30. 水平线、垂直线
插入HR很简单：<hr size="1">。如何让它垂直呢，更简单：<hr size="100" width="1">
31. 下拉式菜单中的链接来打开一个新的窗口
1 <select onChange="javascript:window.open(this.options[this.selectedIndex].value)"> 2 <option value="http://www.163.com/">网易</option> 3 <option value="http://www.suho.com/"＞搜狐</option>
4 </select>
34. 跳到页面的顶部
当浏览者浏览到页面底部后，你需要提供一个单击，让浏览者方便的跳到页面顶部，加入以下代码：
<a href="#top">返回顶部</a>
36.一个站点不同页面间播放同一音频文件
大家有这样的经验，当你访问一个站点首页时，会听到该页设置的背景声音文件，比如一段音乐。当你链接到该站点另一页时，音乐就停止了
。如何让声音不断呢。其实，你只需要建立一个上下框架结构的网页，把声音文件建立在下框架里，并把下框架的宽度设置为一个像素，而上
框架里是页面内容，当访问者离开站点首页时，因下框架内容未变，所以，声音不会间断。大家还要注意两点，第一，把框架的边框设置为0；
第二，隐藏声音文件的播放界面，然后把上下两个框架的背景设置为相同。
38.定制新窗口
我们可以打开一个新的窗口来显示链接的内容，但如何定制这个新窗口呢。只需要在标签<A>中加入onClick事件:
<a href="#" onClick="window.open('cnshell.htm','help','scrollbars=yes,resizable=yes,width=500,height=40')">问答</a>"#"表示单
击链接"问答"后，当前窗口保持不变，cnshell.htm为单击链接"问答"后所打开新窗口装载的内容，width:宽,height:高,resizable:是否允许
访客缩放新窗口,scrollbars:如果文本超过一屏,是否生成滚动条,status:是否显示状态栏,menubar:是否显示菜单,location:是否显示地址栏.
40. 删除图片链接的蓝色边框
如果我们设置了图片为一个链接，会发现图片四周出现了蓝色边框。要删除边框，需要在图片标签里加上border="0"。如：<img
src="dog.jpg" border="0">
47. 尽量用table标签，这样可以避免<td>之间的干扰；<table>尽量设为<table width="100%" border="0" cellpadding="0"
ellspacing="0">，一方面是不显示表格线，另一方面占满整个宽度，不会因为内容不够而宽度变窄；包含<table>的 <td>要设为<td valign="top">，不然内部table默认居中。<table>中第一行表格的width控制各列宽度；每列第一个格的height控制各行高度。
49.js读java变量：
1 <% 2 String s = "welcome"; 3 %> 4 <script language="javascript"> 5 //alert(<%=s%>);报错 6 alert('<%=s%>');//正确 7 //如果不加单引号说明是变量，加上单引号才是字符串 8 </script>
51. 表示一个空格，这个空格占一个字符（对于字母）还是两个字符（对于汉字）是根据浏览器的（工具->Internet选项->语言）来决定的，是不确定的，所以中文开头只需要两个 而不是四个 。
52.在线播放:
下面两个视频，前一个是RM视频（.rm .rmvb），后一个是MP视频（.wmv .asf .avi）,为了不影响大家，都设置为手动播放，并将相关的代码及说明放在了视频的下面：
RM源代码：
1 <OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA class="OBJECT" id=RAOCX width=352 height=288> 2 <PARAM NAME=SRC VALUE="http://www.cqie.cn/pub/iec.rm"> 3 <PARAM NAME=CONSOLE VALUE="http://www.cqie.cn/pub/iec.rm"> 4 <PARAM NAME=CONTROLS VALUE=imagewindow> 5 <PARAM NAME=AUTOSTART VALUE=0 > 6 </OBJECT> 7 <br> 8 <OBJECT classid=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA height=32 id="video" width=352> 9 <PARAM NAME=SRC VALUE="http://www.cqie.cn/pub/iec.rm"> 10 <PARAM NAME=AUTOSTART VALUE=0> 11 <PARAM NAME=CONTROLS VALUE=controlpanel> 12 <PARAM NAME=CONSOLE VALUE="http://www.cqie.cn/pub/iec.rm"> 13 </OBJECT>
说明：以后可以直接把以上代码放到网页中使用，需要修改的属性说明如下width=352 height=288 这是控制媒体高度和宽度的
VALUE="http://www.cqie.cn/pub/iec.rm" 这是指定媒体文件URL地址的，如果安装了REALSERVER的话，可以用
rtsp://www.cqie.cn/pub/iec.rm来进行流式播放，看起来会更流畅，而且可拖动。AUTOSTART VALUE=0 这是控制是否自动播放的，你只要将
value=1就可以自动播放了
MP源代码：
1 <object align=middle classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 class="OBJECT" id=MediaPlayer width=160 height=168 > 2 <PARAM NAME=AUTOSTART VALUE=0 > 3 <param name=ShowStatusBar value=-1> 4 <param name=Filename value=http://xiaoping.cqie.cn/wmv/jler.wmv> 5 <embed type=application/x-oleobject 6 7 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 flename=mp 8 9 src="http://xiaoping.cqie.cn/wmv/jler.wmv" width=160 height=168> 10 </embed> 11 </object>
53.树状显示js代码
（要求：某行文本前面有一个加号的标签，一点击加号变成减号，同时该行展开它之下所属信息，以缩进形式呈现，再点击减号又变回加号、
下面展开的文本收回，这应该怎么做？除了js方式有什么其他方式实现么？谢谢！）
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>无标题文档</title> 5 <script language="javascript"> 6 function showLay(divId){ 7 var objDiv = eval(divId); 8 if (objDiv.style.display=="none"){ 9 eval("sp"+divId+".innerHTML='-'"); 10 objDiv.style.display=""; 11 }else{ 12 eval("sp"+divId+".innerHTML='+'"); 13 objDiv.style.display="none"; 14 }} 15 </script> 16 </head> 17 <body> 18 <a href="#" onclick="showLay('Layer1')"><span id="spLayer1">+</span>a</a><br> 19 <div id="Layer1" style="display:none;"> 20 |-<a href="insert_unit_info.html" target="body">a1</a><br> 21 |-<a href="select_unit_info.jsp" target="body">a2</a><br> 22 </div> 23 <a href="#" onclick="showLay('Layer2')"><span id="spLayer2">+</span>b</a><BR> 24 <div id="Layer2" style="display:none;"> 25 |-<a href="insert_item_info.html" target="body">b1</a><br> 26 |-<a href="select_item_info.jsp" target="body">b2</a><br> 27 </div> 28 <a href="#" onclick="showLay('Layer3')"><span id="spLayer3">+</span>c</a><BR> 29 <div id="Layer3" style="display:none;"> 30 |-<a href="insert_expert_info.html" target="body">c1</a><br> 31 |-<a href="select_expert_info.jsp" target="body">c2</a><br> 32 </div> 33 <a href="#" onclick="showLay('Layer4')"><span id="spLayer4">+</span>d</a><BR> 34 <div id="Layer4" style="display:none;"> 35 |-d1<br> 36 |-d2<br> 37 </div> 38 </body> 39 </html>
54.下拉菜单（新建个.html文件，把代码考进去就行）
1 <html> 2 <head> 3 <title>打造下拉菜单</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <script language="javascript"> 6 function MM_reloadPage(init) { //reloads the window if Nav4 resized 7 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { 8 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} 9 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); 10 } 11 MM_reloadPage(true); 12 function MM_findObj(n, d) { //v4.0 13 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 14 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 15 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 16 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 17 if(!x && document.getElementById) x=document.getElementById(n); return x; 18 } 19 function MM_showHideLayers() { //v3.0 20 var i,p,v,obj,args=MM_showHideLayers.arguments; 21 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; 22 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } 23 obj.visibility=v; } 24 } 25 </script> 26 </head> 27 <body bgcolor="#CCCCCC" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll=auto> 28 <div id="title" style="position:absolute; left:8px; top:15px; width:240px; height:15px; z-index:1; background-color: #006699; 29 layer-background-color: #006699; border: 1px none #000000"> 30 <table width="480" cellspacing="0" cellpadding="2"> 31 <tr> 32 <td width="120" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers 33 ('menu1','','hide')"><b><font color="#FFFFFF"><a href="#">■ 34 经典论坛</a></font></b> </td> 35 </tr> 36 </table> 37 </div> 38 <div id="menu1" style="position:absolute; left:8px; top:34px; width:120px; height:80px; z-index:2; background-color: #999966; 39 layer-background-color: #999966; border: 1px none #000000; visibility: hidden" onMouseOver="MM_showHideLayers 40 ('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')"> 41 <table width="100%" cellspacing="0" cellpadding="2" height="80"> 42 <tr> 43 <td> <a href="#">Dreamweaver 专栏</a></td> 44 </tr> 45 <tr> 46 <td> <a href="#">Fireworks 专栏</a></td> 47 </tr> 48 <tr> 49 <td> <a href="#">Flash 基本操作</a></td> 50 </tr> 51 <tr> 52 <td> <a href="#">Flash 5 Action</a></td> 53 </tr> 54 </table> 55 </div> 56 </body> 57 </html>
55.防止下载网页信息（例如显示受控文件）的简单方法：
a。屏蔽鼠标左右键，<body oncontextmenu=self.event.returnValue=false onselectstart="return false">
b。加密网页源文件，推荐Batch Html Encryptor加密软件。
c.用Adobe Acrobat 6.0 Standard软件加密。
56.用javascript设置输入框焦点
1 <html> 2 <head> 3 <script language="javascript"> 4 function t() { 5 document.getElementById('aa').focus(); 6 } <!--设置id为aa的元素得到焦点--> 7 </script> 8 </head> 9 <body onload="javascript:t()"> 10 <input type="text" id="aa"> <!--设置文本输入框的id为aa--> 11 </body> 12 </html>
57.select标签下的OPTION标签没有value属性时，把内容当属性传过去，比如<OPTION>所有用户</OPTION>传的值就是所有用户，建议用以下方法。
1 <select name="account.accountId" > 2 <OPTION value="">所有日志</OPTION> 3 <OPTION value="renyang">任杨</OPTION> 4 </select>
58.不保留缓存方法：
1 <% 2 response.setHeader("Pragma", "No-cache"); 3 response.setHeader("Cache-Control", "no-cache"); 4 response.setHeader("Cache-Control", "must-revalidate"); 5 response.setDateHeader("Expires",0); 6 %>
59.全选、全不选js方法 （直接放在.htm文件中即可）
1 <SCRIPT language="javascript"> 2 function checkAll(e, itemName) 3 { 4 var aa = document.getElementsByName(itemName); 5 for (var i=0; i<aa.length; i++) 6 aa[i].checked = e.checked; 7 } 8 function check(e, allName) 9 { 10 var all = document.getElementsByName(allName)[0]; 11 if(!e.checked) all.checked = false; 12 else 13 { 14 var aa = document.getElementsByName(e.name); 15 for (var i=0; i<aa.length; i++) 16 if(!aa[i].checked) return; 17 all.checked = true; 18 } 19 } 20 </SCRIPT> 21 <input type=checkbox name=allPersons id=allPersons onclick="checkAll(this, 'persons')"> <label for="allPersons">全选</label><br> 22 23 <input type="checkbox" name="persons" id=persons value="1"> <label for="persons">第一名</label><br> 24 <input type="checkbox" name="persons" id=persons value="2"> <label for="persons">第二名</label><br> 25 <!-- 问题：第一名和第二名这两个字ID不能一样，否则点第二名这三个字时第一名前的框变化 -->
