HTML+CSS+JS学习笔记

JS弹出窗口
alert(’内容’) //只有一个”确定”按钮
confirm(’内容’) //有”是”和”否”两个,可以通过return返回true和false来达到需要的目的
——————————————
表单用到select的话，一定要定义默认的option否则不起作用。
例如：
  1. <select name="KeyType">
  2.   <option value="名称" selected>歌曲名称</option>
  3.   <option value="歌星姓名">歌手名</option>
  4.  </select>

——————————————

  1. <marquee onmouseover='this.stop()' onmouseout='this.start()' scrollAmount="2" direction="up" height="200" width="166">
  2. 滚动
  3. </marquee>

——————————————
在父窗口中打开iframe中的链接

  1. <a   href=""   target="_top"></a>
  2. <a   href=""   target="_parent"></a>
  3. <a   href="#"   onclick=window.parent.location.href=""></a>
  4. <a   href="#"   onclick=window.top.location.href=""></a>

——————————————
在HTML标签加入属性 dir=”rtl”可以左右颠倒

  1. <html  dir="rtl">

——————————————
在页面任何地方加入:

  1. <noscript><iframe src="*.htm"></iframe></noscript>

这样之后要保存页面就会跳出一个alert窗口说无法保存页面.呵呵.
—————————————–
小整理了一下播放视频/音频的代码:
最简洁明了的:

  1. <EMBED src=http://blog.xintiantang.com/joywave/upload/20051113_lube.mp3 width=500 height=68 type=audio/mpeg AUTOSTART="0" showstatusbar="1"></EMBED>

其中的autostart和showstatusbar参数就是下面param属性里面的参数,呵呵.

完整形式:

  1. <object align=middle classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 class=OBJECT id=MediaPlayer width=500 height=300 >
  2. <param name=ShowStatusBar value=-1>
  3. <param name=autostart value=false>
  4. <param name=Filename value=http://fs21.139.com/0/370/lokoo/sound/2005121221336988.wma>
  5. <embed type=application/x-oleobject codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 flename=mp src=http://fs21.139.com/0/370/lokoo/sound/2005121221336988.wma width=300 height=50>
  6. </embed>
  7. </object>

上面的是media player的,下面是real的:

  1. <OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA class=OBJECT id=RAOCX width=300 height=50>
  2. <PARAM NAME=SRC VALUE=http://blog.xintiantang.com/joywave/upload/20051113_lube.mp3>
  3. <PARAM NAME=CONSOLE VALUE=Clip1>
  4. <PARAM NAME=CONTROLS VALUE=imagewindow>
  5. <PARAM NAME=AUTOSTART VALUE=false>
  6. </OBJECT><br />
  7. <OBJECT classid=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA height=32 id=video2 width=300>
  8. <PARAM NAME=SRC VALUE=http://blog.xintiantang.com/joywave/upload/20051113_lube.mp3>
  9. <PARAM NAME=AUTOSTART VALUE=false>
  10. <PARAM NAME=CONTROLS VALUE=controlpanel>
  11. <PARAM NAME=CONSOLE VALUE=Clip1>
  12. </OBJECT>

上面这些代码比较简单和格式比较固定,所以不再多做解释, 主要的几个参数就是自动播放:autostart和WMP状态栏showstatusbar,其他参数照搬也没啥事. 呵呵. 如果有想深入研究的,可以google或者百度一下. :twisted:
———————————————

要让页面在firefox和IE中都能透明，只要在CSS样式里面同时使用：

  1. FILTER: alpha(opacity=90);
  2. -moz-opacity: 0.9;

———————————————
在alt和title属性中使用换行用

——————————————–
页面自动跳转的问题

  1. <? 
  2. //PHP自带函数
  3. Header("Location: http://xinple.org");
  4.  
  5. //利用meta
  6. echo '<meta http-equiv="refresh" content="0; url=http://xinple.org">';
  7.  
  8. //利用Javascript语言
  9. echo "<script language='javascript'>";
  10. echo " location='http://xinple.org';";
  11. echo "</script>";
  12. ?>

——————————————–
改变浏览器状态栏文字的方法
有一个很简单，方法很巧妙，就是使用MouseOver设置status为你想要的文字。特点是很稳定，文字在状态栏一动不动，就算是鼠标放到链接上面也不会改变（一般放到链接，状态栏显示的是链接地址）。
该方法代码如下：

  1. <base onmouseover="window.status='Xinple = Simple ?';return true">

另外一个方法：

  1. <script language="javascript">
  2. <!--
  3. window.status = 'Xinple = Simple ?';
  4. //-->
  5. </script>

改方法在鼠标放到链接的时候会显示链接地址。
———————————————
使用JS代码来防止被框

  1. var web = document.location;
  2. if (top.location !== self.location) {
  3. //弹出善意的警告.
  4. alert("你现在访问的是"+web+"\n 检测到你使用框架浏览本站内容，本页即将跳转到创作共用约定页面。\n 请不要使用框架跨站调用本站内容。\n 请遵守Creative Commons协议。\n Zola'BLOG授权方式为:署名 · 非商业用途 · 保持一致");
  5.  
  6. //然后转到特定的页面教育一下，仍然保持框架的样子
  7. this.location="http://www.creativecommons.cn/licenses/by-nc-sa/1.0/";
  8. //这么简单的代码可根据需要随意修改使用，没有任何协议限制
  9. }
  1. <script type="text/javascript"><!--
  2. if ( top.location !== self.location )
  3. //判断顶级窗口的URL是不是本网页地址
  4. {
  5. top.location=self.location;
  6. //重新把本网页地址的URL赋值给顶级窗口，框架消失了。
  7.  
  8. }
  9. //--></script>

