<![CDATA[Andy's Blog]]> http://www.inlco.cn/ zh-cn PBlog2 v2.4 Andy's Blog http://www.inlco.cn/images/logos.gif http://www.inlco.cn/ Andy's Blog http://www.inlco.cn/article/109.htm <![CDATA[常用JS大收集(二)]]> liujunzuq@163.com(andy) Wed,02 Dec 2009 14:01:25 +0800 http://www.inlco.cn/default.asp?id=109   <body   onblur="this.focus();">  
    
  22.不要滚动条?    
  让竖条没有:    
  <body   style="overflow:scroll;overflow-y:hidden">    
  </body>    
  让横条没有:    
  <body   style="overflow:scroll;overflow-x:hidden">    
  </body>    
  两个都去掉？更简单了    
  <body   scroll="no">    
  </body>    
    
  23.怎样去掉图片链接点击后，图片周围的虚线？  
  <a   href="#"   onFocus="this.blur()"><img   src="/blog/logo.jpg"   border=0></a>  
    
  24.电子邮件处理提交表单  
  <form   name="form1"   method="post"   action="mailto:****@***.com"   enctype="text/plain">    
  <input   type=submit>  
  </form>  
    
  25.在打开的子窗口刷新父窗口的代码里如何写？  
  window.opener.location.reload()  
    
  26.如何设定打开页面的大小  
  <body   onload="top.resizeTo(300,200);">  
  打开页面的位置<body   onload="top.moveBy(300,200);">  
    
  27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动    
  <STYLE>    
  body    
  {background-image:url(/blog/logo.gif);   background-repeat:no-repeat;    
  background-position:center;background-attachment:   fixed}    
  </STYLE>    
    
  28.   检查一段字符串是否全由数字组成  
  <script   language="Javascript"><!--  
  function   checkNum(str){return   str.match(//D/)==null}  
  alert(checkNum("1232142141"))  
  alert(checkNum("123214214a1"))  
  //   --></script>  
    
  29.   获得一个窗口的大小  
  document.body.clientWidth;   document.body.clientHeight  
    
  30.   怎么判断是否是字符  
  if   (/[^/x00-/xff]/g.test(s))   alert("含有汉字");  
  else   alert("全是字符");  
    
  31.TEXTAREA自适应文字行数的多少  
  <textarea   rows=1   name=s1   cols=27   onpropertychange="this.style.posHeight=this.scrollHeight">  
  </textarea>  
    
  32.   日期减去天数等于第二个日期  
  <script   language=Javascript>  
  function   cc(dd,dadd)  
  {  
  //可以加上错误处理  
  var   a   =   new   Date(dd)  
  a   =   a.valueOf()  
  a   =   a   -   dadd   *   24   *   60   *   60   *   1000  
  a   =   new   Date(a)  
  alert(a.getFullYear()   +   "年"   +   (a.getMonth()   +   1)   +   "月"   +   a.getDate()   +   "日")  
  }  
  cc("12/23/2002",2)  
  </script>  
    
  33.   选择了哪一个Radio  
  <HTML><script   language="vbscript">  
  function   checkme()  
  for   each   ob   in   radio1  
  if   ob.checked   then   window.alert   ob.value  
  next  
  end   function  
  </script><BODY>  
  <INPUT   name="radio1"   type="radio"   value="style"   checked>Style  
  <INPUT   name="radio1"   type="radio"   value="barcode">Barcode  
  <INPUT   type="button"   value="check"   onclick="checkme()">  
  </BODY></HTML>  
    
  34.脚本永不出错  
  <SCRIPT   LANGUAGE="JavaScript">    
  <!--   Hide    
  function   killErrors()   {    
  return   true;    
  }    
  window.onerror   =   killErrors;    
  //   -->    
  </SCRIPT>  
    
  35.ENTER键可以让光标移到下一个输入框  
  <input   onkeydown="if(event.keyCode==13)event.keyCode=9">  
    
36.   检测某个网站的链接速度：  
  把如下代码加入<body>区域中:  
  <script   language=Javascript>  
  tim=1  
  setInterval("tim++",100)  
  b=1  
  var   autourl=new   Array()  
  autourl[1]="www.njcatv.net"  
  autourl[2]="javacool.3322.net"  
  autourl[3]="www.sina.com.cn"  
  autourl[4]="www.nuaa.edu.cn"  
  autourl[5]="www.cctv.com"  
  function   butt(){  
  document.write("<form   name=autof>")  
  for(var   i=1;i<autourl.length;i++)  
  document.write("&lt;input   type=text   name=txt"+i+"   size=10   value="/blog/测试中......>"   =》<input   type=text    
  name=url"+i+"   size=40>   =》<input   type=button   value=GO    
    
  onclick=window.open(this.form.url"+i+".value)><br>")  
  document.write("<input   type=submit   value=刷新></form>")  
  }  
  butt()  
  function   auto(url)  
  else  
    
  b++  
  }  
  function   run(){for(var   i=1;i<autourl.length;i++)document.write("&lt;img   src=http://"+autourl+"/"+Math.random()+"   width=1   height=1    
    
  onerror=auto("http://"+autourl+"")>")}  
  run()</script>  
    
  37.   各种样式的光标  
  auto   ：标准光标  
  default   ：标准箭头  
  hand   ：手形光标  
  wait   ：等待光标  
  text   ：I形光标  
  vertical-text   ：水平I形光标  
  no-drop   ：不可拖动光标  
  not-allowed   ：无效光标  
  help   ：?帮助光标  
  all-scroll   ：三角方向标  
  move   ：移动标  
  crosshair   ：十字标  
  e-resize  
  n-resize  
  nw-resize  
  w-resize  
  s-resize  
  se-resize  
  sw-resize  
    
  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.在规定时间内跳转  
  <META   http-equiv=V="REFRESH"   content="5;URL=http://www.williamlong.info">    
    
  40.网页是否被检索  
  <meta   name="ROBOTS"   content="属性值">  
  　　其中属性值有以下一些:  
  　　属性值为"all":   文件将被检索，且页上链接可被查询；  
  　　属性值为"none":   文件不被检索，而且不查询页上的链接；  
  　　属性值为"index":   文件将被检索；  
  　　属性值为"follow":   查询页上的链接；  
  　　属性值为"noindex":   文件不检索，但可被查询链接；  
  　　属性值为"nofollow":   文件不被检索，但可查询页上的链接。  
    
  最大化窗口？  
  <script   language="JavaScript">  
  <!--  
  self.moveTo(0,0)  
  self.resizeTo(screen.availWidth,screen.availHeight)  
  //-->  
  </script>  
    
      
    
    
  解决问题：由于层与下拉框之间的优先级是：下拉框   &gt;   层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的   z-index   属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：  
    
  <div   id="menu"   style="position:absolute;   visibility:hidden;   top:20px;   left:20px;   width:100px;   height:200px;   background-color:#6699cc;">  
  <table>  
      <tr><td>item   1</td></tr>  
      <tr><td>item   2</td></tr>  
      <tr><td>item   3</td></tr>  
      <tr><td>item   4</td></tr>  
      <tr><td>item   5</td></tr>  
      </table>  
      <iframe   src="/blog/javascript:false"   style="position:absolute;   visibility:inherit;   top:0px;   left:0px;   width:100px;   height:200px;   z-index:-1;   filter='progid XImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>  
  </div>  
    
  <a   href="#"   onclick="document.getElementById('menu').style.visibility='visible'">menu</a>  
    
  <form>  
      <select><option>A   form   selection   list</option></select>  
  </form>  
    
  输入框也可以做的很漂亮了  
  <div   align="center"><input   type="hidden"   name="hao"   value="yes">  
                              外向数：<input    
              name=answer    
              style="color:   rgb(255,0,0);   border-left:   medium   none;   border-right:   medium   none;   border-top:   medium   none;   border-bottom:   1px   solid   rgb(192,192,192)">  
                          　没回答的题数：<input    
              name=unanswer   id="unanswer"    
              style="color:   rgb(255,0,0);   border-left:   medium   none;   border-right:   medium   none;   border-top:   medium   none;   border-bottom:   1px   solid   rgb(192,192,192)">  
                          <br>  
                          总得分:  
                          <input    
              name=score   id="score"    
              style="color:   rgb(255,0,0);   border-left:   medium   none;   border-right:   medium   none;   border-top:   medium   none;   border-bottom:   1px   solid   rgb(192,192,192)">  
                          　结　　　　论:  
                          <input    
              name=xgjg   id="xgjg"    
              style="color:   rgb(255,0,0);   border-left:   medium   none;   border-right:   medium   none;   border-top:   medium   none;   border-bottom:   1px   solid   rgb(192,192,192)">  
                          <br>  
                          <br>    
                            
                          <input   onClick=processForm(this.form)   style="FONT-FAMILY:   宋体;   FONT-SIZE:   9pt"   type=button   value=查看结果   name="button">    
                            <input   type="reset"   name="Submit"   value="重做">  
                          </div>  
  注意：修改<body>为<body   onload="max.Click()">即为打开最大  
]]> http://www.inlco.cn/article/108.htm <![CDATA[常用JS大收集(一)]]> liujunzuq@163.com(andy) Wed,02 Dec 2009 13:59:09 +0800 http://www.inlco.cn/default.asp?id=108   <table   border   oncontextmenu=return(false)><td>no</table>   可用于Table  

    
  2.   <body   onselectstart="return   false">   取消选取、防止复制  

    
  3.   onpaste="return   false"   不准粘贴  

    
  4.   oncopy="return   false;"   oncut="return   false;"   防止复制  

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

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

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

    
  8.   永远都会带着框架  
  <script   language="JavaScript"><!--  
  if   (window   ==   top)top.location.href   =   "frames.htm";   //frames.htm为框架网页  
  //   --></script>  
    

  9.   防止被人frame  
  <SCRIPT   LANGUAGE=JAVASCRIPT><!--    
  if   (top.location   !=   self.location)top.location=self.location;  
  //   --></SCRIPT>  
    

  10.   网页将不能被另存为  
  <noscript><iframe   src="/blog/*.html>";</iframe></noscript>    
    

  11.   <input   type=button   value=查看网页源代码    
  onclick="window.location   =   "view-source:"+   "http://www.williamlong.info"">  
    

  12.删除时确认  
  <a   href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>    
    

  13.   取得控件的绝对位置  
  //Javascript  
  <script   language="Javascript">  
  function   getIE(e){  
  var   t=e.offsetTop;  
  var   l=e.offsetLeft;  
  while(e=e.offsetParent)  
  alert("top="+t+"/nleft="+l);  
  }  
  </script>  
    
  //VBScript  
  <script   language="VBScript"><!--  
  function   getIE()  
  dim   t,l,a,b  
  set   a=document.all.img1  
  t=document.all.img1.offsetTop  
  l=document.all.img1.offsetLeft  
  while   a.tagName&lt;>"BODY"  
  set   a   =   a.offsetParent  
  t=t+a.offsetTop  
  l=l+a.offsetLeft  
  wend  
  msgbox   "top="&t&chr(13)&"left="&l,64,"得到控件的位置"  
  end   function  
  --&gt;</script>  
    

  14.   光标是停在文本框文字的最后  
  <script   language="javascript">  
  function   cc()  
  {  
  var   e   =   event.srcElement;  
  var   r   =e.createTextRange();  
  r.moveStart("character",e.value.length);  
  r.collapse(true);  
  r.select();  
  }  
  </script>  
  <input   type=text   name=text1   value="123"   onfocus="cc()">  
    

  15.   判断上一页的来源  
  javascript:  
  document.referrer

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

  17.屏蔽功能键Shift,Alt,Ctrl  
  <script>  
  function   look(){    
  if(event.shiftKey)    
  alert("禁止按Shift键!");   //可以换成ALT　CTRL  
  }    
  document.onkeydown=look;    
  </script>  
    

  18.   网页不会被缓存  
  <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">  
    

  19.怎样让表单没有凹凸感？  
  <input   type=text   style="border:1   solid   #000000">    
  或  
  <input   type=text   style="border-left:none;   border-right:none;   border-top:none;   border-bottom:    
    
  1   solid   #000000"></textarea>  
    

  20.<div><span>&<layer>的区别？    
  <div>(division)用来定义大段的页面元素，会产生转行    
  <span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行    
  <layer>是ns的标记，ie不支持，相当于<div>
]]> http://www.inlco.cn/article/107.htm <![CDATA[CSS解决网页挂马问题]]> liujunzuq@163.com(andy) Wed,04 Nov 2009 13:36:54 +0800 http://www.inlco.cn/default.asp?id=107
一、

iframe{n1ifm:e­xpression（this.src=‘about:blank’，this.outerHTML=‘’）;}/*这行代码是解决挂IFRAME木马的哦*/

script{nojs1:e­xpression（（this.src.toLowerCase（）.indexOf（‘http’）==0）？document.write（‘木马被成功隔离！’）：‘’）;}

原理：将《script》标记的src拿出来转为小写，再看是不是以“http”开头的外域JS脚本文件，如果是，则页面内容清空并写出“木马被成功隔离！”。反之正常显示。 缺点：访客无法看到被感染了《script》木马的页面。

二、

iframe{nifm2:e­xpression（this.src=‘about:blank’，this.outerHTML=‘’）;}

script{no2js:e­xpression（（this.src.toLowerCase（）.indexOf（‘http’）==0）？document.close（）：‘’）;}

原理：将外域的JS文件的document.write（）使用document.close（）强制关闭。木马内容还没有来得及写完，只有部分被强制缓存输出了，剩下的不会再写了。

三、

iframe{ni3fm:e­xpression（this.src=‘about:blank’，this.outerHTML=‘’）;}

script{n3ojs:e­xpression（（this.src.toLowerCase（）.indexOf（‘http’）==0）？document.execCommand（‘stop’）：‘’）;}

原理：同到外域的JS文件，立即调用IE私有的execCommand方法来停止页面所有请求，所以接下来的外域JS文件也被强制停止下载了。就像我们点了浏览器的“停止”按钮一样。看来这是JS模拟IE停止按钮的一种方法。

四、

iframe{nif4m:e­xpression（this.src=‘about:blank’，this.outerHTML=‘’）;}

script{noj4s:e­xpression（if（this.src.indexOf（‘http’）==0）this.src=‘res://ieframe.dll/dnserror.htm’）;}

原理：将外域的JS文件的src重写成本地IE404错误页面的地址，这样，外域的JS代码不会下载。

五、

iframe{nifm5:e­xpression（this.src=‘about:blank’，this.outerHTML=‘’）;}

script{noj5s:e­xpression（（this.id.toLowerCase（）.indexOf（‘vok’）！=-1）？document.write（‘木马被成功隔离！’）：‘’））;}

第五种方案的页面HTML源代码《script》中要加入以“lh”为前缀的id，如lhWeatherJSapi，《script src=“***/**.js” id=“lhSearchJSapi”》《/script》

]]> http://www.inlco.cn/article/106.htm <![CDATA[SEO中的几个错误认识]]> liujunzuq@163.com(andy) Thu,10 Sep 2009 13:33:10 +0800 http://www.inlco.cn/default.asp?id=106     很多新手seo在seo学习的过程中还在相信几年前那些一尘不变的观点，所以在自己做站的过程中什么都是问题，不如一定要把页面静态化，一定要在标题上加h1标签，一定要css所有页面。其实完全没有必要。seo中没有太过具体的技术上的东西。

网站页面URL一定要静态化。
    这个现在我都不怎么觉得有很大的区别了，早期的搜索引擎技术不成熟，在对于动态和静态抓去上面是有不同，对于带问号或者其他符号的繁琐的动态URL地址抓去上有点障碍。但是在现在，搜索引擎技术已经很成熟了，对于动态地址同样可以抓取。静态地址是比动态地址有优势，但是这个优势是微乎其微的。

    而且google管理员中文博客当中明确了说明了，不建议站长有意识的修改地址，有时候动态地址还更加的方便google爬虫通过地址参数读取地址中的含义，请看这篇文章动态网址与静态网址

一定要全站div+css
      来讲讲为什么用div+css有利于搜索引擎抓取。第一，同样的页面，在用传统的table表格和css做出来的网页页面代码和网页大小就不一样，搜索引擎蜘蛛抓去的时候，代码少的肯定抓取速度高。第二，就是页面的显示速度了，用表格做出来的网页是全部下载，全部显示，对于带宽小，或页面代码非常大的网页很明显的可以看出来。

    而css做出来的网页，是下载一点，显示一点，这样显示速度就有明显的区别了。

    所以到底有没有必要全站css这也得看实际情况了，如果网页很简单，没有复杂的背景，或者其他颜色什么的，我感觉用表格做如果很简单方便的话，用表格去做完全没什么问题。

    还是看情况而定，假如是做新站的话，那最好还是div+css，假如网站重新架构的话，需要从表格转变为css还得考虑，看下改了后代码大小和显示速度，看下换成css网站的工程量有多大，根据实际情况而定。

一定要加Keywords和Description
       我最开始学seo的时候也是以为关键词和描述写好了，网站就能得到很好的排名，而天天研究关键词和描述该怎么写。meta标签都是为搜索引擎提供参考的，也就是说只是参考作用。另一方面的意思就是说如果写的不准确，还不如不写。

    另一方面description本身就是动态的，搜索不同的词，出来的描述是不一样的，搜索引擎会自动为网站判断这些，所以没必要。有时候不加关键词和描述要比加了关键词描述效果好很多。
]]> http://www.inlco.cn/article/105.htm <![CDATA[初探 HTML5(转)]]> liujunzuq@163.com(andy) Thu,10 Sep 2009 13:22:18 +0800 http://www.inlco.cn/default.asp?id=105 html5如何而来？
HTML isn't a very good language！它亟待改进。
因此，1999年W3C停止了HTML的工作，2000年发布xhtml的第一个推荐版本。
2002年W3C发布XHTML 2.0第一个草案，令人吃惊的是：XHTML2.0不是向后兼容的（Web 的未来：XHTML 2.0(2003.1.1)）。
随着XHTML的越来越火，绝大多数人都认为它将是web的未来。然而终于有些人坐不住了，面对W3C对HTML的持续冷淡，2004年，由Apple, Mozilla Foundation 和Opera Software组成了The Web Hypertext Application Technology Working Group (WHATWG)，致力于发展HTML和创建Web applications所需的APIs。他们开始制定Web Applications 1.0 规范，这也就是后来HTML5。
WHATWG的努力没有白费，这份规范的草案在2007年通过了W3C的审核。
W3C组织了HTML工作组，并在2008年1月22日公开了第一份草案。
2009年7月2日，W3C宣布在年内停止XHTML 2的工作，而将资源投入转向HTML5工作组（XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5）
在标准化的春风吹满神州之际，xhtml2却溘然而止,HTML5取代上位，我们广大的web工作者是不是需要做什么呢？

我们不需要做什么！
HTML5 的目标是保持HTML当前标准HTML4.01和HTML的XML版本XHTML1.0 向后兼容。
同以前的HTML4一样：它没有名称空间或模式、元素不必结束、浏览器会宽容地对待错误。
对于XHTML1，它也没有什么排斥。
相反的，XHTML2才是不向后兼容的。
所以，我们并不需要非得做什么改变，才能适应在HTML5下面的页面工作。
当然HTML5不会仅仅如此而已，只是HTML5是想让不支持它的浏览器中能够平稳地退化。
随着浏览器的缓慢升级，HTML5的真正好处才会开始慢慢体现，当别人的网页通过html5实现了越来越多的功能之后。到时，你再虑是不是需要做什么——理论上讲，也是不晚的。
我们不需要做什么，但我们可以做的更多

HTML5能做什么？
一句话：很多！HTML5还在草案阶段，他的功能仍将扩展。
首先，我们应该知道，html5已经不只是Hypertext Markup Language，它更是一种Web Hypertext Application Technology。

1. html5增加了一些结构性（Sections）元素：header,footer,nav,section,article,aside，用来替代千篇一律的div布局，非常语义化。

2. 还有meter（数值尺），progress(进度表)，mark（标记）这些语义内联元素。通过自带的属性，可以进行很直接地描述。

3.一些交互元素。details（脚注），datagrid（网格控件——可动态显示树、列表和表格），menu和command（可以做交互菜单）

4. 媒体元素video,audio,source。不需要借助第三方插件，页面就能播放多媒体。

5. canvas元素。脚本绘图，它的最终目标是flash般的动画展示和交互体验。不要以为很遥远，canvas在FireFox1.5就有了，opera,safari也是一样支持甚早（这个标签是就是苹果的发明）。

6. 表单处理功能。HTML5吸收了WHATWG之前的Web Forms 2.0。验证数据是如此简单。

7. 页面元素的拖曳和编辑。

8. HTML5的离线存储技术 http://dev.w3.org/html5/webstorage/
......

好了， HTML5能做的够多了，但他还处在草案阶段，那关键是现在我们能做什么呢？

我们能做什么？
HTML5估计能在2012年之前成为W3C的候选推荐标准，不过在这之前，只要浏览器支持，我们都可以使用html5的功能。

1. HTML5新元素布局。
除了ie系列浏览器外，其它大多数浏览器都能识别HTML5的那些新元素标签，可以对其进行style，这就意味着它们可以使用HTML5的新元素标签进行页面布局。
但问题是ie系列浏览器是无法对其不承认的元素添加样式的，而缺少了IE的支持，大多数人都会束手束脚。解决这个问题的方法早已经了:HTML5 Shiv
很简单:
程序代码 程序代码

<script>
document.createElement("元素名称")
</script>


创建文档元素。
批量创建的方法:

程序代码 程序代码

(function(){
    if(!/*@cc_on!@*/0) return;    
    var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,event,source,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');    
    for(var i = 0, len = html5.length; i < len; i++ ) {        
    document.createElement(html5[i]);  
    }
})
();


