常用html、demo代码
发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,475,396阅读
暗网网址导航hidden wiki
http://zqktlwi4fecvo6ri.onionRun code
Cut to clipboard
HTML特殊字符编码对照表
console.log(allnum);
javascript:;
vertical-align:middle;
strconv=yes+js
echo str_ireplace("WORLD","Shanghai","Hello world!");//不区分大小写
<a href="javascript:scroll(0,0)">返回顶部</a>
jquery多个节点绑定同一个事件
$('#begin,#end') 用逗号隔开
target="_blank"
index.php?g=Admin&m=Login
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
location.href = url;
autocomplete="off"
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="提交" />
<input type="button" value="提交">
</form>
$.ajax({
type: "POST",
url:'/index.php?g=User&m=Post&a=Message&ajax=ajax',
data:$('#myform').serialize(),
error: function(request) {
alert("提交失败");
},
success: function(data) {
if(data>0){
alert('留言提交成功！');
location.reload();
}else alert("提交失败");
}
});
function ajaxpost(tel,pass){
$.ajax( {
url:"/index.php/Home/Register/is_login.html",
type: "post",
data:"tel="+tel+"&pass="+pass,
//dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
}
});
}
<a href="javascript:scroll(0,0)">顶部</a> <a href="#copy">底部</a>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
Run code
Cut to clipboard
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
</head>
<body>
</body>
</html>Run code
Cut to clipboard
$.ajax( {
url: '/index.php?s=/addon/WeiSite/WeiSite/ForgetPassword/tel/'+shoujihao+'/codeddd/'+codeddd+'.html', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
//dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//var result = $(data).find("另一个html页面的指定的一部分").html();
}
});Run code
Cut to clipboard
<link rel="apple-touch-icon" size="72x72" href="/icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="/icon-iphone4.png" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />Run code
Cut to clipboard
I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']Run code
Cut to clipboard
<meta name="title" content="标题">
<meta name="author" content="作者">
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<meta name="copyright" content="lizhenqiu.com">
移动端UC /QQ 浏览器的部分私有Meta 属性
下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性，都来自其开发者文档（UC开发者中心，左下一doc文档，QQ浏览器）。
UC 浏览器的部分私有Meta 属性
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
QQ 浏览器x5内核定制标签说明
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />
对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。Run code
Cut to clipboard
$("p").css("color","red");
//同时设置字体大小和背景色
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Run code
Cut to clipboard
header('Content-Type:text/html;charset=utf-8'); //避免输出乱码
<img title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />
Run code
Cut to clipboard
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://lizhenqiu.com/templates/default/style.css" type="text/css" media="screen">
<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>Run code
Cut to clipboard
Yourphp手册
简单文本编辑器
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> lizhenqiu.comRun code
Cut to clipboard
Chrome提供了一个简单的方法。首先，按“F12”打开控制台，然后输入：
document.designMode = "on"Run code
Cut to clipboard
添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面
javascript:(function(){document.designMode = "on" })();Run code
Cut to clipboard
接下来，你就可以编辑屏幕上的文本内容了。
编辑器
data:text/html, <html contenteditable>Run code
Cut to clipboard
如果你想找回不小心关闭的Tab页面，只需要同时按下“Control"（Mac用户请按“Command”）、“Shift"和“T”。
js随机数
function getRandom(n){
return Math.floor(Math.random()*n+1)
}Run code
Cut to clipboard
top.location.href 和 localtion.href 有什么不同
top.location.href=”url”Run code
Cut to clipboard
在顶层页面打开url（跳出框架）
self.location.href=”url”Run code
Cut to clipboard
仅在本页面打开url地址
parent.location.href=”url”Run code
Cut to clipboard
在父窗口打开Url地址
this.location.href=”url”Run code
Cut to clipboard
用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来 禁止frame引用 如果页面当中有自定义的frame的话，也可以将parent self top换为自定义frame的名称 效果就是在自定义frame窗口打开url地址
实际中可能这样使用
if(top !== self){ top.location.href = location.href; }Run code
Cut to clipboard
以下是从网上找到的一个例子，不是很直观， 我加了上面那三行代码， 可以先去掉， 再加上， 看一下效果，就很清楚了 以下是top.htm 代码
<script language=javascript> function rs(){
if(top !== self){ top.location.href = location.href; } parent.left.location.href="top.htm" parent.bot.location.href="top.htm" } < /script> < input type=button name=name value="ksdj" onclick=rs();>Run code
Cut to clipboard
以下是一个随意文件名的htm文件:
<FRAMESET COLS="150,*"> < FRAME SRC="left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="top.htm" name=top> < FRAME SRC="bot.htm" name=bot> < /FRAMESET> < /FRAMESET> Run code
Cut to clipboard
top表示主窗口，location表示当前窗口，如果你的文件只有一个框架，没有iframe和frmaeset，那么是完全一致的，没有区别。
top.location是在顶层frame中打开新页
window.location是在当前frame中打开新页
parent.location 在当前窗口的父窗口打开Url地址
<select id="isAudit" name="isAudit">
<option value="2">全部</option>
<option value="1" selected = "selected">通过</option>
<option value="0">未通过</option>
</select> Run code
Cut to clipboard
修改ID增加ID属性，修改class同理
$('.div').attr('id','newid');
如果是给标签添加class样式可以这样
$('#div').addClass('css类名');
strtotime("-1 week")， strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳Run code
Cut to clipboard
舒适网页配色方案
px像素转换rem单位工具
（支付宝）给作者钱财以资鼓励 （微信）→
有过 279 条评论 »
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%" align="center"> <param name="movie" value="../Public/flash/jinti.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <!--这里代码可使Flash背景透明 --> <embed src="../Public/flash/jinti.swf" width="100%" height="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"> </embed> </object><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css文字效果</title> <style type="text/css"> * { padding: 0; margin: 0; text-align: center; } body { padding-bottom: 200px; } div { font-size: 36px; } .header-item { line-height: 4; } .box1 { color: rgba(0, 0, 0, .3); } .box2 { text-shadow: 0 0 5px red; -webkit-text-fill-color : transparent; } .box3 { -webkit-text-stroke: 1px red; -webkit-text-fill-color : transparent; } .box4 { background: linear-gradient( to bottom, white, black); -webkit-text-fill-color : transparent; -webkit-background-clip : text; } .box5 { height: 300px; width: 1280px; margin: 0 auto; font-size: 70px; font-weight: 700; background: url(https://lizhenqiu.com/86f740e5196bec328ee09cca4dd9c827.jpg) no-repeat center; /*文字样式*/ text-align: center; /*图片文字样式*/ -webkit-text-fill-color: transparent; -webkit-background-clip: text; } .box6 { color:#fefefe; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, .9); } .box7 { color:#fefefe; text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd; } .box8 { background-color: #333; background-image: -webkit-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%); background-image: -o-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%); background-image: linear-gradient(to top right, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);; background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #111; } </style> </head> <body> <p class="header-item">1.透明文字</p> <div class="box1">我叫吕胖胖</div> <p class="header-item">2.模糊文字</p> <div class="box2">我叫吕肥肥</div> <p class="header-item">3.镂空文字</p> <div class="box3">我是吕胖胖，我有个弟弟叫吕肥肥</div> <p class="header-item">4.渐变文字</p> <div class="box4">我是吕肥肥，我有个哥哥叫吕胖胖</div> <p class="header-item">5.图片背景文字</p> <div class="box5">我们来自快乐的胖肥家族</div> <p class="header-item">6.立体文字</p> <div class="box6">胖哥，我们下楼找小美玩吧！</div> <p class="header-item">7.长阴影文字</p> <div class="box7">肥弟，你就不怕大熊揍你吗？</div> </body> </html>canvas的ellipse是个很棒的方法，可惜只有chrome和Opera支持
把ellipse中参数随便改改就会出现神奇的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> body{overflow:hidden} </style> <body> <canvas></canvas> </body> </html> <script> var canvas=document.querySelector('canvas'), ctx=canvas.getContext('2d'); canvas.width=window.innerWidth; canvas.height=window.innerWidth; ctx.lineWidth=1; ctx.strokeStyle='black'; var time=0; function draw(){ time+=0.01; ctx.clearRect(0,0,window.innerWidth,window.innerHeight); ctx.beginPath(); for(i=120;i--;) ctx.ellipse(window.innerWidth/2,window.innerHeight/2,i*2,100*Math.sin(time+i/50)+100,2*Math.sin(time/4)+i*2,time,6+time) ctx.stroke(); requestAnimationFrame(arguments.callee); } draw(); </script>JS判断用户是否正在浏览当前网页标签
<script> //网页当前状态判断 var hidden, state, visibilityChange,otitle; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } otitle=document.title; // 添加监听器，在title里显示状态变化 document.addEventListener(visibilityChange, function() { //document.title = document[state]; //console.log(document.visibilityState); if(document.visibilityState=='hidden') document.title = '(；°○° ) (x___x) 被离开';//(昏倒) // 被离开 // '+otitle; else document.title = otitle; }, false); //初始化页面状态 //document.title = document[state]; /*var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChange = function(){ if (!document[hiddenProperty]) { // console.log('页面非激活'); }else{ document.title ='页面非激活'; //console.log('页面激活') } } document.addEventListener(visibilityChangeEvent, onVisibilityChange);*/ </script>$("body").animate({"scrollTop":top})修改为，将html和body这两者都加上就可以了
$("html,body").animate({"scrollTop":top})解决方法，给svg高度和字体大小一致
<style> embed{font-size: 25px;height: 25px;} </style><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> table{ height: 50px; background: #000; color: white; font-size: 25px; } </style><style> embed{font-size: 25px;height: 25px;line-height:25px;} </style> <body> <table width="100%"> <tr> <th> <embed src="http://23.105.205.22/search.svg" type="image/svg+xml" /> </th> </tr> </table> </body> </html>js body滚动冒泡
js滚动冒泡
对局部需要滚动条的元素，尝试使用这个css属性： -webkit-overflow-scrolling: touch;两种方法，1.设置body：fixed.2.设置body height:100%,设置body的子元素div高度100%，overflow：hidden1. 行内元素或行内块元素在代码换行写时会出现左右的间隙，解决方法如下 1) 将代码写在一行上 2) 给父元素设置font-size：0，注意，子元素的字体大小需要单独设置 3) 给元素设置浮动 2. 当图片被放置于块元素中时，图片下方有间隙，解决方法如下 1) 给图片设置display:block; 2) 给图片设置vertical-align：top、middle、bottom 3) 给父元素设置font-size：0 4) 给图片设置浮动，同时清除父元素的塌陷 5) 给父元素加height 3. 该图片加超链接后，在IE浏览器下面图片有边框，解决方法如下 1) 给图片设置border：none 4. 给图片加超链接，然后设置鼠标移过超链接时显示边框的效果，但是发现边框只显示一半，解决办法如下 1) 给超链接设置display：block，同时要解决图片下方有缝隙的问题 5. 行内块元素上下错位问题，解决方法如下 1) 给行内块元素设置vertical-align：top、middle、bottom 2) 将元素浮动 6. 在不同浏览器下面元素的默认的margin和padding的值不相同，解决方法如下 1) *{margin:0;padding:0} 7. 上下的两个元素，默认的间距为较大的margin值，但是如果两个元素设置了浮动，那么这两个元素的间距就是margin之和 8. 父子关系的两个元素，如果给子元素设置float：left，且给子元素设置margin-left，那么在IE6下面margin-left加倍，解决方法如下 1) 给子元素设置：display：inline 9. 父子关系的两个元素，如果给父元素设置了text-align：center，那么在IE7及以下版本中，子元素会水平居中显示，但是在谷歌和火狐及IE高版本浏览器中子元素是不居中显示的，如果要子元素居中显示，解决方法如下： 1) 子元素设置margin：0 auto 10. 父子关系的两个元素，当给子元素设置margin-top时，父元素会同步下移，即子元素的margin-top实际上加到了父元素身上，解决方法如下： 1) 给子元素加margin-top的同时，给父元素加边框 2) 给子元素加margin-top的同时，给父元素加paddint-top：0.1px； 3) 给子元素加margin-top的同时，给父元素设置浮动 4) 不给子元素加margin-top，给父元素加padding-top 11. 两个兄弟元素，如果第一个元素设置了浮动，那么在IE6下面两个元素会在一行显示，且中间会有3px间隙，解决方法如下： 1) 给第二个元素也设置浮动 12. 一个元素如果没有设置height，那么这个元素的高度为自适应高度，此时如果没有内容，元素的高度会为0，如果有内容，那么元素的高度会被撑开。如果想做出如下效果：没有内容，元素有一个最小的高度，有内容元素的高度有内容撑开，可以给元素加min-height（该属性的作用就是给元素设置最小高度），但是需要注意的问题是IE6中不识别min-height，解决方法如下： 1) 给元素设置如下属性div{height:auto!important;height:200px;min-height:200px}，属性说明 height：auto！important，该属性的作用是让div的高度在所有浏览器中都是自适应高度，即高度有内容撑开 height：200px，该属性的作用是让IE6浏览器中有最小高度，因为IE6不识别min-height，所以只能用height，不用担心属性值覆盖问题，因为上一条属性中有！important min-height：200px，该属性的作用是解决除IE6之外的所有浏览器的最小高度问题 13. 元素中内容垂直居中无法使用vertical-align：middle，解决方法如下 1) 给元素设置行高和高度相同的效果 14. 文本和文本框在垂直方向上没有居中对齐（次现象出现IE8及以前的浏览器），解决方法如下 1) 给文本框设置vertical-align：middle，注意的是，该方法只解决了文本框和提示文字的垂直关系，但是文本框里面的内容的垂直对齐方式并没有解决（即在IE低版本中文本框中的内容靠上显示），解决方法是给文本框设置行高和高度相同 15. cursor：hand属性在谷歌、火狐、IE高版本中不以手的形式显示，解决方法如下 1) 用cursor：pointer替换cursor：hand 16. 当通过给li设置高度调节li的显示效果时，在IE低版本中会发现排版错位问题，解决方法如下 1) 不要给li设置height，可以通过给li设置line-height的方法来调节li的高度 17. IE6不允许将:hover加在非超链接元素上，解决方法如下 1) 适当的用超链接将内容包含起来，然后给超链接设置:hover效果 18. 清除浮动时使用.clearFloat类，IE6下面不起作用，原因是clearFloat所在元素没有宽度，解决方法： 1) 给父元素一个固定宽度 2) 给父元素加zoom:1 19. 清除浮动时使用overflow：hidden，IE6下面不起作用，原因是父元素没有固定宽度，解决方法 1) 给父元素加一个固定宽度 2) 给父元素加zoom:1PHP的time()函数生成当前时间的秒数，但是在一些情况下我们需要获取当前服务器时间和GMT(格林威治时间)1970年1月0时0分0秒的毫秒数，与Java中的currentTimeMilis()函数一样，觉得以下的函数最合适，特记录下来。
public function getCurrentMilis() { $mill_time = microtime(); $timeInfo = explode(' ', $mill_time); $milis_time = sprintf('%d%03d',$timeInfo[1],$timeInfo[0] * 1000); return $time; }