做前端应该有的这份笔记：
html头部通用
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --> <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> <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 --> <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<input type="text" autocapitalize="off">
<!--关闭iOS键盘首字母自动大写--> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no"/> <!-- 忽略页面中的数字识别为电话，忽略email识别 --> <!-- 启用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 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <!-- 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 --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- 添加 RSS 订阅 --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <!-- 添加 favicon icon --> <!-- 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 --> <title>标题</title> </head>
css中的reset
@charset "utf-8"; /********** 1.reset **********/ /* 清除标签自带边距 */ body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input,textarea,th,td,select,hr,legend,fieldset {margin:0;padding:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display: block;} ul,li {list-style: none;} input,button,select,textarea {font-family: inherit;font-size: inherit;line-height: inherit;outline: none;background: none;} textarea {border:none 0;} iframe[name='google_conversion_frame']{display:none;}/*google 统计样式*/ img,input,textarea {vertical-align: middle;}/* 保持垂直居中 */ img,hr {border: none 0;}/* 去除img边框 */ i,em {font-style: normal;}/* 清除字体倾斜 */ /* 设置HTML5标签 块元素*/ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} /*文本框 定义*/ .input{outline:0;color:#999;display:inline-block;padding:0.8em;font-size:14px;font-weight:normal;line-height:1;text-align:left;white-space:nowrap; vertical-align: middle;background-image: none;border:1px solid #ececec;border-radius: 3px; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }/*常态输入框*/ .select{border:1px solid #ececec;padding:4px 0;} input[type="button"], input[type="text"], input[type="password"], input[type="submit"], input[type="reset"], textarea { /*表单元素的默认外观怎么重置*/ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; outline: none; } /*placeholder的颜色设置*/ input::-webkit-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;} input::-moz-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;} input::-ms-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;} input::-o-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;} input::input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;} /*placeholder获取焦点时的颜色设置*/ input:focus::-webkit-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;} input:focus::-moz-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;} input:focus::-ms-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;} input:focus::-o-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;} input:focus::input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;} /********** css零件 **********/ .clearfix:after {content:'';display: block;height: 0;overflow: hidden;clear: both;} .l{float:left;} .r{float:right;} .i{font-style:italic;} .fN{font-weight: normal;} .fB{font-weight: bold;} .rmb{font-family:Arial;} .dib{display:inline-block;} .etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .wrap{word-wrap:break-word;}/*强制换行*/ .nowrap{white-space:nowrap;}/*禁止换行*/ .tc{text-align:center;}
scss通用
@mixin full { width: 100%; height: 100%; overflow: hidden; }
//clip @mixin textOverflow($val:ellipsis) { overflow: hidden; text-overflow:$val; white-space: nowrap; } html, body { @include full; } html { font-size: 62.5%; }
/*兼容多点的弹性盒*/ @mixin box($val:horizontal) { //vertical display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; @if $val == horizontal { -webkit-box-orient:horizontal; -webkit-box-direction:normal; -moz-box-orient:horizontal; -moz-box-direction:normal; flex-direction:row; -webkit-flex-direction:row; } @else { -webkit-box-orient:vertical; -webkit-box-direction:normal; -moz-box-orient:vertical; -moz-box-direction:normal; flex-direction:column; -webkit-flex-direction:column; } } @mixin flex($val:1) { -webkit-box-flex:$val; -moz-box-flex:$val; -ms-box-flex:$val; -o-box-flex:$val; box-flex:$val; -webkit-flex:$val; -moz-flex:$val; -ms-flex:$val; -o-flex:$val; flex:$val; }
这个也是移动端的注意css
body { font-family:'Microsoft YaHei','Helvetica'; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; /*禁用元素被点击产生的阴影或边框*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); -ms-tap-highlight-color: rgba(0, 0, 0, 0); -o-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); /*禁止ios和android用户选中文字*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; /*禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片*/ -webkit-touch-callout: none; -moz-touch-callout: none; -ms-touch-callout: none; -o-touch-callout: none; touch-callout: none; } /*尽可能多的利用硬件能力，如使用3D变形来开启GPU加速*/ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /*如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：*/ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000;
js中的注意
//iscroll4滚动区域中select,input,textarea元素无法点击的bug修复 onBeforeScrollStart : function(e){ var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : ”); if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();} } /*Android手机$(window).width() Bug 部门安卓手机通过Zepto.js提供得 $(window).width(); $(window).height()获取浏览器视图宽度与实际宽度不一致。 解决方法：通过document.documentElement.clientWidth 获取宽度。*/ var pageWidth = document.documentElement.clientWidth; var pageHeight = document.documentElement.clientHeight; /*添加css样式：pointer-events: none; 使图片点透。*/ //高频触发事件 采用事件节流 或加以控制---如果中间的code需要处理的东西多的话，FPS就会下降影响程序顺滑度,把代码放在setTimeout中，会发现程序变快. $('div').on('touchmove', function(){ setTimeout(function(){ //.….code },0); }); //封装好的阻止冒泡、阻止浏览器默认行为 function stopBubble(e) { if ( e && e.stopPropagation ) e.stopPropagation(); else window.event.cancelBubble = true; } function stopDefault( e ) { if ( e && e.preventDefault ) e.preventDefault(); else window.event.returnValue = false; return false; }