现在在IE里也可以对HTML5元素进行布局了。
不过，在此之前，我们还需要对这些新元素定义基本的Display style,
这个工作本来一般是由浏览器完成的，比如FireFox的html.css。
现在只能自己对引进的HTML5元素进行定义了。
那么哪些需要定义成display:block;哪些又是不需要呢？这个我们可以看下W3C是怎么定义的：display-types

程序代码 程序代码

address, article, aside, blockquote, body, center, dd, dialog, dir,
div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
section, ul, xmp { display: block; }


刨除HTML老元素，以下这些元素:
article,aside,dialog,figure,footer,header,hgroup,nav,section可以定义为{display:block;}
这篇针对HTML 5 Reset Stylesheet的文章也可以参考下： http://html5doctor.com/html-5-reset-stylesheet/。文章在Eric的CSS Reset的基础上考虑HTML5新元素及W3C规范推荐下对元素进行了style reset。当然reset CSS本身就存在争议的，一般来说，reset CSS是你自己的style，很多东西都可以按你的意愿来定，当然不要太偏离W3C的元素设计本意。
接下来，使用HTML5新元素进行布局就可以随心所欲了
（还是悠着点好,有些元素的使用会产生冲突。而且这种让ie支持的方法使得整个布局都是依靠于js的）。
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


