常用html、demo代码
发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,230,409阅读
暗网网址导航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 条评论 »
JavaScript整理 JavaScript是脚本语言 常用对话框： alert()——警告对话框，作用是弹出一个警告对话框 confirm()——带确定和取消按钮，返回True或false prompt()——弹出一个可以输入内容的对话框 JavaScript语法 基本数据类型与C#基本一样，万能变量var——可以随便存储其它类型的值，可以直接使用 显式转换： parseint()——转换为整数 parsefloat()——转换为小数 运算符：与C#一样 数学运算符：+ - * / % ++ --； 关系运算符：== != > >= < <=； 逻辑运算符:&& || !； 其它运算符:+= -= *= /= %= ?: 分支语句： if...else 循环语句： for（） 数组： new Array（）;——类型固定，长度不固定 数组属性：a.length；数组元素的个数 函数： function 函数名(参数){} function(){}——匿名函数 window对象： window.open("打开的网址""打开的位置") window.opener——打开此页面的上一个页面 window.close()——关闭当前页面 window.navigate("url")——超链接功能 window.moveTo(x,y)——移动浏览器至某一位置 window.resizeTo(x,y)——设置浏览器的宽高 window.scrollTo(x,y)——锚点功能 定时器： window.setTimeout(function(){},间隔执行的时间)——等待多久后执行，仅执行一遍 window.setInterval(function(){},间隔执行时间)——每隔多长时间执行一次，不会停止 window.history: window.history.back()——页面后退 window.history.forward()——页面前进 window.history.go(n)——前进后退,n为正数则前进n个页面，为负数则后退n个页面 window.location.href="url" ——超链接，主要 window.status——操作页面底部工具条的对象 window.document： docunment.getElementById("id")；根据id找，最多找一个； docunment.getElementsByName("name")；根据name找，找出来的是数组； docunment.getElementsByTagName("name")；根据标签名找，找出来的是数组； docunment.getElementsByClassName("name") 根据classname找，找出来的是数组； 操作内容： 普通元素： 1.innerHTML：赋值： var a= document.getElementById("id"); a.innerHTML = "<h1>aaaaaaa</h1>"; 有<h1></h1>元素标记会被编译 取值：会将此元素内的所有内容包括元素标记都取出来 2.interText 赋值：会将赋的东西原样呈现 取值：只取文本内容 表单元素：所有表单元素取值赋值全用value 操作属性： 添加修改属性：对象.setAttribute("属性名","值") 如果没有此属性，那么会添加进去 如果已经有了此属性，那么会修改此属性的值 删除属性：对象.removeAttribute("属性名") 获取属性：对象.getAttribute("属性名") 操作样式 添加、修改样式：对象.style.样式名称=值 获取样式：对象.style.样式名称 相关元素 var a = document.getElementById("id"); 取同辈的上一个和下一个元素： var b = a.previousSibling，找a的上一个同辈元素 var b = a.nextSibling，找a的下一个同辈元素 取父级元素：var b = a.parentNode，找a的上一级父级元素 取子级元素：childNodes[n]找第几个 注意：回车和空格都算作一个元素1.变量类型模糊，容易出现问题;
2.全局变量与函数内部变量同名时，在函数内部声明变量，声明位置虽然在后，但在这之前，此名变量已为‘undefined’;
var a = 'aaa'; function b() { console.log(a); var a = 'bbb'; console.log(a); } b(); console.log(a);输出：
undefined bbb aaa3.浮点数运算BUG，例如7*0.8=5.6000000000000005；
4.变量传递，对象为引用传递，数字和字符串是值传递；即函数内不能改变变量地址
var a = {}; var b = '我是b1'; a.name = 'aaaa'; (function(a,b) { a.name = 'bbbb'; b='我是b2'; a = {}; a.name = 'cccc'; console.log(a.name); console.log(b); })(a,b); console.log(a.name); console.log(b);输出cccc,我是b2,bbbb,我是b1
浏览器在执行JavaScript代码时会停止处理页面，当页面中有很多JavaScript文件或代码要加载时，将导致严重的延迟。尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载，但这些都不是一个好的解决方案。
下面是Google的建议。
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>这段代码的意思是等待页面加载完成后，然后再加载外部的“defer.js”文件。下面是测试结果。
text-align:justify; 所有浏览器都支持justify我的理解，使元素内部的子元素两端对齐，子元素当然只能是inline或inline-block。但justify对最后一行是无能为力的。我们在对齐姓名时，因为只有一行，当作最后一行，所以不会两端对齐的效果。
姓名对齐我们比较常用的是
（半个中文空格）， （一个中文空格）所以就想到了用text-align:justify;但怎么解决单行不能两端对齐呢，思路就是：
让浏览器认为这不是最后一行就行了
在元素里面加一个会换行的空的子元素比如:
<i style="display:inline-block;width:100%;height:0;"></i>例子：html结构
<ul class="arter"> <li><span>作品名称<i></i></span>： 宝贝儿</li> <li><span>作品类型<i></i></span>： 油画</li> <li><span>艺术家<i></i></span>： 张玉瀛</li> <li><span>风格<i></i></span>： 超现实</li> <li><span>材质<i></i></span>： 布面油画</li> <li><span>题材<i></i></span>： 人物</li> <li><span>创作时间<i></i></span>： 2011</li> <li><span>所在位置<i></i></span>： 华东</li> <li><span>尺寸<i></i></span>： 78x78cm</li> </ul>scss
li{font-size:14px;line-height:24px;color:#4a4a4a; span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top; i{display:inline-block;width:100%;height:0;} } }效果
几点注意事项： 1）span要设置为inline-block;才能和后面的字同行显示，同时设置width才会使<i>换行； 2）必须要设置span元素的height，和overflow:hidden否则<i>还是会占高度； 3）vertical-align:top;可以使，li内的span和后面的字，高度对齐，否则会变成原文
主要通过css3的动画效果来实现
总结两点重要属性就是：
（1）css3的animation属性，要注意几大内核的兼容
animation:myfirst 1s infinite; -moz-animation:myfirst 1s infinite; /* Firefox */ -webkit-animation:myfirst 1s infinite; /* Safari and Chrome */ -o-animation:myfirst 1s infinite ease-in-out; /* Opera */然后就是对myfirst动画名称的具体定义
@keyframes myfirst{from {font-size:15px;}to {font-size:20px;}} @-moz-keyframes myfirst{from {font-size:15px;}to {font-size:20px;}} /* Firefox */ @-webkit-keyframes myfirst {from {font-size:15px;}to {font-size:20px;}} /* Safari and Chrome */ @-o-keyframes myfirst {from {font-size:15px;}to {font-size:20px;}} /* Opera */掌握这两个就可以做出很多非常具有点击欲的按钮
曾经遇到过这样的问题，设定一个div，当给div设置padding的时候，发现整个div的宽高都发生了变化，这里就产生了一个疑惑，一个盒子的总体宽高到底是怎么去判断的呢？
经过查询得知，盒子宽高的判定模式一共有两种，分别为标准模式和怪异模式。
一般情况下个盒子的宽高在一般情况下等于内容的宽高+边框的宽高+内边距的宽高+外边距的宽高
这就是标准模式下的盒子宽高判定
但在某些时候（ie6,7,8 下DOCTYPE缺失）盒子的宽高等于设定的宽高+外边距的宽高，这里的设定的宽高就等于内容的宽高+内边距的宽高+边框的宽高
这就是怪异模式下的盒子宽高判定
我们可以通过使用box-sizing属性来决定使用哪一种模式，
content-box : 将采用标准模式解析计算 ， border-box: 将采用怪异模式解析计算通过怪异模式我们可以在不改变盒子整体宽高的情况下给其设定padding。
组合命名规则:
[元素类型]-[元素作用/内容] 如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
用户体验方面需要注意的：
1）． 每个连接，按钮要做上鼠标hover时的一个变化效果。如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download变化的那张图片，这样会出现那个按钮无图的间隔；
2）． INPUT有个label，可以让用户在点击字时，光标自动跳入相应input中；
我们知道浏览器自带的Checkbox复选框不怎么美观（这或许是我们看习惯了的缘故），而且复选框在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式，个人觉得比浏览器自带的Checkbox美观不少。
效果图如下
下面来分析一下源代码，原理很简单，先把页面上<input type="checkbox" />的display设置为none，从而把它隐藏掉，然后利用CSS3代码来绘制与checkbox邻近的label元素：
HTML代码：
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>CSS3代码：
.regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative; }下面的CSS代码可以让checkbox选中后出现阴影的效果，主要利用了box-shadow属性：
.regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }radiobox的实现也是同样的原理
用input标签实现css3点击
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> html, body { height: 100%; position: relative; overflow: hidden; margin: 0; } div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.4s ease; transform: translateX(-100%); } div:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5vw; font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #fdfdfd; letter-spacing: 4px; } div:nth-of-type(1) { background-color: #1abc9c; } div:nth-of-type(1):after { content: "#1abc9c"; } div:nth-of-type(2) { background-color: #2ecc71; } div:nth-of-type(2):after { content: "#2ecc71"; } div:nth-of-type(3) { background-color: #3498db; } div:nth-of-type(3):after { content: "#3498db"; } div:nth-of-type(4) { background-color: #e74c3c; } div:nth-of-type(4):after { content: "#e74c3c"; } div:nth-of-type(5) { background-color: #34495e; } div:nth-of-type(5):after { content: "#34495e"; } div:nth-of-type(6) { background-color: #9b59b6; } div:nth-of-type(6):after { content: "#9b59b6"; } div:nth-of-type(7) { background-color: #f1c40f; } div:nth-of-type(7):after { content: "#f1c40f"; } div:nth-of-type(8) { background-color: #e67e22; } div:nth-of-type(8):after { content: "#e67e22"; } input[type="radio"] { position: absolute; right: 0; width: 25%; height: 20px; outline: 20px solid; outline-offset: -10px; margin: 0; z-index: 1; cursor: pointer; } input[type="radio"]:nth-of-type(1) { outline-color: #1abc9c; left: 0%; } input[type="radio"]:nth-of-type(2) { outline-color: #2ecc71; left: 25%; } input[type="radio"]:nth-of-type(3) { outline-color: #3498db; left: 50%; } input[type="radio"]:nth-of-type(4) { outline-color: #e74c3c; left: 75%; } input[type="radio"]:nth-of-type(5) { outline-color: #34495e; left: 0%; bottom: 0px; } input[type="radio"]:nth-of-type(6) { outline-color: #9b59b6; left: 25%; bottom: 0px; } input[type="radio"]:nth-of-type(7) { outline-color: #f1c40f; left: 50%; bottom: 0px; } input[type="radio"]:nth-of-type(8) { outline-color: #e67e22; left: 75%; bottom: 0px; } input[type="radio"]:checked+ div { transform: translateX(0%); transition: transform 0.4s ease 0.4s; } </style> </head> <body> <input type="radio" name="name" checked="checked"/> <div></div> <input type="radio" name="name"/> <div></div> <input type="radio" name="name"/> <div></div> <input type="radio" name="name"/> <div></div> <input type="radio" name="name"/> <div></div> <input type="radio" name="name"/> <div></div> <input type="radio" name="name"/> <div></div> <input type="radio" name="name"/> <div></div> </body> </html>