HTML5随笔

flyxiang228 · 发表于 2013-1-29 09:09:25

<!Doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>HTML5 TEST</title><style type="text/css">@font-face{ font-family:''; src:url(*.ttf);}.row:nth-child(even){ background:#dde;}.row:nth-child(odd){ background:white;}div{ display:inline-block;}input[type="text"]{ background:#eee;}dd:not(.box){ color:#00c;}dd:not(span){ display:block;}h2:first-child{}div.text>div{}h2 + header{}.div{ text-overflow:ellipsis; -webkit-column-count:2; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 0.00px; color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75); background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00)); }.div2{ color: hsla(128 75%, 33%, 1.00); face: border-radius: 0px; left eye: border-radius: 0px; right eye: border-radius: 0px; base white: border-radius: 0px; mouth: border-radius: 0px; nose: border-radius: 0px; left black eye: border-radius: 0px; right black eye: border-radius: 0px; background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)); text-shadow:rgba(64, 64, 64, 0.5) 0 0 0; box-shadow:rgba(64, 64, 64, 0.5) 0 0 0; border-radius: 0px; -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0))); }.div3{ background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 0 center repeat-x;}.box { display: -webkit-box; -webkit-box-orient: horizontal | vertical ;}.box .one, .box .two { -webkit-box-flex: 1;}.box .three { -webkit-box-flex: 3;}</style></head><body><div class="tab"> <div class="tabnav"> <span>HOME</span> <span>ABOUT US</span> <span>CONTACT US</span> <span>CONTACT US</span> <span>CONTACT US</span> <span>CONTACT US</span> </div> <div class="tabcontents"> </div></div><div class="top"> <header> </header></div><ul id="row"> <li class="row">ROW1</li> <li class="row">ROW2</li> <li class="row">ROW3</li> <li class="row">ROW4</li> <li class="row">ROW5</li> <li class="row">ROW6</li></ul><div id="clickme">click me</div><canvas id="canvas" width="600" height="300"></canvas><form action="" method=""> <p><input type="text" required /></p> <p><input type="email" value="wangx@telligem.com" /></p> <p><input type="range" min="0" max="50" value="10" /></p> <p><input type="data" min="2011/05/19" max="2011/12/12" value="2011/05/19" /></p> <p><input type="search" results="10" placeholder="Search..." /></p> <p><input type="tel" placeholder="(555) 555-555" pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$" /></p> <p><input type="color" placeholder="e.g.#bbbbbb" /></p> <p><input type="number" step="1" min="-5" max="10" value="0" /></p> <p><input type="submit" value="SUBMIT" /></p></form><audio id="audio" src="*.mp3" controls></audio><video id="video" src="movie.webm" autoplay controls></video><svg width="600" height="300"> <circle id="circle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert("hello");" /></svg><div id="demo"></div><script>var row =document.getElementById("row").getElementsByTagName('li');//var rowli = row.getElementsByTagName('li');//alert(row.length);for(var i=0, rl=row.length; i<rl; i++){ row[i].onclick = (function(j){ return function (){ alert(j+1); } })(i);}function testpro(data){ this.data = data;} var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = "round"; canvasContext.strokeStyle = "rgba(255, 127, 0, 0.5)"; canvasContext.stroke(); document.getElementById("audio").muted = false; document.getElementById("video").play(); //javascript 获取本地时间 document.getElementById("demo").innerHTML=Date(); function refresh(parameter){ if(typeof(arguments[0] == "object")){ alert("this is object"); }};var cm = document.getElementById("clickme");cm.onclick = function(){ clickme();};var fruits = ['Banana', 'Orange', 'Apple', 'Mango'];document.write("<br/>" + fruits.constructor);//concat数组组合方法var parents = ['parent001', 'parent002'], childrens = ['children001', 'children001'];var newgrop = parents.concat(childrens);document.write('<br/>' + newgrop);document.write('<br/>' + parents.valueOf() + '<hr/>');//about javascript prototype method Math partvar pi = Math.cos(Math.PI);document.write('<br/>' + pi + '<hr/>');var clickme = function(){ alert('click me, ^v^');}document.write(navigator.appName + '<br/>' + navigator.appCodeName + '<br/>' + navigator.appVersion + '<br/>' + navigator.cookieEnabled + '<br/>' + navigator.platform+'<br/>' + navigator.userAgent + '<br/>' + navigator.javaEnabled() + '<br/>');document.write('<hr/>');//返回获取标签集合document.write(document.getElementsByTagName('body').length);function d(){ document.getElementById("demo").innerHTML=Date();}var Clock = setInterval('d()', 1000);clearInterval();</script><table class="verisign" width="135" border="0" cellpadding="2" cellspacing="0" title="Click to Verify - This site chose VeriSign SSL for secure e-commerce and confidential communications."><tr><td width="135" align="center" valign="top"><script type="text/javascript" src="https://seal.verisign.com/getseal?host_name=www.capxg.com&amp;size=S&amp;use_flash=NO&amp;use_transparent=NO&amp;lang=en"></script><br /><a href="http://www.verisign.com/ssl-certificate/" target="_blank" style="color:#000000; text-decoration:none; font:bold 7px verdana,sans-serif; letter-spacing:.5px; text-align:center; margin:0px; padding:0px;">ABOUT SSL CERTIFICATES</a></td></tr></table></body></html>

		自动登录	找回密码
密码			立即注册