2. Drag & drop
Drag & drop是浏览器支持度比较高的HTML5内容：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


3. canvas
我们先看一些canvas的示例（不支持ie）：
http://www.agustinfernandez.com.ar/proyectos/canvas/
http://www.whatwg.org/demos/2008-sept/color/color.html
网上还有一些互动性蛮强的Demo.
canvas应用的发展无疑将威胁到也行进在富Web之路上的Flash和Silverligth这些Web插件。

canvas在safari,firefox,opera很早就有了支持，但IE缺迟迟不予支持，尽管他在ie8中已经开始支持多个HTML5功能。MS的同志很有理由这么做:“HTML 5标准制定之前,某些功能确实已经得以实现,例如Google Gears实现了离线应用程序功能,Flash和silverlight实现了类似Canvas API的功能.在下一代HTML规范中设置这些内容未必非常必要”。要知道MS在silverlight是花了很大力气。事实上，MS在参与HTML5之事上一直非常谨慎，并且希望精简HTML5。
Flash的所有者，HTML5参与者之一Adobe则表现的很轻松：“canvas还很弱，HTML 5 + CSS 3 可能要 10年的时间才能定稿，在这期间，Flash 会持续发展，并提供更好的用户体验”。

尽管IE没有支持canvas功能，但我们可以使用JS模拟达到：
http://excanvas.sourceforge.net
这是其中的一个Demo,试试你的IE:
3Dcanvas_For_IE.html

