前端入门 | 易学教程

前端工程自动化构建总结

阅读更多关于前端工程自动化构建总结

前端自动化构建是当下的热门，我记得2014年的时候，前端的自动化构建，大多是用在javascript的合并、压缩、语法检查、coffeescript,Sass,LESS转换上，构建工具也有很多，比如ant,grunt,gulp等，二次封装的工具也有很多，比如百度的FIS,国外的Yeoman。2016年以后，随着es6,es7,Node的兴起，前端又发生了翻天覆的变化，特别是移动端的H5最为明显，以前切个图，在PC上预览测试就可以发布的时代，在移动端就不灵验了,在手机端预览至少要搭建一个http服务器，比如http://192.168.0.2/index.html。在手机端输入网址不方全，通常会将网址做成一个二维码，然后用手机扫一下就可以打开预览。我们每改一下样式，就在手机上点一下刷新或电脑上按一下F5，这在最初的时候，也不觉得有什么问题，因为拿到我手上的静态页，通常由切片的同事做好了兼容性测试，需要一边刷新浏览器，一边改样式的机会不多。随着我们尝试用Less,stylus,这样的css工具，一方面，需要用到gulp这样的工具在后台自动监听我们的样式改动，另一方面，手动刷新的时候，gulp的脚本未必转换完了。这时候迫切需要浏览器自动刷新。总的来说，需求就两点，一是需要一个http服务器，来供手机访问静态资源，另一个是监听代码的改动并自动刷新浏览器。要满足这两个需求的第三方工具

web前端入门到实战：使用CSS实现图片帧动画与曲线运动

阅读更多关于 web前端入门到实战：使用CSS实现图片帧动画与曲线运动

在前端开发中，提到动画，我们可以：直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。 ... 所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种方案。比如下面这种动画效果：可是如果我们想让动效在某个时候暂停，隔一段时间后，再从断点开始继续播放动效，用gif图就实现不了了。 gif图的动效是没有办法暂停的。这个时候，可以考虑采用图片帧动画。图片帧动画可以看做是：把gif图的原理在前端用代码实现了一遍。上面个那个动效，(假设)可以分成100帧，即100张图片，然后用代码控制100张图片依次显示。并且，可以随时在中途暂停。为了节省http请求，把100张图片合成一张雪碧图，然后用background-position去控制显示哪一张图。推荐一个很不错的图片生成工具：GKA 我把100张图片生成了一个竖直的雪碧图。在代码里，只需要更新DOM元素的background-position即可实现动画。首先第一个点需要注意：background-position设置的是背景图片相对于DOM元素的起始位置。

web前端入门到实战：jQuery中的事件、动画、表单应用

阅读更多关于 web前端入门到实战：jQuery中的事件、动画、表单应用