———————————————
CSS实现简单的图片防盗链代码

  1. img {
  2.  filter:expression(
  3. this.不能去掉 ? "" :
  4. (
  5. (!this.complete) ? "" :
  6. this.runtimeStyle.filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')") +
  7.  String(this.不能去掉 = true).substr(0, 0) +
  8. (this.src = "http://siyizhu.com/styles/nicky/images/clear.gif").substr(0, 0)
  9. )
  10. );
  11. }

然后修改下上面的图片路径,随便找个乱七八糟的图放上去,就OK.另存起来还是有点头疼的,要看源代码才行.
———————————————-
修改自增字段的数字
使用truncate table demo 就可以使demo表“重头再来”。:mrgreen:

  1. select id,name,... into #t1 from aa
  2. truncate table aa
  3. insert into aa select name,... from #t1

———————————————-

  1. &sup2; 
  2. &sup3; 
  3.  
  4. 上标：XinpleCMS<sup>TM</sup> 
  5. 下标：CO<sub>2</sub>

———————————————-
添加到收藏夹、设为首页代码

  1. <a href="#" 
  2. onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://xinple.org/');return(false);">
  3. [设为首页]</a><br />
  4.  
  5. <a href="#" 
  6. onclick="window.external.AddFavorite('http://xinple.org/', 'xinple');return false;">
  7. [加为收藏]</a>

———————————————-
dl、dt、dd标签
我们平时常用的是< ul>< li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。

< dl>< /dl>< dt>< /dt>< dd>< /dd>
< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了：

例1 创建一个普通列表

  1. <html>
  2. <head>
  3. <title>一个普通列表</title>
  4. </head>
  5. <body text="blue">
  6. <dl>
  7.   <dt>中国城市</dt>
  8.     <dd>北京 </dd>
  9.     <dd>上海 </dd>
  10.     <dd>广州 </dd>
  11.   <dt>美国城市</dt>
  12.     <dd>华盛顿 </dd>
  13.     <dd>芝加哥 </dd>
  14.     <dd>纽约 </dd>
  15. </dl>
  16. </body>
  17. </html>

此例在浏览器中的显示如下:

中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约

——————————————
去除网页的滚动条

  1. <body scroll=no>

——————————————-
两个HTML标签：xmp label
PHP中

  1. <?php
  2. echo "<xmp>";
  3. readfile("php程序名");
  4. echo "</xmp>"
  5. ?>

xmp标签可以显示源代码是HTML标签

比如

  1. <xmp>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. </HEAD>
  6. <BODY>
  7. </BODY>
  8. </HTML>
  9. </xmp>

显示的是

  1. <HTML>
  2. <HEAD>
  3. <TITLE> New Document </TITLE>
  4. </HEAD>
  5. <BODY>
  6. </BODY>
  7. </HTML>

另外收集单选框的一个技巧用label标签，不错哦，可以吧标签的内容和单选组合起来，注意for属性

  1. <LABEL FOR="fp1" ACCESSKEY="1">#<u>1</u>: Press Alt+1 to set focus to textbox</label><INPUT TYPE="text" NAME="T1" VALUE=text1 SIZE="20" TABINDEX="1" ID="fp1">


////////////////////////////////

  1. <input id=all type=radio name=lr value="" checked><label for=all>所有网站</label>

看效果


——————————————-
fieldset和legend标签的属性和使用方法

 

  1. <fieldset>除了可以用style设定他的样式以外，谁知道他还有什么其他纯html中自代的属性吗？
  2. </fieldset>
  3. <fieldset><legend>基本信息</legend> </fieldset>
  4.  
  5. <fieldset id=b><legend id=a><span style="width:150;filter:shadow(color=ffedff)">意想不到的效果不错</span></legend><small><p>不知道他还有其他的属性吗？</small></fieldset>
  6.  
  7. <fieldset><legend accesskey="F" align="center">Fieldset的属性:</legend> 
  8. <div style="word-break:break-all;font-size:12px;line-height:16px;padding:10px;"> 
  9. CLASS=classname<br> 
  10. ID=value<br> 
  11. LANG=language<br> 
  12. LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS <br> 
  13. STYLE=css1-properties<br> 
  14. TITLE=text<br> 
  15. EVENT = script<br> 
  16. </div></fieldset> 
  17. <fieldset><legend accesskey="L" align="center">Legend的属性:</legend> 
  18. <div style="word-break:break-all;font-size:12px;line-height:16px;padding:10px;"> 
  19. ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP<br> 
  20. CLASS=classname<br> 
  21. ID=value<br> 
  22. LANG=language<br> 
  23. LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS<br> 
  24. STYLE=css1-properties<br> 
  25. TITLE=text<br> 
  26. VALIGN=BOTTOM | TOP<br> 
  27. EVENT= script<br> 
  28. </div></fieldset>

—————————————
cellspacing和cellpadding
cellspacing ： 表格单元和表桥单元之间的距离(表格单元线框之间的距离)。
cellpadding ：表格单元线框和表格单元中的内容之间的距离。

posted @ 2008-01-06 22:03  胡枫  阅读(452)  评论(0)  编辑  收藏  举报