4. audio and video
使用FireFox3.5看看下面这个Video Demo。
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

我们没有引入flash播放器就能播放swf。


在下面这个页面里罗列了各浏览器所支持的HTML5功能：
Implementations in Web browsers

随着浏览器的升级，翻新，他们支持的东西会越来越多，提供给我们前端工作者发挥的空间也越来越大。

文章blog地址：http://www.cssass.com/blog/index.php/2009/402.html

HTML5王者归来! coming back soon...  期待吧....
]]> http://www.inlco.cn/article/104.htm <![CDATA[隔行换色的的讨论与实现]]> liujunzuq@163.com(andy) Wed,12 Aug 2009 15:18:23 +0800 http://www.inlco.cn/default.asp?id=104
一、CSS中的行为e­xpression

程序代码 程序代码

<style>
tr{ yexj00:e­xpression(this.style.background=(rowIndex%2==1)?'orange':'yellow')}
</style>
<table width=456 style="border-collapse:collapse; table-layout:fixed" border rules=cols>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>


注意：这种方法FF不支持

二、写两个样式，不同的行调用不同的样式

程序代码 程序代码

<ul>
<li class="color_a">...</li>
<li>...</li>
<li class="color_a">...</li>
<li>...</li>
</ul>


注意：这种方法对于程序员来说就比较郁闷了，因为他们在加程序的时候不大好循环。

