登录或加入会员
推荐
Node.js系列基础学习
最简单的异步转同步用法
二级导航制作
简单的jQuery轮播图
导航
学习笔记
-
专栏课程
-
工具素材
设计与程式导航
代码快速复制
工具插件
加入会员
会员登录
加入会员
关于我们
快速复制代码
HTML代码
Html Meta页面代码
最全的html meta语法参考
<code><!DOCTYPE html> <html lang="en"> <head> <!-- 声明文档使用的字符编码 --> <meta charset="UTF-8"> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 页面描述 --> <meta name="description" content="不超过150个字符" /> <!-- 页面关键词 --> <meta name="keywords" content="" /> <!-- 网页作者 --> <meta name="author" content="name, email@gmail.com" /> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow" /> <!-- 为移动设备添加 viewport --> <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --> <!-- iOS 设备 begin --> <!-- 添加到主屏后的标题（iOS 6 新增） --> <meta name="apple-mobile-web-app-title" content="标题"> <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 设置苹果工具栏颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 忽略页面中的数字识别为电话，忽略email识别 --> <meta name="format-detection" content="telphone=no, email=no" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不让百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- iOS 图标 begin --> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- iOS 图标 end --> <!-- iOS 启动画面 begin --> <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） --> <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --> <!-- iOS 启动画面 end --> <!-- iOS 设备 end --> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileColor" content="#000" /> <!-- Windows 8 磁贴图标 --> <meta name="msapplication-TileImage" content="icon.png" /> <!-- 添加 RSS 订阅 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 favicon icon --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 关闭chrome浏览器下 翻译 插件 --> <meta name="google" value="notranslate" /> <!-- sns 社交标签 begin --> <!-- 参考微博API --> <meta property="og:type" content="类型" /> <meta property="og:url" content="URL地址" /> <meta property="og:title" content="标题" /> <meta property="og:image" content="图片" /> <meta property="og:description" content="描述" /> <!-- sns 社交标签 end --> </head> <body> 内容 </body> </html></code>
Html 仪表代码
内置的工具，通常JavaScript来创建的。
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仪表代码</title> </head> <body> 我学习HTML能力达到了： <meter min="0" max="100" low="59" high="90" optimum="90" value="50">50%</meter> </body> </html></code>
让IE支持HTML5语义化标签
兼容IE老浏览器支持HTML5
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>让ie支持HTML5元素</title> <style> *{margin:0;padding:0;} body {background-color:white; color: black; text-align:center;} header, footer, nav, section, article {display:block;} header {width:100%; background-color:yellow;} nav {width:30%; background-color:orange;float:left;} section {width:65%; background-color:SpringGreen ; float:right;} article {width:70%; margin:2em 10%; background-color:turquoise;} footer {width:100%; background-color:pink; clear:both;} </style> <!--[if IE]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() </script> <![endif]--> </head> <body> <header><h1>让ie支持HTML5元素</h1></header> <nav><p>Menu</p></nav> <section> <p>Section</p> <article><p>article 1</p></article> <article><p>article 2</p></article> </section> <footer><p>The footer</p></footer> </body> </html></code>
HTML改变鼠标样式
利用简单的CSS来改变鼠标样式
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>改变鼠标默认样式</title> </head> <body> <span style="cursor:crosshair">Crosshair</span><br /> <span style="cursor:default">Default</span><br /> <span style="cursor:pointer">Pointer</span><br /> <span style="cursor:move">Move</span><br /> <span style="cursor:e-resize">e-resize</span><br /> <span style="cursor:ne-resize">ne-resize</span><br /> <span style="cursor:nw-resize">nw-resize</span><br /> <span style="cursor:n-resize">n-resize</span><br /> <span style="cursor:se-resize">se-resize</span><br /> <span style="cursor:sw-resize">sw-resize</span><br /> <span style="cursor:s-resize">s-resize</span><br /> <span style="cursor:w-resize">w-resize</span><br /> <span style="cursor:text">text</span><br /> <span style="cursor:wait">wait</span><br /> <span style="cursor:help">help</span> </body> </html></code>
Html 表单发送邮箱
简单的表单形式发送QQ邮箱
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h3>发送邮件到 xxx@qq.com:</h3> <form action="MAILTO:someone@qq.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="您的昵称"><br> E-mail:<br> <input type="text" name="mail" value="您的邮箱地址"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html></code>
Html 电话短信代码
移动端浏览可打电话发短信代码
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <a href="tel:1-408-555-5555">1-408-555-5555</a> <a href="sms:1-408-555-1212">New SMS Message</a> </body> </html></code>
Html 自动显示数据
下拉菜单自动显示对应的数据表
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input name="frameworks" list="frameworks" /> <datalist id="frameworks"> <option value="MooTools"> <option value="Moobile"> <option value="Dojo Toolkit"> <option value="jQuery"> <option value="YUI"> </datalist> </body> </html></code>
Html5 视频代码
HTML5简化了视频和音频的嵌入代码
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> </body> </html></code>
CSS代码
CSS重置
基本的CSS浏览器重置代码
<code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } p { font-size: 1.2em; line-height: 1.0em; color: #333; }</code>
CSS 经典清除浮动
设置所有的元素清除浮动
<code>.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .clearfix:before, .container:after { content: ""; display: table; } .clearfix:after { clear: both; } /* IE 6/7 */ .clearfix { zoom: 1; }</code>
CSS媒体查询
标准设备的媒体查询
<code>/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { /* Styles */ }</code>
CSS现代字体推栈
Web安全字体是许多操作系统预先安装的字体
<code>/* Times New Roman-based serif */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; /* A modern Georgia-based serif */ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /*A more traditional Garamond-based serif */ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /*The Helvetica/Arial-based sans serif */ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /*The Verdana-based sans serif */ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /*The Trebuchet-based sans serif */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; /*The heavier "Impact" sans serif */ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; /*The monospace */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;</code>
CSS更改选择文本颜色
默认是浅蓝色，可以自定义更改你喜欢的颜色
<code>::selection { background: #2f00ff; } ::-moz-selection { background: #2f00ff; } ::-webkit-selection { background: #2f00ff; }</code>
CSS3全屏背景
背景在滚动时使它们可调整大小和固定
<code>html { background: url('images/name.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }</code>
CSS3渐变
渐变代码代码为您您节省查询时间
<code>#colorbox { background: #629721; background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); background-image: -webkit-linear-gradient(top, #83b842, #629721); background-image: -moz-linear-gradient(top, #83b842, #629721); background-image: -ms-linear-gradient(top, #83b842, #629721); background-image: -o-linear-gradient(top, #83b842, #629721); background-image: linear-gradient(top, #83b842, #629721); }</code>
CSS引用字体
嵌入并生成自定义字体代码
<div class="f-code"> <pre class="language-css"><code>@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } body { font-family: 'MyWebFont', Arial, sans-serif; }</code></pre> </div><br />
CSS工具提示悬停
HTML5数据属性，通过 data-tooltip 设置工具提示文本
<code>a { border-bottom:1px solid #bbb; color:#666; display:inline-block; position:relative; text-decoration:none; } a:hover, a:focus { color:#36c; } a:active { top:1px; } /* Tooltip styling */ a[data-tooltip]:after { border-top: 8px solid #222; border-top: 8px solid hsla(0,0%,0%,.85); border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; display: none; height: 0; width: 0; left: 25%; position: absolute; } a[data-tooltip]:before { background: #222; background: hsla(0,0%,0%,.85); color: #f6f6f6; content: attr(data-tooltip); display: none; font-family: sans-serif; font-size: 14px; height: 32px; left: 0; line-height: 32px; padding: 0 15px; position: absolute; text-shadow: 0 1px 1px hsla(0,0%,0%,1); white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } a[data-tooltip]:hover:after { display: block; top: -9px; } a[data-tooltip]:hover:before { display: block; top: -41px; } a[data-tooltip]:active:after { top: -10px; } a[data-tooltip]:active:before { top: -42px; }</code>
Javascript代码
验证用户是否输入
判断表单输入是否为空
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>验证是否输入</h2> <input type='text' id='strs' value='需要过滤空格'> <input type='button' id='isContent' value='验证是否为空'><br> <script type="text/javascript"> window.onload = function(){ var isContent = document.getElementById("isContent"), strs = document.getElementById("strs"); isContent.onclick = function(){ if(!strs.value.replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" )){ alert("您的输入为空！"); }else{ alert("您的输入内容正传！"); } } }; </script> </body> </html></code>
禁止复制粘贴
禁止在浏览器复制粘贴
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>禁止复制与粘贴</h2> <input type="text" name="CopyPaste" id='CopyPaste'/><br> <script type="text/javascript"> var CopyPaste = document.getElementById("CopyPaste"); //禁止复制事件 CopyPaste.oncopy = function(){ return false; } //禁止粘贴 CopyPaste.onpaste = function(){ return false; } </script> </body> </html></code>
jQuery代码
三秒后删除CSS样式
定时器功能，三秒后删除CSS样式
<div class="f-code"> <pre class="language-html"><code><div id="link"></div> <script> let link = $('#link'); link.addClass('current'); setTimeout(function() { link.removeClass('current'); }, 3000); </script></code></pre> </div><br />
替换字符串中的文本
替换字符串中的文本
<code><div class="element"> <span>1 British Pound</span> </div> <script> $(document).ready(function() { $(".element span").text(function(index, text) { return text.replace('British Pound', 'RMB'); }); }); </script></code>
滚动到顶部
用户位于页面底部时将用户导航回页面顶部
<code>$(document).ready(function(){ $("a.scrolltop").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); });</code>
重置/清除表单值
在用户通过 ajax 提交表单后清除表单数据
<code>$(document).ready(function(){ $('#formID')[0].reset(); });</code>
防止用户提交表单两次
即使在具有多个提交按钮的表单上
<code>$(document).ready(function(){ var $myForm = $("#formID"); $myForm.submit(function(){ $myForm.submit(function(){ return false; }); }); });</code>
在新标签页/窗口中打开链接
第一新选项卡打开，第二个具有外部类新选项卡中打开
<code>$(document).ready(function(){ $( 'a[href^="http://"],a[href^="https://"]' ).attr( 'target','_blank' ); $( 'a.external' ).attr( 'target','_blank' ); });</code>
检查元素是否隐藏
此代码用于查找元素的可见性
<code>$(document).ready(function () { $(element).is(":visible"); });</code>
复制成功 :)
