猫常用html、demo代码
发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,229,169阅读
暗网网址导航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 条评论 »
1、禁止缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> （width=device-wdth可写为640px IE不支持此写法） 2、不识别为电话号码、邮箱、地址：<meta name="format-detection" content="telephone=no,email=no,adress=no"> 3、删除默认的苹果工具栏、菜单栏(全屏显示：<meta name="apple-mobile-web-app-capable" content="yes"> 4、全屏显示：<meta name="apple-touch-fullscreen" ="yes"> 5、设置app应用下状态条的颜色，默认值default (白色) black（黑色），black-translucent（灰色半透明）如果设置为这个值会占据页面的px位置浮在页面上方20px高度 iphone4是40px ：<meta name="apple-mobile-web-app-status-bar-style" content="black"> 6、360模式固定为极速模式：<meta name="renderer" content="webkit"> 7、IE8浏览器的显示方式:IE=edge以IE最高版本显示，chrome=1 以谷歌浏览器模式渲染(GCF(Google Chrome Frame))：<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1"> 8、 告诉浏览器链接来源于哪里(计算网页上链接的访问量)：<meta name="referrer" content="never"> LINK 预解析技术，当浏览网页时，浏览器会在加载页面的时对页面中的域名进行解析缓存，当我们点击这些网页的链接时就不需要再进行DNS的解析，减少用户的等待时间，提高用户的体验 <link rel="dns-prefetch" href="xxx.com">请问下这样写有什么缺点。
最实用的18条SQL语句 1、创建数据库 CREATE DATABASE databaseName 2、删除数据库 DROP DATABASE databaseName 3、创建表及表结构 CREATE TABLE tableName（ columnName1 type NOT NULL AUTO_INCREMENT, columnName2 type， ... ...， PRIMARY KEY（columnName1，columnName2，... ...） ）DEFAULT CHARSET=utf8 4、删除表 DROP TABLE tableName 5、插入数据 INSERT INTO tableName（columnName1，columnName2，... ...）VALUES（value1，value2，... ...） 6、增加一列 ALTER TABLE tableName ADD COLUMN columnName type 7、删除一列 ALTER TABLE tableName DROP COLUMN columnName 8、修改列名 ALTER TABLE tableName CHANGE oldColumnName newColumnName type 9、查询表中所有字段中的所有数据 SELECT * FROM tableName 10、返回指定字段的数据 SELECT columnName1,columnName2，... ... FROM tableName 11、查询记录条数 SELECT COUNT(*) AS name FROM tableName 12、查询数据按指定的条件 SELECT * FROM tableName WHERE columnName=val 13、查询数据按升序或者降序，不指定DESC默认ASC升序 SELECT * FROM tableName ORDER BY columnName DESC 14、限制查询条件，一个参数时表示返回这个值所代表的数量，两个值时表示从第一个参数开始，且返回第二个参数值所代表的数量 SELECT * FROM tableName LIMIT n1,n2 15、模糊匹配，%在前表示前模糊，在后表示后模糊，可单独存在，也可成对存在 SELECT * FROM tableName WHERE columnName LIKE '%val' 16、更新表数据，WHERE限制条件可以不加，不加的情况下会更新表内所有字段的数据 UPDATE tableName SET columnName1=val，columnName2=val，... ... WHERE columnName=val 17、去重查询 SELECT * DISTINCT columnName FROM tableName 18、删除指定数据，如果WHERE限制条件不指定，将会删除所有数据 DELETE FROM tableName WHERE columnName=valCSS之伪元素 :first-line 用来选择第一行内容 :first-letter 用来选择文本第一个字母或文本 ::before 插入额外内容的头部 ::after 插入额外内容的尾部 ::selection 用来匹配突出显示的文本今天在写css3 中过渡transition效果时候，让伪元素出现hover效果，结果怎么也不成功，最后终于发现 元素的hover是写在伪元素之前的！！！div:hover::before 而不是 div::before:hover!!! 受教了。
以下都是在chrome下测试的，不同的浏览器可能有一些差异，所以不能依靠浏览器默认的规则来控制缓存，开发时一般会在服务器端做缓存策略的配置。（如给静态资源名称加MD5戳，让浏览器对静态资源进行缓存，但对各页面url的请求不进行缓存。当静态资源有更改时，MD5值也会更改，页面上引用静态资源的url也会更改，从而使浏览器根据新的url发起请求来获取更新后的静态资源）
前提条件：此url路径您已经使用浏览器最近访问过，并没有超过缓存的时间，比如您在前1分钟刚刚访问过此url路径。
F5、history.go(0)、location.reload()、location.reload(true) （对于所有资源，都会发送请求至服务器，对于有缓存并且还可用的请求返回304，没有缓存或者缓存已不可用的请求会重新下载数据）
无法跳过浏览器缓存，所有HTTP请求的请求头中通常包含了If-Modified-Since 或 If-None-Match字段,或者两者兼有.如果服务器认为被请求的文件没有发生变化,则返回304响应,浏览器直接从本地缓存中获取数据，否则服务器将传输最新的数据给浏览器，并且浏览器会更新缓存。
注意点：上述情况只适用于第一次请求时响应头中携带Last-Modified或者ETag字段的请求（如果响应头中包含了这些字段，浏览器会缓存文件，否则不会缓存，因为此时缓存文件没有任何意义，没有信息传给服务器进行比较），如果第一次请求时响应头中没有携带这些字段，那么再次发起该请求时，请求头里不会携带If-Modified-Since 或 If-None-Match字段，会从服务器重新获取数据。
CTRL+F5 （强制刷新，所有的请求都会重新下载数据）
所有请求头中没有上面的那两个头,却有Pragma: no-cache 或 Cache-Control: no-cache 字段,或者两者兼有.服务器看到no-cache这样的值就会把最新的数据传输过去。如果响应头中了携带Last-Modified或者ETag字段，浏览器就会缓存对应的数据。
地址栏回车 （有缓存（不管缓存是否还可用）的直接从缓存获取数据（地址栏url不管有没有对应的缓存，都会发送请求至服务器，只是缓存还可用时返回304，否则重新下载数据），不发送请求，没有缓存的从服务器下载数据）
地址栏url对应的请求跟history.go(0)、F5等 效果一样，如果第一次请求该url时响应头中携带Last-Modified或者ETag字段，那么该次回车时发起的请求会携带If-Modified-Since 或 If-None-Match字段，或者两者兼有，否则不会携带If-Modified-Since 或 If-None-Match字段；对于其他的请求，如果浏览器有对应的缓存（即有缓存且没过期），就直接从缓存里获取数据，根本不会发送请求到服务器，否则（这种情况基本就是第一次请求时响应头中没有携带Last-Modified或者ETag字段的请求或者缓存过期的请求）就发送请求到服务器，重新下载数据。
a标签、location.href、location.replace跳转 （有缓存（不管缓存是否还可用）的直接从缓存获取数据，不发送请求，没有缓存的从服务器下载数据）
对于所有的请求，如果浏览器有对应的缓存，就直接从缓存里获取数据，不会发送请求到服务器，否则就发送请求到服务器，重新下载数据。
浏览器前进后退按钮、history.go、history.forward、history.go（history.go(0)除外）
所有数据都直接从缓存里获取，但js会重新执行。如果该页面是用ajax获取数据的，那么不管前进或者后退到该页面时，都会重新ajax请求数据。
//获取输入的值 var name=document.getElementById("name").value; //JavaScript form表单验证 onsubmit="return validate_form(this)"$(this).css('max-height','');$(this).css('maxHeight','');
不能是空值
正确代码
$(this).css('maxHeight','none');jq设置css空值''某些情况下无效style删除
<style>#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption,#imagelightbox-nav{-webkit-animation:fade-in .25s linear;-moz-animation:fade-in .25s linear;-o-animation:fade-in .25s linear;animation:fade-in .25s linear} #imagelightbox-loading,#imagelightbox-loading div{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%} #imagelightbox-loading{width:2.5em;height:2.5em;background-color:#444;background-color:rgba( 0,0,0,.5 );position:fixed;z-index:10003;top:50%;left:50%;padding:0.625em;margin:-1.25em 0 0 -1.25em;-webkit-box-shadow:0 0 2.5em rgba( 0,0,0,.75 );-moz-box-shadow:0 0 2.5em rgba( 0,0,0,.75 );box-shadow:0 0 2.5em rgba( 0,0,0,.75 )} #imagelightbox-loading div{width:1.25em;height:1.25em;background-color:#fff;-webkit-animation:imagelightbox-loading .5s ease infinite;-moz-animation:imagelightbox-loading .5s ease infinite;-o-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite} @-webkit-keyframes imagelightbox-loading{from{opacity:.5;-webkit-transform:scale( .75 )} 50%{opacity:1;-webkit-transform:scale( 1 )} to{opacity:.5;-webkit-transform:scale( .75 )} }@-moz-keyframes imagelightbox-loading{from{opacity:.5;-moz-transform:scale( .75 )} 50%{opacity:1;-moz-transform:scale( 1 )} to{opacity:.5;-moz-transform:scale( .75 )} }@-o-keyframes imagelightbox-loading{from{opacity:.5;-o-transform:scale( .75 )} 50%{opacity:1;-o-transform:scale( 1 )} to{opacity:.5;-o-transform:scale( .75 )} }@keyframes imagelightbox-loading{from{opacity:.5;transform:scale( .75 )} </style> <div id="imagelightbox-loading"><div></div></div>