三、用JS来实现

这样既避免了程序员在加程序时循环的困难，兼容性也很不错。

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.inlco.cn/article/103.htm <![CDATA[CSS实现边框双线的方法]]> liujunzuq@163.com(andy) Mon,10 Aug 2009 17:51:15 +0800 http://www.inlco.cn/default.asp?id=103
以下是《CSS属性、浏览器兼容与网页布局》中关于边框样式的部分内容：

8.8.3 边框样式
只定义边框的宽度并不会使元素显示边框，因为边框样式的默认设定为“none（无）”，边框样式规定了边框的线型（实线，双线，点线等），而且也包括4个方向的属性：border-top-style、border-right-style、border-bottom-style、border- left-style和缩写属性border-style。

其具体定义列表如下：

语法：
border-top- style: none | hidden | <关键字> | inherit
border-right- style: none | hidden | <关键字> | inherit
border-bottom- style: none | hidden | <关键字> | inherit
border-left- style: none | hidden | <关键字> | inherit

说明：

设定元素边框的线型值：
none：没有边框。该值迫使border-width的计算值为0。
hidden：和none相似，除非在表格元素中解决边框冲突时。

线型的关键字包括：
dotted：边框是一系列的点。
dashed：边框是一系列的短线条的段。
solid：边框是一条单一的线。
double：边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值。
groove：边框看上去好象是雕刻在画布之内。
ridge：和grove相反，边框看上去好象是从画布中凸出来。
inset：该边框使整个框看上去好象是嵌在画布中。
outset：和inset相反，该边框使整个框看上去好象是从画布中凸出来。
初始值：none
继承性：不继承
适用于：所有元素
媒体：视觉
计算值：同指定值