什么是事件? 页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 " 触发 " （或 " 激发 " ）常用click(）方法触发 DOM的加载 $(document).ready() 方法与 window.onload () 方法的区别：事件绑定使用bind（）方法为每个匹配元素的特定事件绑定事件处理函数。bind() 方法的调用格式： bind(type,[data], fn ) • type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如 "click" 或 "submit" ，还可以是自定义事件名。 • data: 作为 event.data 属性值传递给事件对象的额外数据对象 • fn : 绑定到每个匹配元素的事件上面的处理函数实例： //事件绑定 $("#btn1").bind("click",function(){ alert("点我触发bind函数"); }) <button id="btn1">点我触发bind函数</button> 使用 jQuery 的 is()方法判断元素是否可见，使用is()方法: alert($("button").parent().is("body")); /* * $("#b1").is(":visible") 判断id为d1的元素是否可见 *

vue学习进阶之路-1.vue前端单页应用入门必要基础

阅读更多关于 vue学习进阶之路-1.vue前端单页应用入门必要基础

1.vue前端单页应用入门必要基础 nvm安装使用nvm安装node.js npm的镜像管理nrm vscode开发工具 nvm安装可以直接安装node.js运行环境，但是为了更好的管理node.js的各个版本，最好先安装nvm-setup.exe，nvm是node.js（n）的版本version（v）管理器manager（m），所以叫nvm. nvm下载 https://github.com/coreybutler/nvm-windows/releases nvm 安装解压nvm-setup后，运行安装程序，一路下一步到安装完成如果电脑上原本安装了node，期间会出现如下弹窗，是否允许nvm管理已下载的node版本，这里选择是。 3. 验证是否安装成功在cmd窗口敲 nvm ，如下说明安装成功使用nvm安装node.js 由于nvm默认是从国外下载的，安装node.js时很慢。可以修改nvm安装目录下的settings.txt文件，将下载镜像改成从淘宝镜像下载,如下配置最后两行。 root: D:\App\nvm arch: 64 proxy: none originalpath: originalversion: node_mirror: http://npm.taobao.org/mirrors/node/ npm_mirror: https://npm

前端流行框架对比

阅读更多关于前端流行框架对比

[译] Angular 2 VS. React：血色将至： http://www.w3ctech.com/topic/1675 [原译] React vs Angular 2: 战争继续： http://jixianqianduan.com/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html Vue.js 对比其它框架: https://vuejs.org.cn/guide/comparison.html Angularjs双向绑定的研究： https://www.nihaoshijie.com.cn/index.php/archives/306 Angular 从 1 到 2 快速参考: https://angular.cn/docs/ts/latest/cookbook/a1-a2-quick-reference.html 知乎：react.js,angular.js,vue.js学习哪个好？ https://www.zhihu.com/question/39943474 React 简介和原理： http://anjia.github.io/2015/07/24/fe_react/ 浴火重生的Angular: https://github.com/xufei/blog/issues/9

前端入门（二）

阅读更多关于前端入门（二）

1.HTML是什么? Html全称超文本标记语言(HyperText Markup Language)。超文本：超级文本的中文缩写。超链接的方法，将各种不同空间的文字信息组织在一起。可以理解为“超越纯文本”。标记语言：不是编程语言，使用一系列的标记，表示/存储信息。 2.什么是 HTML 标签？它有什么特性？ HTML标签是HTML语言中最基本的单位。 HTML 标签是由尖括号包围的关键词，比如<html> HTML 标签通常是成对出现的，比如<b>和</b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 3.有哪些常见浏览器和其对应的内核？渲染引擎浏览器 Trident IE Gecko FireFox Webkit Chrome,Safari, Apple & Android mobile devices Presto Opera, Opera mini 4.<!DOCTYPE>声明是什么？ <!DOCTYPE>声明必须是 HTML 文档的第一行，位于<html>标签之前。<!DOCTYPE> 并不属于 HTML 标签，它只是标示当前 HTML 文档的版本信息。 5.<html>，<body>，<head>标签的相对包含关系是什么？ <html>标签为 HTML 文档的根元素，只能有一个。 <head>是<html>的直接子元素，<head

web前端入门到实战：CSS基本格式以及文字相关的属性

阅读更多关于 web前端入门到实战：CSS基本格式以及文字相关的属性

一、CSS格式 1.注意点：（1）style标签必须写在head标签的开始标签和结束标签之间（也就是必须和title标签师兄弟关系）（2）style标签中的属性type属性其实可以不写，默认就是type="text/css" （3）设置样式是必须按照固定格式来设置，key:value;其中不能省略冒号和分号（最后一个分号的时候可以省略，但是我们不提倡）二、CSS包括什么？ CSS包括选择器和属性两部分其中选择器就是标签名称，属性就是属性名称和值  <head> <style type="text/css"> 标签名称：{ 属性名称：属性值 ...... } </style> </head> 三、常见的文字相关的属性 1.规定文字样式的属性（1）格式：font:normal; （2）常见取值：i.normal:正常的文字；ii.italic:倾斜的文字（3）快捷键：（由于我们使用的是wbstorm，在企业开发过程中掌握某些软件的快捷键是很有必要的，可以达到事半功倍的效果） fs+table代表font-style:italic; fsn代表font-style:normal; 2.规定文字粗细的属性（1）格式：font-weight:bolder; （2）常见的取值： i.单词取值： bold加粗；bolder更粗；lighter：细线（注意

学习哪些技能才能胜任web前端开发岗位？

阅读更多关于学习哪些技能才能胜任web前端开发岗位？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 当前IT的发展，已经成为我国的重大产业之一，很多的企业为了争夺优秀的专业人才，不惜给出丰厚的薪资待遇。据知名部门统计，每年IT行业的人才缺口可达到数百万，尤其是前端软件人才的缺口。而我国信息化人才培养还处于发展阶段，导致社会实际需求人才基数远远大于信息化人才的培养基数，使得数以万计的中小企业急需全面系统掌握前端开发基础技能与知识的软件工程师。很多人由于大学误入了大坑专业，毕业后面临重新转行择业的问题。选择学习前端的人不在少数，原因嘛：入门学习的难度可以克服，就业市场广泛，且薪资较高。对于前端学习的童鞋来说，首先要明白自己需要哪些专业技能才能满足企业的用人需求，其次是明白通过怎样的学习方式和途径可以较快掌握这些知识和技能。下面给大家讲解一下前端需要掌握哪些技术吧 Web前端基础知识：一．前端相关概念建立主要内容：浏览器的概念介绍：浏览器的作用、工作方式浏览器的概念介绍：浏览器的作用、工作方式 HTTP协议：协议产生的原因、作用、及内容页面加载流程：当用户打开浏览器，输入地址栏并按下回车之后发生的事情二．HTML-CSS-JS基础-jQuery 学习内容： HTML及HTML5：理解浏览器如何解析HTML、基本的语法规则、不同标签的使用方式、嵌套方式 CSS：理解层叠式样式表的语法规则

web前端入门到实战：HTML-div和span标签

阅读更多关于 web前端入门到实战：HTML-div和span标签

一、div标签 1.作用：一般用于配合CSS完成网页的基本布局 2.例子： <style> .head{ width: 980px; height: 100px; background: red; margin: auto; } .content{ width: 980px; height: 300px; background: green; margin: auto; } .footer{ width: 980px; height: 100px; background: blue; margin: auto; } .logo{ width: 280px; height: 50px; background: purple; float:left; margin: auto; } .nav{ width: 180px; height: 20px; background: yellow; float:right; margin: auto; } </style> </head> <body> <div class="head"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> </div> <div class="footer"> </div> web前端开发学习Q-q-u-n：

web前端入门到实战：制作一个百度首页

阅读更多关于 web前端入门到实战：制作一个百度首页

一、我们制作一个百度首页作为练习，可直接复制该代码保存后缀名为.html来查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d93_baidu_home_exercise</title> <style> .header{ height: 250px; /*background-color: red;*/ } .content{ height: 220px; /*background-color: pink;*/ } .footer{ height: 200px; /*background-color:green;*/ } div{ text-align: center; } .logo{ background-color:skyblue; height: 130px; } input[type=text]{ width: 400px; height:30px; } input[type=submit]{ width:80px; height:30px; } .content_form{ height:80px; } body{ font-size: 16px; } </style> </head> <body> <div class="header"> <div> <img src

订阅前端入门