2017年03月_泠泠在路上

原创沉淀-初级HTML5（三）

HTML5音频视频音频播放 1.Audio（音频）：HTML5提供了播放音频文件的标准 2.control（控制器）：control属性供添加播放、暂停和音量控件 3.标签：定义声音，规定多媒体资源，可以是多个<script> var a=document.getElementById("audio"); function click()

2017-03-30 19:34:04 301

原创沉淀-初级html5（二）

HTML5编辑API之Range对象Range对象基本概念一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。<script> function rangeTest() { var html; showRangeDiv=document.getElementById("showRange"); selecti

2017-03-30 15:27:55 515

原创沉淀-初级html5（一）

HTML5与HTML4的区别推出的理由及目标和语法的改变推出的理由及目标：解决web上存在的各种问题： 1.web浏览器兼容性很低，规范不统一，没有被标准化。 2.文档结构不够明确 3.web应用程序的功能受到了限制世界知名浏览器厂商对html5的支持：微软的IE9及以上，google的chrome，苹果的safari，Opera的欧朋，Mozilla的火狐Firefox语法的改变：

2017-03-27 23:56:53 453

转载 vue中main.js 里的/* eslint-disable no-new */

意项目中的这个，它的作用是：在js里面，new 一个对象，需要赋值给某个值（变量），用Vue实例化的时候，不需要赋值给值（变量），所以要单独给配一条规则，给new Vue这行代码上面加这个注释，把这行代码规则的校验跳过，通过eslint-disable。eslint的常用技巧之一

2017-03-23 19:11:42 9825

转载 webstorm卡在scanning files to index

webstorm 打开后，底部一直出现 scanning files to index。当项目中文件过多时，会一直卡在建立索引这一步，通常是在 npm install 之后导致，node_modules 中文件太多。解决方法：将 node_modules 文件夹排除出将要建立索引的文件夹主要就是加载的文件太多，反应变慢的原因，排除大文件即可。

2017-03-23 19:04:44 808

原创前端实时可视化开发工具

三种工具的使用：liveStyle官网：http://livestyle.io/Emmet LiveStyle有如下几个特点： 1. 即时更新(不会重新加载页面，样式修改以后无需保存也能预览);; 2. 多个页面同时预览(例：同时打开多个页面，并且关联到相同的CSS，此时修改该CSS，这些页面都能即时显示修改内容); 3. 双向修改(在Chrome开发者工具和Sublim...

2017-03-23 16:22:03 27089 2

转载 pageResponse.js一套视觉稿适配移动设备全家，让烦恼通通见鬼去

pageResponse.js最近发现一博主写的技术贴很实用很用心，不由的想自己备份一下，同时分享给各位同僚~~原理及说明1.使用transform:scale缩放页面，要求视觉稿高清2.页面以px为单位即可让h5适配各种移动设备，适配原则根据视觉稿比例缩放页面3.兼容性良好，支持ios4+、android2.3+、winphone8+系统4.大小1k，零依赖5.三种适配模式可选 auto

2017-03-18 12:43:27 411

转载欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-03-18 12:37:19 168

meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码<meta name="format-detection

2017-03-16 23:06:04 335

原创 Sass中何时使用继承

1. 何时使用继承首先，混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。这有点抽象，所以我们从几个方面来阐释一下。想象一下你正在编写一个页面，给html元素添加类名，你发现你的某个类

2017-03-14 15:37:55 1404 1

转载页面性能优化问题

PC端优化缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载请求带宽：压缩文件，开启GZIP 代码层面的优化：用hash-table来优化查找少用全局变量用innerHTML代替DOM操作，减少DOM操作

2017-03-12 14:50:48 366

转载减少前端代码耦合

网上之前看的文章，很受用啊，就分享给大家看看。什么是代码耦合？代码耦合的表现是改了一点毛发而牵动了全身，或者是想要改点东西，需要在一堆代码里面找半天。由于前端需要组织js/css/html，耦合的问题可能会更加明显，下面按照耦合的情况分别说明：1. 避免全局耦合这应该是比较常见的耦合。全局耦合就是几个类、模块共用了全局变量或者全局数据结构，特别是一个变量跨了几个文件。例如下面，在html里面定义了一

2017-03-11 23:36:38 2756

原创 Webstorm的基本操作

说起来，比较主流的IDE呢，有DW，Sublime Text，Eclipse，Webstorm等，我主要介绍Webstorm。为什么要独宠它呢？那就开始说说，Webstorm可以创建很多类型的文件，看图一目了然，在有，各种面板应有尽有功能代码补全自动多光标功能 alt键选择内容不松手代码格式化 ctrl+alt+l Emmet 代码补全例：d

2017-03-08 19:45:44 5292

原创用gulp打包发布项目

在发布之前还可以做代码优化： 1.压缩 2.合并 3.增加版本号首先，手动打包发布的网站比如：https://javascript-minifier.com 显然，手动打包麻烦费时费力的，那自从node.js出来以后，方便快捷，自动化处理。打包的主流3个工具： 1.Grunt 自动化构建工具 2.gulp 自动化构建工具 3.webpack 静态资源打包工具这里主要先

2017-03-08 17:50:06 12130 1

原创如何在多个设备上调试网页

试想一下，如果在调试网页的时候，修改了兼容性代码，想要测试其在各设备上的效果，多个设备，刷新，查看，刷新，查看。。。这无异于是在浪费你的时间，那么，该怎么解决这个问题，下面就推荐一款工具。省时的浏览器同步测试工具http://www.browsersync.cn/ Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是

2017-03-08 13:56:28 797

原创处理浏览器兼容性办法

对于搞前端的筒子们来说，兼容性无异于是基础并头疼问题，一直嚣张的不行啊，我仅用我勉强的功力，说说我知道的处理办法，要是有大神知道更好的或者写的有出入的地方还请指点一二。首先，明确支持哪些浏览器，风烛残年般的IE6，7，8使用的是越来越少，比如现在jquery2.x版本已经不支持他们了，知道了要兼容的浏览器，下面就是浏览器调试的问题了。先说说桌面端浏览器的调试。方法一下载所需兼容的浏览器直接测试，有页

2017-03-08 13:24:07 734

转载 webstorm-主题和配色

URL:http://blog.csdn.net/xiaoyu411502/article/details/467023911、引子以前介绍过 Sublime text 3 系列的文章，着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展，为前端开发带来了很多的便捷，加快了代码的书写速度，尤其是配上 emmet，那书写速度堪称光速。现

2017-03-08 10:52:11 586

原创 Node.js介绍与安装使用

Node.js概念解析Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。解：可以在非浏览器环境下解释运行代码，速度很快。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。解：事件调用方法的异步执行。Node.js 的包管理器 npm，是全球最大的开源库生态系统。解：npm打包下载下载Node.js安装打开NodeJs官网，一般来说下载

2017-03-06 23:20:21 343

原创实现网站的响应式轮播图

首先，得前人经验，借助插件实现轮播，不必吭哧吭哧绞尽脑计想逻辑，只需调属性即可，那么怎么样来挑选第三方组件： 1.使用人数以免踩坑 2.是否开源 3.文档是否齐全使用帮助 4.活跃性积极维护 5.小巧够用即可（轻量级）这里选择OwlCarousel2（其实选啥看自己兴趣，大同小异）<link rel="stylesheet" href="owlcarouse

2017-03-06 22:52:32 5167

原创清除浮动最有效的css写法

说起来呢，基本上只要你给容器div加了float的属性，就需要清除浮动来使页面显示正常，那么，到底有什么方法可以让浮动轻松清除呢？可以用display：flex;替代，但是它对IE8，9支持不是很好，所以不怎么这么用。1.在容器div的里面结束标记之前写如下这样的div这段代码：<div style="clear:both"></div>虽然通俗易懂，容易掌握，但是在页面中加入了一个无意义的空标

2017-03-04 20:15:14 20825

原创推荐angularJs开发，调试，测试工具

首先是NodeJs代码编辑工具 sublime text 轻量级 webstorm 占的资源多一些断点调试工具chrome插件Batarang版本管理工具github tortoisegit代码合并和混淆工具grunt以及插件 grunt-contrib-uglify，对代码进行混淆的 grunt-contrib-concat，合并文件 grunt-contrib-watch

2017-03-01 15:26:41 1544

泠泠似水