下面我们看看例子：
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

]]> http://www.inlco.cn/article/102.htm <![CDATA[三列自适应宽度的布局之左右固定中间自适应]]> liujunzuq@163.com(andy) Thu,23 Jul 2009 10:38:47 +0800 http://www.inlco.cn/default.asp?id=102
浮动定位

    使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。而在这里给我们提出了一个新的要求，希望有一个三列式布局，基中左栏要求固定宽度，并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和右栏的中间，根据左右栏的间距变化自动适应。这给布局提出了一个新的要求，而且单纯使用float属性与百分比属性并不能够实现，CSS目前还不支持百分比的计算精确到考虑左栏和右栏的占位，如果对中间栏使用100%宽度的话，它将使用浏览器窗口的宽度，而非左栏与右栏的中间间距，因此我们需要重新的思路来考虑这个问题。

绝对定位

在开始这样的三列布局之前，有必要了解一个新的定位方式——绝对定位。前面的浮动定位方式主要由浏览器根据对象的内容自动进行浮动方向的调整，但是这种方式不能满足定位需求时，就需要新的方法来实现，CSS提供的除去浮动定位之外的另一种定位方式就是绝对定位，绝对定位使用position属性来实现。

position　　用于设置对象的定位方式　　可用值：static/absolute/relative

