07 2020 档案
摘要：分享几个WordPress不用插件调用随机文章的方法，不仅增强用户粘性，而且当蜘蛛来爬你的文章的时候每次都会有变化，搜索引擎很喜欢。主要用到的是orderby rand参数，下面就随ytkah一起来看看吧 1、最直接的用法，在需要的位置放入下面的代码。 1 2 3 4 5 6 <?php $args
阅读全文
摘要：现象描述： cms内容发布系统上传不了大文件，当上传超过32M文件时就上传不了 提示:无效的文件. 文件尺寸太大。 分析文件上传过程： browser --> nginx --> php 需要修改 nginx.conf和php.ini 1.nginx.conf新增如下参数，重启无效： client_
阅读全文
摘要：假设最简单的情况，一个开发人员，开发所有的代码，一个测试人员。一个测试的服务器，一个生产的服务器。开发人员需要为公司开发一个项目，开发人员首先分析产品经理的需求，建立相应的模型，然后进行如下步骤： 编写代码 项目打包部署到测试服务器 测试人员测试，将Bug提交给开发人员 如果测试通过则进行第5步。如
阅读全文
摘要：写在前面 在前端开发中，npm已经是必不可少的工具了。使用npm，不可避免的就要和package.json打交道。平时package.json用得挺多，但是没有认真看过官方文档。本文结合npm官方文档以及自己平时使用过程中的感悟，谈一谈package.json。官方文档在这里。 初始化 使用npm
阅读全文
摘要：curl是一个开源的用于数据传输的命令行工具与库，它使用URL语法格式，支持众多传输协议，包括：HTTP、HTTPS、FTP、FTPS、GOPHER、TFTP、SCP、SFTP、SMB、TELNET、DICT、LDAP、LDAPS、FILE、IMAP、SMTP、POP3、RTSP和RTMP。curl
阅读全文
摘要：前言 参考官方的这篇文章，我尝试翻译其中一些重点部分，并且拓展了相关的pluggy部分的知识。由于pytest是在pluggy基础上构建的，强烈建议先阅读一下pluggy的官方文档，这样理解起来更加容易一点。 正文 conftest.py可以作为最简单的本地plugin调用一些hook函数，以此来做
阅读全文
摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。 不同格式图片优劣对比 有人可能会问说好的图片优化呢？怎么说到图片格式
阅读全文
摘要：Flask是一个使用Python编写的轻量级Web应用框架。 一、安装Flask 以管理员身份，打开命令提示符窗口，输入下面命令 py -3 -m pip install flask 这个命令会连接到PyPI网站下载和安装Flask模块，以及Flask依赖的几个模块：Werkzeug、MarkupS
阅读全文
摘要：一、原理 jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的，伪造一个script标签，将请求数据的url赋值给script的src属性，并将该标签添加到html中，浏览器会自动发送请求，返回的一般时一段js代码，即函数的调用代码。 该种跨域的请求方式需要后台配合返回响应的函数执
阅读全文
摘要：BFC已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 什么是BFC 在解释 BFC 是什么之前，需要先介绍 Box Formatting Context的概念。BFC这个东西说常见的话你可能不觉得
阅读全文
摘要：线性渐变基本语法： background: linear-gradient(direction, color-stop1, color-stop2, ...); 为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向（或一个角度）。 参数：其共有三个参数 第一个参数表示线
阅读全文
摘要：打开一个网页，会先拉取一个html页面，然后浏览器解析了这个html页面后，会根据页面的内容，去拉取JavaScript、css和图片文件，最终根据这些文件，将页面渲染出来。 我们可以看到，影响一个网页展示速度的主要因素不是网页本身，而是它依赖的一些其它文件。如果优化了这些资源的加载速度，那么网页展
阅读全文
摘要：1.显示需要选择的数据时,一定先要此数据是否为海量数据.例如:选择下拉框中加100条记录.你的用户不骂死你. 2.尽量不要限制用户的输入内容.对输入内容进行验证(正则表达式)分割及处理返回为空的项(String.split(new String[]{‘ ‘,‘;‘},StringSplitOptio
阅读全文
摘要：什么是jsONP？先说说jsONP是怎么产生的： 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”s
阅读全文
摘要：1、jpg:有损压缩格式 靠损失图片本身的质量来减小图片的体积， 适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 ) 2、gif：无损压缩格式 靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画， 适用于颜色数量较少的图像; 3、png:无损压缩格式 损失图片的色彩数量来减小图片的体
阅读全文
摘要：动态应用，是相对于网站静态内容而言，是指以c/c++、php、Java、perl、.net等服务器端语言开发的网络应用软件，比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通常与数据库系统、缓存系统、分布式存储系统等密不可分。 大型动态应用系统平台主要是针对于大流量、高并发网站建立的底层系
阅读全文
摘要：一、前言 工作上遇到一个这样的需求，一个H5页面在APP端，如果勾选已读状态，则下次打开该链接，会跳过此页面。用到了html5 的本地存储 API 中的 localStorage作为解决方案，回顾了下Web缓存的知识，感觉自己了解得不够多，所以想整理下，加深理解。 Web缓存是指一个Web资源（如h
阅读全文
摘要：如何使用webpack构建多页面应用，这是一个我一直在想和解决的问题。网上也给出了很多的例子，很多想法。猛一看，觉得有那么点儿意思，但仔细看也就那样。 使用webpack这个构建工具，可以使我们少考虑很多的问题。 我们常见的单页面应用只有一个页面，它考虑问题，解决问题围绕着中心化去解决，因此很多麻烦
阅读全文
摘要：transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。 第一问：哪些属性值变化会触发这个transition呢？ 一般常见的有
阅读全文
摘要：写在前面 生活在信息爆炸的今天，我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的，这就意味着用户对你站点投入的时间可能是及其吝啬的（当然有一些刚需站点除外）。 如何给用户提供迅速的响应就显得十分重要了，这可能成为你留住用户的关键。即使网站设计的再优秀，功能再完美，但是响应的巨慢，用户的耐心很
阅读全文
摘要：前言 由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过html5的WebSocket也可以实现与服务器的通讯和服务端推功能
阅读全文
摘要：一、html 常见题目 01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义? 02、html5 为什么只需要写 <!DOCTYPE html>？ 03、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 04、页面导入样式时，使用link和@import有什么区别？ 05、
阅读全文
摘要：好的设计能够帮助企业提升数据，同时还可以提供用户一个良好的使用体验。GoodUI 总结了一个长达69条设计原则的清单（不断增加中），列举了他们认为非常重要的设计要点。与以往的一些文章不一样的是这里提到的69点其中有一部分 GoodUI 已经通过 AB Test 验证过可行性。当然分析报告是需要付费的
阅读全文
摘要：什么是属性前缀? 为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。例如： transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -we
阅读全文
摘要：用lnmp架构部署wordpress网站 ①.下载和上传网站代码 用winscp或者xftp, 或者xshell下执行rz命令进行上传网站的包文件. ②.解压程序代码,并将程序代码保存到站点目录,并进行授权 chown -R nginx.nginx /app/nginx/html/blog/ (将站
阅读全文
摘要：使用html+css+js实现简易计算器，效果图如下： html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
阅读全文
摘要：css3属性中关于制作动画的三个属性：Transform,Transition,Animation。 1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 div{ tra
阅读全文
摘要：本文讲述如何在thinkphp5中完成登录并保存session、然后根据不同的用户权限跳转相应页面功能的实现。我也在学习thinkphp源码的路上，记录一下并与大家分享。完成该步骤主要有以下三个步骤完成。 一、密码校验 这里view层提交过来的用户名和密码是不加密的，数据中的密码是经过md5加密的，
阅读全文
摘要：git reset 、 git checkout 和 git revert 是Git中常用命令。经常傻傻分不清他们之间的区别。最近工作不忙，抽出时间参考了其他文档，对其总结了下。 提交层面的操作 传给 git reset 和 git checkout 的参数决定了它们的作用域。如果其后参数不是 fi
阅读全文
摘要：前言 目的 ：保证服务器硬件故障时依然可用,数据依然保持并能够访问 手段：数据和服务的冗余备份以及失效转移机制 有状态 ：在服务端保留之前的请求信息,用以处理当前请求（例如:session） 无状态 ：没有特殊状态的服务,各个请求对于服务器来说统一无差别处理,请求自身携带了所有服务器需要的所有参数（
阅读全文
摘要：服务器上仍然使用nginx进行代理 1.为二级域名申请ssl证书。 2.在域名解析服务中，为二级域名添加解析记录。 3.nginx默认读取/etc/nginx/conf.d/*.conf 在conf.d下建立二级域名对应的配置文件如vi blog.conf upstream ech{ server
阅读全文
摘要：什么是protobuf？ Protobuf是Google开源的一款类似于json，XML数据交换格式，其内部数据是纯二进制格式，不依赖于语言和平台，具有简单，数据量小，快速等优点。目前用于序列化与反序列化官方支持的语言有C++，C#， GO， JAVA， PYTHON。适用于大小在1M以内的数据，因
阅读全文
摘要：我们经常将数据存储在XML 中，在展示的时候需要转换为其它的形式，这里介绍使用XSLT 对XML数据进行转换。要学习XSLT对XML的转换，需要先了解三个文件。 第一个是存储数据的XML文件:employees.xml <?xml version="1.0"?> <employees> <emplo
阅读全文
摘要：移动端的项目经常会引入手势库来实现拖拽，不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算。最近的项目中就有这么一个需求： 因为就这一个地方需要拖拽，所以我就没有引入第三方库 移动端的拖拽有两种主流的实现方案： 1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果； 这种方
阅读全文
摘要：一、引言 首先来理解一下简单的一个请求发送到响应的过程。 首先，客户端，通常是浏览器或者一些应用发送请求到你的服务器地址，比如访问你的Url或者其他的东西。而我们的服务器通常要分为两个部分，一部分是服务器硬件，有了硬件之后还有有硬件上对应运行的软件。即服务器软件其次，服务器的硬件部分接收到了这一段请
阅读全文
摘要：先说一下网络的层级：由下往上分为 物理层、数据链路层、网络层、传输层、会话层、表示层和应用层 1、TCP和UDP TCP：是面向连接的一种传输控制协议。属于传输层协议。TCP连接之后，客户端和服务器可以互相发送和接收消息，在客户端或者服务器没有主动断开之前，连接一直存在属于长连接。 优点：安全、传输
阅读全文
摘要：最近在写一个小程序，项目中遇到一个需求：页面滚动到tab切换菜单时，菜单fixed到页面顶部； 实现方法： 使用小程序的onPageScroll事件，滚动到指定位置添加fixed样式； bug1：获取指定位置错误，因为上面都是图片，在图片未加载出来时获取高度，高度值不对，解决办法就是在imgae上加
阅读全文
摘要：SPA简介： 单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 html 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 html 、 J
阅读全文
摘要：简介 WebSocket是基于TCP的一种新的网络协议，并在2011年被IETF定为标准的全双工通信协议，它实现了客户端与服务器全双工通信。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成
阅读全文
摘要：你是否在使用浏览器打开网页的时候会提示404 not found的情况，导致网页打开失败，留下一大堆英文字母。现小编就和大家介绍网页错误404 not found的解决措施。 一、404 not found是什么意思？ 404 not found是一种标准的HTTP返回代码，当用户输入一个链接时，服
阅读全文
摘要：利用canvas将网页元素生成图片并保存在本地,首先引入三个文件： <script type="text/JavaScript" src="js/html2canvas.js"></script> <script type="text/JavaScript" src="js/base64.js"><
阅读全文
摘要：我们在基本的设置账户用户名和密码安全基础上，最好把这个登录入口限制访问或者隐藏，之前也有看到一些教程说安装插件，比如安装Stealth Login Page插件可以设置登录页面后的参数，与我要设置的非插件实现一样的。也可以使用Limit Login Attempts限制登录次数，如果超过一定次数就限
阅读全文
摘要：看了好多微博总结了一下概念，首先先介绍一下W3C? 啥是W3C不是wc，这个建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能，指万维网联盟（World Wide Web Consortium）一个很牛x的组织。 代码标准 w3c官网也可以借鉴w
阅读全文
摘要：1.是用curl抓取的数据是用类似gzip压缩后的数据导致的乱码。 乱码：curl www.wode007.com |more乱码：curl -H "Accept-Encoding: gzip"www.wode007.com | more不乱码：curl -H "Accept-Encoding: g
阅读全文
摘要：小型电商网站的商品详情页系统架构 小型电商网站的页面展示采用页面全量静态化的思想。数据库中存放了所有的商品信息，页面静态化系统，将数据填充进静态模板中，形成静态化页面，推入 Nginx 服务器。用户浏览网站页面时，取用一个已经静态化好的 html 页面，直接返回回去，不涉及任何的业务逻辑处理。 好处
阅读全文
摘要：当自己的网站应用流畅运行之后，下一步您就需要让它看起来更美观生动。本文列举了21种实用的JavaScript和css库，可帮助您实现更加酷炫的效果。 1. Algolia 如果您想在自己的网站上添加具有自动完成功能的表单，那么您肯定会用到这个库。由于其精准和快捷的特点，我非常喜欢它带有的地图功能。这
阅读全文
摘要：本文主要收集一些移动web开发中常见的问题和解决办法，在日常的工作中遇到新的问题会不定时更新到文章中。 屏蔽阴影： -webkit-appearance:none 亲测，可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角
阅读全文
摘要：如何在客户端利用html、或js将一个html页面嵌套在另一个页面中 1.IFrame引入 有时候需要把其他地方的页面嵌套到当前的的网站的某个模块中，就可以使用iframe嵌套 <iframe name="content_frame" marginwidth=0 marginheight=0 wid
阅读全文
摘要：一、http_load 程序非常小，解压后也不到100K。http_load以并行复用的方式运行，用以测试web服务器的吞吐量与负载。但是它不同于大多数压力测试工具，它可以以一个单一的进程运行，一般不会把客户机搞死。还可以测试HTTPS类的网站请求。下载地址：http_load-12mar2006.
阅读全文
摘要：如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。 在 localhost:3000 上有后端服务的话，你可以这样启用代理：
阅读全文
摘要：零基础开始学习web前端技术，那么没有好的书籍你怎么开始学习呢？作为一个从零开始学习web前端技术的人给大家推荐基本不错的书籍，希望对于刚刚想进入web前端的人有一定的帮助，以下就是给初学web前端最近书籍推荐。 一、《Web前端开发最佳实践》 这本书是前端开发领域的经典之作，是一本扎实前端基本功，
阅读全文
摘要：常常有类比说：人是有操作系统的。譬如我们需要构建自己的操作系统，我们都需要不断升级自己的操作系统 等等... ... 我很认同这个类比。 其实更简单一些说，人就如同一个程序，如果这个系统很烂，体验很差。那他做出来的事情，输出出来的东西，就是一团乱麻，没什么实际价值。 其实我们每个人既是一个系统，同时
阅读全文
摘要：1.使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母 onkeyup = "value=value.replace(/[^\d]/g,'')" 2.使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输
阅读全文
摘要：方法一：footer高度固定+绝对定位 html代码： <body> <header>头部</header> <main>中间内容</main> <footer>底部信息</footer> </body> css代码： *{ margin:0; padding:0; } html{ height:1
阅读全文
摘要：网站制作公司数不胜数，每家公司使用域名、服务器的提供商也是不同，制作网站使用代码语言、模板、自主研发的系统都是各不相同。网站整体的设计要好，这个设计，一是指网站的代码设计，最好采用php+MySQL的形式，像目前建站比较流行的Dedecms，Wordpress，都是基于这种开源程序，兼容性比较好。而
阅读全文
摘要：1.在input 或 textarea中加属性 maxlength="10" 2.js判断 function limitImport(str,num){ $(document).on('input propertychange',str,function(){ var self = $(this);
阅读全文
摘要：什么是rem单位？ rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（html元素）的font-size。默认情况下，html元素的font-size为16px， rem单位都是相对于根元素html的font-size来决
阅读全文
摘要：html5+css3响应式垂直时间轴，使用了html5标签<section>，时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的div中，多个div形成一个序列，并把这些div放在<section>中。 PC端: 移动端: html代码： <!DOCTYPE h
阅读全文
摘要：目前来说，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？
阅读全文
摘要：web网页是由 html标签一层层组成的，js也可以动态添加对应的标签，比如mate标签、script标签、div标签、img标签等，动态创建的方法基本都差不多，下面将简单介绍下如何实现 一：手动添加mate标签 function addMeta(name,content){//手动添加mate标签
阅读全文
摘要：html的textarea内容显示的时候怎么换行？输入的时候换了行，但是读取出来的时候是连在一起的，要怎么才可以显示换行？ 方式一：利用pre 1、在textarea输出的div中添加如下css样式： .content { white-space: pre; } 2、利用<pre>标签来输出text
阅读全文
摘要：所有的颜色都可以由红、绿、蓝三原色调配而成。 css中用8位表示一个颜色，那么可以有28即256种颜色，所以总共可以表示256*256*256种颜色。css纵有多种颜色表示： 十六进制表示法： 可表示为：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。 例如
阅读全文
摘要：转换是使元素改变形状、尺寸和位置的一种效果。通过 css3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。 首先，css3中2D转换的形式是这样的： 选择器{ transform：转换函数（参数，参数）； } 而2D转换的函数
阅读全文
摘要：1.问题起源 在平时的业务开发写css中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的overflow:hidden这个属性，每次在写代码的时候总是这样写
阅读全文
摘要：1、什么是数据交互格式？ 就是客户端和服务端进行信息传输的格式（xml和json），双方约定用什么格式进行传输，然后解析得到自己想要的值 xml扩展标记语言，属于重量级（第一占宽带、第二解析难） json属于轻量级的数据交互格式（不占宽带，解析很简单） 2、xml和json优缺点 xml优点：格式统
阅读全文
摘要：一个小型的网站，比如个人网站，可以使用最简单的html静态页面就实现了，配合一些图片达到美化效果，所有的页面均存放在一个目录下，这样的网站对系统架构、性能的要求都很简单，随着互联网业务的不断丰富，网站相关的技术经过这些年的发展，已经细分到很细的方方面面，尤其对于大型网站来说，所采用的技术更是涉及面非
阅读全文
摘要：1、文本框的测试 如何对文本框进行测试： a、输入正常的字母或数字; b、输入已存在的文件的名称; c、输入超长字符。例如在“名称”框中输入超过允许边界个数的字符，假设最多255个字符，尝试输入256个字符，检查程序能否正确处理; d、输入默认值，空白，空格; e、若只允许输入字母，尝试输入数字;反
阅读全文
摘要：网页中二维码识别规则 当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。 为什么要用截屏，这也是一个开发时候的思考。客户端截屏时候，可以不用考虑网络传输等因素，最快的得到识别结果，否则就需
阅读全文
摘要：语法 缩进使用soft tab（4个空格）； 嵌套的节点应该缩进； 在属性上，使用双引号，不要使用单引号； 属性名全小写，用中划线做分隔符； 不要在自动闭合标签结尾处使用斜线（html5 规范 指出他们是可选的）； 不要忽略可选的关闭标签； html5 doctype 在页面开头使用这个简单地doc
阅读全文
摘要：1、一个简单的html例子看看用户信息安全 标准的html语法中，支持在form表单中使用<input></input>标签来创建一个HTTP提交的属性，现代的WEB登录中，常见的是下面这样的表单： <form action = "http://localhost:8080/Application/
阅读全文
摘要：php中使用OpenSSL生成RSA公钥私钥及进行加密解密示例（非对称加密）,php服务端与客户端交互、提供开放api时，通常需要对敏感的部分api数据传输进行数据加密，这时候rsa非对称加密就能派上用处了，下面通过一个例子来说明如何用php来实现数据的加密解密 一、公钥加密 假设一下，我找了两个数
阅读全文
摘要：css 声明( Declarations ) css 声明可以为空，或者由 css 特性( property )，后加一个冒号 ":"，跟着是一个特性的值构成。中间可以有空格将它们隔开。 可用以下方式表达： property : value; 其中 property 指代的是所有 css 特性，va
阅读全文
摘要：一名有前端工程师，除了掌握自身知识体系外，在业余时间也应该了解下后端的知识时间，由于前端与后端工作是最最密切相关的，多学习些后端知识对自身也是大有好处的。 1、后端语言 后端语言用来写后台的三巨头：php、JAVA、ASP.NET三门语言各有特色，php轻量级开发，适合开发论坛和bbs的后台。jav
阅读全文
摘要：如何清除图片下方出现几像素的空白间隙？ 方法1： img{display:block;} 方法2： img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percen
阅读全文
摘要：早期的互联网是没有验证码的，随着后来计算机程序的发展，黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序，破坏了整个网络的平衡性。于是验证码这种验证是否是人工操作的检验机制便产生了。随着验证码的出现，它可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力
阅读全文
摘要：随着浏览器功能越来越强大，在网页端实现各种小游戏已经是家常便饭。微信小游戏出现后，游戏（特别是小型游戏）的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者，如何取选择一个合适的游戏开发框架来学习和提高开发效率呢？ 我是一名前端开发人员，目前在一家新闻网站担任前端工作。我的公司不算大，技
阅读全文
摘要：Facebook的网站速度做为最关键的公司任务之一。在2009年，我们成功地实现了Facebook网站速度提升两倍 。而正是我们的工程师团队的几个关键的创新使它成为可能。在本文中，我将向大家介绍我们的秘密武器之一，我们称之为BigPipe的伟大底层技术。 BigPipe是一个重新设计的基础动态网页服
阅读全文
摘要：高并发大流量网站 10 个解决方法 1.硬件升级 普通的P4服务器一般最多能支持每天10万独立IP，如果访问量比这个还要大， 那么必须首先配置一台更高性能的专用服务器才能解决问题 ，否则怎么优化都不可能彻底解决性能问题。 2.负载均衡 它是根据某种负载策略把请求分发到集群中的每一台服务器上，让整个服
阅读全文
摘要：前言 Gatsbyjs 是一个现代化开发网站的网站产生系统，拥有完整、丰富且开源的生态圈。它利用 react + GraphQL 产生的多页面应用，让前端工程师，编辑，用户都感到满意。就让我们一步步地探索这个系统吧。 Gatsbyjs 是一个拥有超过 2万 Stars，3500 forks 的 re
阅读全文
摘要：在网站上线发布之前，我们除了必要的安全、功能测试外，往往还需要进行压力测试。通过模拟实际应用的软硬件环境及用户使用过程的系统负荷，长时间或超大负荷地运行测试软件，来测试被测系统的性能、可靠性、稳定性等。压力测试需要确定一个系统的瓶颈或者不能接收的性能点，来获得系统能提供的最大的服务级别。通俗地讲，压
阅读全文
摘要：前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。 这个重要的 css 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 css 从此变得异常强大。 一、变量的声明 声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F; -
阅读全文
摘要：我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部，就写如下代码： $(‘.js_go_to_top‘).click(function () { $(".js_scroll_area").animate({scrollTop: 0}, 600); }); 我们现在可能通过css实现这一
阅读全文
摘要：自定义域名访问本地WEB应用。本地安装了WEB服务端，怎样通过自定义域名方式实现从公网访问本地WEB应用？本文将介绍具体的实现步骤。 1. 准备工作 1.1 安装并启动WEB服务端 默认安装的WEB端口是80。 1.2 申请域名并完成域名备案 可以在万网、百度云、腾讯云、西部数码等等域名服务商注册并
阅读全文
摘要：前端能不能一直做，做前端能走多远？以后前端领域会不会被其他新的技术取代？又或者是面临着前端行业的萎缩，导致自己的失业？所有很多人对前端产生了一种“所谓的认为”：前端不能一直做下去。 说实话，一开始步入前端的我也是这么觉得呢，但当你真正的了解了前端的这个行业，你就会明白前端真的值得你去做，值得你去付出
阅读全文
摘要：form表单的enctype属性：规定了form表单数据在发送到服务器时候的编码方式 application/x-www-form-urlencoded：默认编码方式 multipart/form-data：指定传输数据为二进制数据，例如图片、mp3、文件 text/plain：纯文本的传输。空格转
阅读全文
摘要：虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方（能生效的方）插入插件: <script src="prefi
阅读全文
摘要：1.加载问题 背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分，会在html结构加载的时候加载在网页加载的过程中，背景图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而img标签是网页结构（内容）的一部分会在html结构加载的过程中加载，换句话讲，网页会先加载im
阅读全文
摘要：前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。 一.重排 & 重绘 有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到j
阅读全文
摘要：关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于react和antd，里面用到了国际化，使用方式也很简单 import zhCN from 'antd/lib/locale-provider/zh
阅读全文
摘要：前言：项目涉及到node的开发，为了便于管理，采用了nvm，安装方法和在mac下差不多 git依赖 看以下内容前，先确保你的git已经安装（需要git v1.7.10 +），如果没有看的话，请最新git。 安装脚本 在linux里面安装，这句话是没有任何安装的感觉，但是它其实是执行了，只是没有安装环
阅读全文
摘要：入门者的知识体系包括哪些东西呢，下面是我的个人看法，按照这个流程走不一定立刻成为大牛，至少能让入门者抓住重点一步步走下去： 1. 基本工具使用 Git/GitHub的熟练使用，编辑器(sublime、webstrom、atom、vscode)的体验区分与使用，chrome开发调试工具的使用，Phot
阅读全文
摘要：最近在做项目时，有一个需求是批量打印好多个合同，使用AJAX向后台传送数据，等待后台执行后，需要把生成之后的文件地址传送过来。 后台的处理时间比较长，根据合同的多少可能等待时间比较长，会达到10s左右，这个时候如果不加任何的提示，会导致用户因为没有看到是否执行而导致重复的操作，为了增加用户的体验感，
阅读全文
摘要：在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。 方案一：使用 pointer-events:none img{ pointer-events:none; } 亲测有效，适用于微信客户端的手机页
阅读全文
摘要：浏览器的事件循环，前端再熟悉不过了，每天都会接触的东西。但我以前一直都是死记硬背：事件任务队列分为macrotask和microtask，浏览器先从macrotask取出一个任务执行，再执行microtask内的所有任务，接着又去macrotask取出一个任务执行...，这样一直循环下去。但是对于下
阅读全文
摘要：在写测试代码时，以往我们需要翻阅文档，学习各种 API 才能明白如何操作断言。而现在我们可以透过 power-assert 的 assert 方法来减轻调试压力。不仅如此，它还提供更加直观，具体的运行效果，帮助 DEBUG。写测试代码，其实可以很容易。 例子 power-assert 提供的 ass
阅读全文
摘要：随着 Flash 的落寞 以及 移动设备的爆发性增长 ，越来越多的内容以 html5 视频的方式传递。在上一篇文章中你甚至能看到 使用 html5 视频替换 GIF 动图来优化网站访问速度 这样的技巧。然而事实上，视频格式本身就有一堆优化技巧可用来改善它们的性能表现。其中非常重要的一点，就是视频文件
阅读全文
摘要：什么是断点续传？ 就是下载文件时，不必重头开始下载，而是从指定的位置继续下载，这样的功能就叫做断点续传。 断点续传的理解可以分为两部分：一部分是断点，一部分是续传。断点的由来是在下载过程中，将一个下载文件分成了多个部分，同时进行多个部分一起的下载，当某个时间点，任务被暂停了，此时下载暂停的位置就是断
阅读全文
摘要：1、js动态设置html的字体大小 var clientWidth = 0; if(document.documentElement.clientWidth >= 600){ clientWidth = 600; }else{ clientWidth = document.documentEleme
阅读全文
摘要：V8是google开发的JavaScriptV8是google开发的JavaScript引擎, 它是 开源的 ，而且是用C++编写的。它用于客户端（Google Chrome）和服务器端（node.js）JavaScript应用程序 V8最初旨在提高Web浏览器中JavaScript执行的性能。为了
阅读全文
摘要：当我们在网站中引入外部链接的时候往往使用的是 <a href="" target="_blank"></a> 大家都喜欢target="_blank", 因为新页面打开不影响原来的页面。但是这个存在安全问题, 由target="_blank"打开的页面, 可以通过window.opener访问原来的
阅读全文
摘要：在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考！ 基础样式： .gradient-text{text-align: left;text-indent:30px;lin
阅读全文
摘要：1、在不同设备上采用相似的设计 用户可以通过不同类型的设备访问你的网站，这些设备包括：电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页，确保他们具有类似的体验，这是用户体验设计中的一条重要标准。 2、导航的设计要简单易用、清晰明了 导航设计是网页可用性的基石。记住，如
阅读全文
摘要：1、localStorage 一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。注：两个页面要同源（URL的协议、域名和端口相同） // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*1
阅读全文
摘要：有时候，我们需要使页面内容不可选择。首先想到的是一个css属性：user-select。user-select有两个值： none：用户不能选择文本 text：用户可以选择文本 禁用选择代码实现 html: <p>你可以选择我。</p> <p class="noselect">你不能选择我！</p>
阅读全文
摘要：创建一个没有背景的圆，然后声明透明度为0.1的黑色边框(看起来是灰色)，修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画，并让该动画无限播放(infinite)即可。 使用的css3 特性: transform属性的 rotate，共一个
阅读全文
摘要：Visual Studio Code Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增php语法高亮。 Atom ATOM，是一个现代的文本编辑
阅读全文
摘要：在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的css动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有许多细致的动画细节。有一天夜里，我的脑海中突
阅读全文
摘要：这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。 那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。 下面以高宽
阅读全文
摘要：在自动化元素定位操作中经常使用智能等待来加强定位的强壮性，主要就是因为WebDriver没有提供页面加载场景的方法；在使用JavaScript知识的突然心生灵感，可以使用JavaScript来配合验证页面加载，结果发现我真是井底之蛙。 一、domcument.readyState 首先定位从Docu
阅读全文
摘要：最近在开发小程序中，需要用到音频播放功能。但在初始化时，使用InnerAudioContext.duration获取不到音频的时长。 Page({ /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 创建一个audio this.innerAu
阅读全文
摘要：最近在做项目时，有一个需求是批量打印好多个合同，使用AJAX向后台传送数据，等待后台执行后，需要把生成之后的文件地址传送过来。 后台的处理时间比较长，根据合同的多少可能等待时间比较长，会达到10s左右，这个时候如果不加任何的提示，会导致用户因为没有看到是否执行而导致重复的操作，为了增加用户的体验感，
阅读全文
摘要：css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形，三角形等知识点，由于IE9以上才支持圆角，暂时不考虑兼容问题 css实现圆形 <div class="circle"></div> <style> .circle { border-radius
阅读全文
摘要：css3里有个很强大的功能，就是计算器，使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。与有序列表相比，突出特性在于可以对任意元素计数，同时实现个性化计数。 简而言之，计数器就是采用css给html元素自动生成编号。其本质上是由css维护的变量，其值可以通过css规则递增以跟踪
阅读全文
摘要：一般默认的滚动条会比较丑，我们可以利用css或者js来实现实现自定义滚动条的功能； 下面就整理2种实现方式 1、css自定义滚动条 需要在WebKit平台上才支持，代码如下： ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track
阅读全文
摘要：iframe高度自适应内容 需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 设置iframe 自适应高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以
阅读全文
摘要：文字选中效果，这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的，不过可以通过css进行设置。 代码如下： /*文字选中效果*/ *::selection { background-color: palevioletred; color: white; } *::-moz-selec
阅读全文
摘要：最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。 说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。 这件事情在html5以前是一件非常恐怖的，因为浏览器对本地文件系统
阅读全文
摘要：在目前的前端开发中，我们经常需要进行响应式的网站开发。提起响应式，大家应该想到三个概念： 弹性布局， 弹性图片， 媒体查询。本文着重介绍一下弹性图片，也就是响应式图片的解决方案。 一、js或服务端 通过js或者服务端来控制图片的加载，原理就是跟踪window的resize事件，然后修改图片的路径，代
阅读全文
摘要：在前端应用越来复杂的今天，为了监控前端应用是否正常运行，通常会在前端收集一些错误与性能等数据，最终我们会将这些数据上报到服务端。 上报的方式有很多，理论上我们只要能把数据发给服务端就行了。在浏览器中可以发送请求的方式非常多，包括不限于：xhr、fetch、script标签、img标签、link标签、
阅读全文
摘要：前言 从 Yarn 横空出世推出 lock 文件以来，已经两年多时间了，npm 也在 5.0 版本加入了类似的功能，lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件，以及它的一些成本与风险，当然其中一些观点对于后端也是适用的。 为什么需要 lock
阅读全文
摘要：对于IE8及以上版本，例如： <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号（；）分隔，对于不同的浏览器版本就有不同的兼容性，例如 <meta
阅读全文
摘要：Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击，只需访问包含某些 css 和 html 的网页，就会导致 iOS 重新启动或重新启动以及 macOS 冻结。 Windows 和 Linux 用户不受此错误的影响。 攻击利用 -webkit-backdrop-filter
阅读全文
摘要：今天给大家分享一款非常常用的css 加载动画，这款css3 Loading动画主要由几个小球通过规律的上下跳动，渐隐渐显而成，效果十分生动、流畅。兼容IE8以上，尤其适合在移动端中使用，基本代替了图片实现加载的效果。 反弹加载动画效果如下： 代码的实现： <div class="bouncing-l
阅读全文
摘要：web设计排版多种多样，如何更好的排版、设计出更符合美学的设计了？设计该如何更好的做好网页设计的布局排版了，今天给大家分享这几个小技巧，希望大家能有所用。 一、强调字体 字体的设计与强调在网页当中相当重要，合适的排版和适当的字体强调，不仅可以让用户快速的抓住网站中的重点，同样可以增强网站对用户的吸引
阅读全文
摘要：webpack管理的项目，我们希望用sass定义样式，为了正常编译，需要做如下配置。这里不讲webpack的入门，入门的文章，我推荐这篇《webpack入门》。 为了使用sass，我们需要安装sass的依赖包 //在项目下，运行下列命令行 npm install --save-dev sass-lo
阅读全文
摘要：当Web项目前后端分离开发的时候, 由于域名不一致, 会出现无法请求和无法维持会话的情况 OPTIONS 在前端Ajax请求后台的时候, 打开控制台可以看到, 每一次请求之前都会有一次OPTIONS类型的请求OPTIONS称为预检请求, 通过这个请求, 浏览器会告知服务器,接下来的请求的情况 Acc
阅读全文
摘要：box-sizing 属性 1.content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width，heig
阅读全文
摘要：效果图： 主要运用的是1.border 组成的直角三角形。2，before 和 after 伪元素 。3，z-index属性 css代码： div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; backgroun
阅读全文
摘要：/*向左移动并弹性显示*/ @-webkit-keyframes fadeToLeftTan{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 70%{ -webkit-transform:translateX(-5%); opacity:1;
阅读全文
摘要：一、调试准备 Windows10 64bits IDE：Visual Studio Code1.28.2 安装插件：Chrome（安装方法：Debug -> Install Additional Debuggers... -> Debugger for Chrome，重新启动vscode即可。） 二
阅读全文
摘要：你有没有遇到过： 前端代码刚写完，后端的接口又变了。 接口文档永远都是不对的。 测试工作永远只能临近上线才能开始。 为什么前后端分离了，你比从前更痛苦？ 前后端分离早已经不是新闻，当真正分离之后确遇到了更多问题。要想解决现在的痛，就要知道痛的原因： 为什么接口会频繁变动？ 设计之初没有想好。 这需要
阅读全文
摘要：-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想
阅读全文
摘要：如今web服务随处可见，成千上万的web程序被部署到公网上供用户访问，有些系统只针对指定用户开放，属于安全级别较高的web应用，他们需要有一种认证机制以保护系统资源的安全，本文将探讨五种常用的认证机制及优缺点。 HTTP基本认证（HTTP Basic Auth） 在HTTP中，HTTP基本认证是一种
阅读全文
摘要：jsON Web Token（JWT）是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。其JWT的组成： 一个JWT实际上就是一个字符串，它由三部分组成，头部、载荷与签名。 载荷（Payload） { "iss": "Online JWT Builder", "i
阅读全文
摘要：作为JavaScript替代，一种Web开发的新形式已经浮出水面：WebAssembly. Web开发与JavaScript开发向来是同义词。就是说，直到现在。但一种新的Web开发形式已然出现，声言会取代JavaScript。作为一个拥有15年Web开发经验的程序员，这个新方向瞬间吸引了我。 Web
阅读全文
摘要：在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域 保持图像的纵横比（图片不变形） 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例,最简单，最高效的方法 css3.0 归功于css3.0新增的一个属性bac
阅读全文
摘要：思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前端的布局样式 <body> /*首先，在
阅读全文
摘要：首先使用vscode的搬砖猿，想要在vscode编辑器里面很方便的编译less文件，需要在扩展商店里面下载一款名叫Esay LESS的超好用扩展（我自己都不信），哈哈，其实还好。 安装完扩展之后，最好点击一下重载以启用，为了后面更好的使用这个扩展，其他的扩展也都是重载后使用更佳。。。 想要配置这些扩
阅读全文
摘要：块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！ 其中还有一种结合两种模式有点的显示模式： 行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一
阅读全文
摘要：在ios中为了让滑动更流畅，不那么生涩，我们需要使用-webkit-overflow-scrolling属性，如下： -webkit-overflow-scrolling : touch; 其工作原理是：在有这个属性的容器上，系统会创建了一个uiscrollview，应用于该元素并将之作为渲染对象，
阅读全文
摘要：概述 html几乎是平铺直叙的。css是一个伟大的进步，它清晰地区分了页面的结构和外观。JavaScript添加一些魅力。道理上讲是这样的。现实世界还是有点不一样。 在本教程中，您将了解在浏览器中看到的内容是如何实际呈现的，以及如何在必要时进行抓取。特别是，您将学习如何计算Disqus评论。我们的工
阅读全文
摘要：Web技术飞速发展的如今，我们在感受新技术带来的便捷和喜悦的同时，也时常在考虑着一个问题：老技术如何迁移。正如本文的主题一样，Flash技术在早年风靡在Web领域，曾经发挥着无尽力量的一个工具正逐渐失去了其重要性。由于性能，兼容性，版权问题，Flash的市场正在消退，曾经靠Flash实现的功能和特性
阅读全文
摘要：在ios端默认的长按选择，可以对文字进行复制粘贴。但是在实际开发中，针对一些按钮一般要避免长按时弹出选中文字，或者一些罩层要避免弹出。 这篇文章通过css3实现禁止ios端长按复制选中文字的方法。 css代码如下： *{ -webkit-touch-callout:none; /*系统默认菜单被禁用
阅读全文
摘要：html5的新特性 1.语义化标签 有利于seo，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。 语义化的html在没有css的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护 2.表单新特性 3.多媒体视频(video)和音频(audi
阅读全文
摘要：html中的链接，正确的说法应该称作”锚点“，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页， 通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作”精准链接”的便利工具，让链接对象接近焦点。 便于浏览者查看网页内容。 类似于我们阅读书籍时的目录页码或章回提示。在
阅读全文
摘要：自定义可拖动的进度条，如下图效果： 代码分三部分 html <body> <div id="demo"> <div class="progress"> <div class="progress-bar"> <div class="progress-thumb"></div> </div> </div
阅读全文
摘要：当我写一个功能模块方法时，我在想些什么 // 无论什么方法，都是这样一个结构 const fn = () => { }; 比比如，我要写一个接口，查询组织下的设备列表 /api/device/list 地基 const deviceList = (params) => { // 传入一些参数 ret
阅读全文
摘要：网站重构： 在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。 也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。 对于传统的网站来说重构通常是： 表格(table)布局改为div+css 使网站前端兼容于现代浏览器(针对于不合规范的css、如对I
阅读全文
摘要：小小的字体其实有大大的学问，可能与字体相关的很多知识都偏设计，不过俗话说技多不压身，艺高人胆大，多了解了解总归没错。 字体的分类 就 Web 常用的一些字体而言，经常听说的字体类型，大致可以分为这几种： serif(衬线) sans-serif(无衬线) monospace(等宽) fantasy(
阅读全文
摘要：一. 字体属性：(font) 1. 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 2. 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 3. 行高
阅读全文
摘要：写css时发现，图片加起来刚好是900px的多张图片，不能在一个900px宽容器放下，因为图片之间有间隔，我猜是浏览器把两个img标签之间的空格当成了空白节点。 在网上整理了一些解决多个img标签存在间隙的方法。 1、多个img标签写在一行 <img src="/i/eg_tulip.jpg" he
阅读全文
摘要：在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 css 标准文档中，视口也被称为初始包含块，它是所有 css 百分比宽度推算的根源，给 css 布局限制了一个最大宽度。 而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Vis
阅读全文
摘要：分享一些和设计师成为好朋友的个人经验，注意，这些经验技巧只适用于技术开发人员。 1. 不要站在设计师的背后 如果有事情找设计师商量，千万不要站在设计师的背后，因为会给人一种你即将要指点江山的感觉，会唤起设计师过往一些糟糕的不好的回忆。 所以正确的做法是，搬个椅子，坐在设计师的旁边，记得把座椅高度调到
阅读全文
摘要：瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 co
阅读全文
摘要：HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码,其中第一位数字表示响应类别，响应类别从1到5分为五种 一、http状态返回代码 1xx（临时响应） 表示临时响应并需要请求者继续执行操作的状态代码。 http状态返回代码 代码 说明100 （继续） 请求者应当继续提出请求。 服务器返
阅读全文
摘要：最近使用到了html和js的表格插件Handsontable， 例子代码如下 var hot=new Handsontable(table_div, { data: null,//表格数据 一般是二维数组[[]] colHeaders: true,//显示列头 rowHeaders: true,//
阅读全文
摘要：一般遮罩 background : #000； 在body标签的最后加上div标签作为遮罩，如下： <div class="mask"></div> 其css样式： .mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0; ba
阅读全文
摘要：package.json是什么？ npm安装package.json时 直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下。 package.json就是管理你本地安
阅读全文
摘要：在项目的实际开发中，我们总会遇到前后端分离的项目，在这样的项目中，跨域是第一个要解决的问题，除此之外，保存用户信息也是很重要的，然而，在后台保存用户信息通常使用的session和cookie结合的方法，而在前端的实际情况中，跨域产生的ajax是无法携带cookie信息的，这样导致了session和c
阅读全文
摘要：前言 随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高 ，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。 本文完整的源代码请
阅读全文
摘要：我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的，但存在的问题
阅读全文
摘要：作为个人开发者，为自己的辛苦开发的项目配上支付功能，才有盈利的盼头！但是目前大部分都需要企业资质，那对应个人而言如何在网站、应用中接入支付功能呢？这里找了一些不需要企业资质的第三方支付平台。 1、PayPal 个人，企业都可以接入，作为一款主打跨境支付的产品，主打境外收付款，那么对于做外贸的朋友来说
阅读全文
摘要：在html中一个table表单主要由tr、td、th元素组成,比较复杂一点的表单还会包含caption、 col、 colgroup、 thead、tfoot、 tbody等元素. 一、table内标签含义: <tr>:表格的行标签,有多少对<tr></tr>就有多少行.<td>:普通单元格标签,位
阅读全文
摘要：css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的 drop-shadow 代码如下： <style> .icon{ display: inline-block; widt
阅读全文
摘要：前几天，在写完一个功能模块上线测试的时候，出现了一个诡异的问题。input 框在输入查询内容之后，按回车键居然有两种不同的表现形式（input 框没有绑定键盘事件），谷歌和火狐功能正常，但IE在按了回车键以后居然自动调用方法。 页面结构：标签上没绑定任何键盘事件，控制器内也没有给元素绑定键盘事件。
阅读全文
摘要：The web has evolved. Finally, testing has too. 事实上对于 UI 自动化测试来说，许多所谓框架之间并没有太多差别，也从来不是影响整套测试用例是否健壮的关键性因素。相比之下，如何提高测试用例稳定性以及出现错误时 debug 的便捷性才是让 UI 自动化测试
阅读全文
摘要：css3 动画给 Web 的用户体验带来了巨大提升，本文将尝试从浏览器渲染的角度，来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。 60fps 与设备刷新率 目前大多数设备的屏幕刷新率为60fps（Frame per Second），即每秒60帧。因此，如果在页面中有一个动画或渐变效
阅读全文
摘要：不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用css sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站
阅读全文
摘要：css3非常强大，我们可以利用css3相关特性绘制很多平面图形，并且可以制作很多简单的动画。今天要分享的是一款用纯css3实现的可爱表情动画，一共有7组表情动画。 这些表情图实在太可爱了，哈哈CSS真的是太强大了 效果如下： pixabayhttps://www.wode007.com/sites/
阅读全文
摘要：什么是css sprites? css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量 css sprites优点： 1、减少网页的HTTP请求，提高页面性能2、图片命名上的困扰3、更
阅读全文
摘要：作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。幸运的是，我们有懒加载这个绝招，它可以帮助我们减少加载时间和降低负载，而不在内容上偷工减料。 什么是懒加载
阅读全文
摘要：本文主要列举在如今前后端分离、手机App大行其道的现状下，用户认证、授权的几种做法及对比。PS. 本文假设你已经理解了各种认证模式的具体细节。 OAuth2.0的几种模式 OAuth2.0是一个被广泛采用的事实标准，它同时包含认证和授权两种模式，我们来看一下它有几种模式： Grant typeCli
阅读全文
摘要：Sass和Less这样的预处理器，让我们的css代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性，增强了动态编写css的能力，从而减少重复代码，也加快了我们开发速度。 近年来，一些动态特性开始作为规范的一部分，出现在css语言中。css变量(css variables)，或
阅读全文
摘要：本本节课讲解在webpack v4中的 Scss 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。Scss 是 Sass 3 引入新的语法，其语法完全兼容 css3，并且继承了 Sass 的强大功能。也就是说，任何标准的 css3 样式表都是具有相同语义的有效的
阅读全文
摘要：html中的空格的规则 在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除， 如下： <p> fly63 com </p> 显示效果为： fly63 com 备注：浏览器的这种机制处理，同样适用于除了普通的空格键，还包括制表符（\t）和换行符（\
阅读全文
摘要：css中:focus-within是什么 在css中 :focus-within 是一个伪类，现在已经被列入到css选择器中（css Level 4 selector）。css中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的
阅读全文
摘要：网站的加载速度不仅影响着用户体验，也会影响搜索引擎的排名，在百度推出“闪电算法”以来，将网站首屏打开速度被列入优化排名行列，并明确指定打开时间为 2 秒。作为前端开发的我们需要如果来优化网站的打开速度呢？下面就整理挖掘出很多细节上可以提升性能的东西分享给大家 优化网站性能的14条规则： 1. 尽可能
阅读全文
摘要：用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验 Skeleton Screen Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展
阅读全文
摘要：一、什么是Sass Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。这里是官方文档。 二、基本语法 1）变量 sass的变量名必须是一个$符号开头，后面紧跟变量名。 //sass 样式 $re
阅读全文
摘要：BFC的定义： (Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 我们常说的文档流其实分为==定位流、浮动流和普通流==
阅读全文
摘要：为了让网页内容更好的适应各类屏幕尺寸，一般都需要用到height:100%。但是会发现，height百分比失效并没有生效，这是什么原因造成的呢，以及我们需要如何解决呢？ height百分比失效的原因 你让div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入
阅读全文
摘要：问题产生的原因 当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。 解决方法 需要使用css中的word-wrap
阅读全文
摘要：css的pointer-events属性 auto：与 pointer-events 属性未指定时的表现效果相同。 none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒
阅读全文
摘要：一、PageRank算法定义 PageRank，网页排名，又称网页级别、Google左侧排名或佩奇排名，是一种由根据网页之间相互的超链接计算的技术，而作为网页排名的要素之一，以Google公司创办人拉里·佩奇（Larry Page）之姓来命名。Google用它来体现网页的相关性和重要性，在搜索引擎优
阅读全文
摘要：目前前端三大框架（vue.js, Angular.js, react.js）都在引领着前端的组件化开发方向，组件化的前端开发方式的确为业务实现带来了前所未有的方便，其实组件化开发早已经具有（YUI），但如何封装一个优秀的组件，可能并不是每位前端开发者都能够做好的。 组件封装有一定的不确定性，更多时候
阅读全文
摘要：进程就是一个应用程序在处理机上的一次执行过程，它是一个动态的概念，而线程是进程中的一部分，进程包含多个线程在运行。 线程是最小的执行单元，进程是最小的资源管理单元。一简言之： 进程就是一个应用程序在处理机上的一次执行过程，它是一个动态的概念，而线程是进程中的一部分，进程包含多个线程在运行。 线程是指
阅读全文
摘要：实现思路： 监听滑块的移动事件，获取它离左侧的距离，赋值给分离出来的验证模块就可以了，至于陷下去的模块，得到图片的大小，根据图片的长宽的一半随机赋值吧（因为这个模块一般都在右侧靠中间的位置） 这种滑动解锁应该是有两张图片，一张正常的，一张上面有解锁区域的（后端给），然后前端只用把用户释放鼠标后，滑动
阅读全文
摘要：一、css下兼容性的元素水平/垂直翻转实现 随着现代浏览器对css3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的css代码如下： /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transfor
阅读全文
摘要：什么是Browsh? Browsh是一个纯文本浏览器，可以运行在大多数的TTY终端环境和任何浏览器。目前，终端客户端比浏览器客户端更先进。 TTY 客户端 终端客户端即时更新和交付，以便于体验新的功能，例如，你可以观看视频。它使用UTF-8半块技巧(▀)从每个字符单元中获取2中颜色，从而仿真基本图形
阅读全文
摘要：初学者须知 我们来讨论html和DOM之间的区别。显然，一个普通<table>元素就是html。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是html，不过它与JavaScript无关。 DOM是将JavaScript代码与文档中的html元素相关联的内容，因此您可以与
阅读全文
摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。 可是啊，现实太残酷，浏览
阅读全文
摘要：1、引号的使用，单引号' ' 优先（如果不是引号嵌套，不要使用双引号） 正常情况：console.log('hello there') ，双引号转码： $("<div class='box'>") 2、空格的使用问题：（关键字后 符号后 排版 函数 赋值符号= ）等 a 函数的括号：function
阅读全文
摘要：一 . 认识Phantomjs 1.Phantomjs：无界面的浏览器 Selenium： 可以根据我们的指令，让浏览器自动加载页面，获取需要的数据，甚至页面截屏，或者判断网站上某些动作是否发生。Selenium 自己不带浏览器，不支持浏览器的功能，它需要与第三方浏览器结合在一起才能使用。但是我们有
阅读全文
摘要：一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现
阅读全文
摘要：动态生成html元素的方法有三种： 第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
阅读全文
摘要：box-sizing用于更改用于计算元素宽度和高度的默认的 css 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。 1. 属性讲解 content-box 默认值，也是css2.1中的盒子模
阅读全文
摘要：说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。而今天所要分享的，是使用 0 行js代码来实现Tab切换！ 方法一：模拟单选框原理 该方法大致原理如下：当用户点击label元素时，该label所绑定的input单选框就会被选中，同时通过使用css选择器
阅读全文
摘要：在移动端部分浏览器中点击了图片，变成了查看图片的效果，怎么防止img的图片被手机浏览器的图片查看器打开呢？下面整理了一些方法来实现。 1、1.在img元素上添加 onclick="return false" <img src="./img/tip.png" onclick="return false
阅读全文
摘要：微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Ta
阅读全文
摘要：需求 textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。 发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。
阅读全文