对页面中的每一个对象而言，默认position属性都是static。
如果将对象设置为position:absolute，对象将根据整个页面的位置进行重新定位，当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：
程序代码 程序代码

#layout {
    position:absolute;
    top:20px;
    left:0px;
}


如果#layout使用了position:absolute;将会变成绝对定位模式，与此同时，当设置top:20px;时它将永远离浏览器窗口的上方20px，而left:0px;将保证它离浏览器左边距为0px。

注意：一个对象如果设置了position:absolute;它将从本质上与其他对象分离出来，它的定位模式不会影响其它对象，也不会被其它对象的浮动定位所影响，从某种意义上说，使用了绝对定位之后，对象就像一个图层一样浮在了网页之上。

绝对定位之后的对象，不会再考虑它与页面中的浮动关系，只需要设置对象的top,right,bottom,left四个方向的值即可。

而在本例中，使用绝对定位则能够很好地解决我们所提出的问题。同样，使用3个div形成我们的三个分栏结构：
程序代码 程序代码

#left {
    background-color: #E8F5FE;
    border: 1px solid #A9C9E2;
    height: 400px;
    width: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
}
#right {
    background-color: #FFE7F4;
    border: 1px solid #F9B3D5;
    height: 400px;
    width: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
}


这样，左栏将距左边left:0px;贴着左边缘进行显示，而右栏则将由right: 0px;使得右栏距右显示，而中间的#center将使用普通的CSS样式：
程序代码 程序代码

#center {
    background-color: #F2FDDB;
    border: 1px solid #A5CF3D;
    height: 400px;
    margin-right: 202px;
    margin-left: 202px;
}


对于#center，我们不需要再设定其浮动方式，只需要让它有左边外边距永远保持#lef与#right的宽度，便实现了两边各让出202px的自适应宽度，而左右两边让的距离，刚好让#left和#right显示在这个空间中，从而实现了而已要求。

整个代码：

程序代码 程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列左右固定宽度中间自适应</title>
<style>
body{
margin:0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 102px;
margin-left: 102px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>

<body>
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>
</body>
</html>
]]> http://www.inlco.cn/article/101.htm <![CDATA[很有用但是几乎被设计师遗忘了的标签]]> liujunzuq@163.com(andy) Wed,22 Jul 2009 13:34:03 +0800 http://www.inlco.cn/default.asp?id=101
对于表单，是网页中非常常用的元素。但是在web standard建站的时候，他的排版容易人遗忘，到了真正用到的时候就发现让人头疼，当然我也遇到过。我现在要介绍一个用<fieldset></label>标签制作漂亮而且具体亲和力的表单的方法。我们可以从这里面很好的看出<fieldset>标签的作用。


程序代码 程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;
}
* {
margin:0;
padding:0;
}
a {
color:#1E7ACE;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
h3 {
font-size:14px;
font-weight:bold;
}
pre,p {
color:#1E7ACE;
margin:4px;
}
input, select,textarea {
padding:1px;
margin:2px;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
border:1px #1E7ACE solid;
background:#D0F0FF;
}
#formwrapper {
width:450px;
margin:15px auto;
padding:20px;
text-align:left;
border:1px #1E7ACE solid;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #1E7ACE;
background:#fff;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #1E7ACE;
background:#fff;
}
fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldset div {
clear:left;
margin-bottom:2px;
}
.enter{ text-align:center;}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="formwrapper">
<h3>已注册用户登录</h3>
<form action="" method="post" name="apLogin" id="apLogin">
<fieldset>
<legend>用户登录</legend>
<div>
<label for="Name">用户名</label>
<input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
<label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label>
<input name="login791" type="submit" class="buttom" value="登录" />
</div>
<div class="forgotpass"><a href="#">您忘记密码?</a></div>
</fieldset>
</form><br />
<h3>未注册创建帐户</h3>
<form action="" method="post" name="apForm" id="apForm">
<fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p>
<div>
<label for="Name">用户名</label>
<input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />
*(最多30个字符)<br />
</div>
<div>
<label for="Email">电子邮箱</label>
<input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" size="18" maxlength="15" />
*(最多15个字符)<br />
</div>
<div>
<label for="confirm_password">重复密码</label>
<input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />
*<br />
</div>
<div>
<label for="AgreeToTerms">同意服务条款</label>
<input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
<a href="#" title="您是否同意服务条款">先看看条款？</a> *    </div>
<div class="enter">
<input name="create791" type="submit" class="buttom" value="提交" />
<input name="Submit" type="reset" class="buttom" value="重置" />
</div>
<p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br />
* 这些条款可能在未经您同意的时候进行修改.</strong></p>
</fieldset>
</form>
</div>
</body>
</html>
]]> http://www.inlco.cn/article/100.htm <![CDATA[轻松提高热门关键词（keywords）排名]]> liujunzuq@163.com(andy) Fri,17 Jul 2009 09:52:13 +0800 http://www.inlco.cn/default.asp?id=100
    一、网站域名的选择

    要选择有意义的，最好里面有关键词的拼音或者英文的域名。但是好记也是很重要的。

    二、网站主机的选择

    主机最好用独立IP，用VPS便宜，又是独立IP，这样可以避免搜索引擎的惩罚，如果是共用IP，里面有一个站被百度和google降权了，也会连累到你，那么你以前所做的工作就白白浪费了!

    三、网站上线的时间

    一个刚上线的网站，是不可能受到搜索引擎的喜欢，所以得从内容出发，让网站各个栏目都比较充实，都要有一定的内容。所以第一步选择域名的时候，新旧也是很重要的。

    四、网站的内容

    每天坚持原创5篇文章，最好可以围绕热门的关键词写一些原创或者伪原创的文章，内容的质量越高越好。

    五、网站的内部优化

    首页、栏目页、文章页，各页的关键词和描述不能都一样，如果是商业站，利用首页优化品牌和主要关键词，栏目页优化次要关键词,内容页优化长尾关键词。 从内页指向首页不能超过四次，顶部指向，中间指向，低部指向。

    六、网站的外部建设

    这步是最重要也是最浪费时间的一步，写软文、买外链、登陆分类目录，做友情链接，等等这些，网上这方面有很多介绍，技巧也不少，可以多学习。

    其实要想做一个成功的网站，在你一开始就要做一份SEO计划，决定你的SEO成败就看你定制的SEO计划书!但是不要单单的为了搜索引擎，要做到内容为王才是更重要的。

]]>