前端开发 | 易学教程

在web开发中，为什么前端比后端更得到转行程序员的青睐？必看！

阅读更多关于在web开发中，为什么前端比后端更得到转行程序员的青睐？必看！

1、Web开发分类与区别人们通常将Web分为前端和后端，前端相关的职位有前端设计师(UI/UE)，前端开发工程师，后端相关的有后端开发工程师。 2、技术栈区别看各大招聘网站上，公司对前端开发工程师的要求莫过于精通HTML，CSS，JS，有良好的交互设计能力等。再看公司对后端开发工程师的要求：比如Java开发工程师，要求精通Java，熟练掌握Java网络编程；熟练运用SSH等开源框架；熟悉互联网开发模式，清晰理解缓存，缓存设计和模式；精通TCP/IP、HTTP等网络协议，精通socket网络编程，有用Java做大访问量高压力网络应用的经验；熟悉Linux/Nginx；熟练配置维护Apache，Tomcat，Resin等应用服务器，掌握shell/awk/python等系统脚本工具；熟练掌握SQL语句，熟练使用数据库(MySQL，Oracle)；掌握Html/Javascript/Css/Ajax 等页面技术熟练使用Eclipse/Maven/Ant/SVN等软件开发工具； Web架构的性质决定服务端开发的复杂性，服务端的复杂性决定后端开发人员要掌握的技术。 3、学习成本区别用3年时间学习Web前端开发，多数同学都能够成为一个优秀的Web前端开发工程师。同样，用3年时间学习后端开发，多数同学只能算是入门。Web前端开发人员需要掌握HTML，CSS，JS

资深阿里程序员一一为你解刨Web前端知识体系结构

阅读更多关于资深阿里程序员一一为你解刨Web前端知识体系结构

只要接触过前端，都会指导web前端的知识主要由三部分组成：分别为静态html，样式css，动态javascript（简称js）这三大部分组成。其三部分组成的一个体系的复杂程度不亚于其他一门技术的复杂程度。当然对于跟我一样厉害的那些web前端来说那就是小菜一碟，但是很多人都只学了表面，基础部分，很多重要的知识，深入部分都是被忽视了！其实这也就导致了部分前端开发工作者学了前端，但是却找不到工作，有工作但是工资少的现象！现在为大家一一解刨Web前端知识体系结构，在阿里从事了6年的全栈，也是从前端慢慢成长过来的，也想跟很多小伙伴说一句：付出与收获是成正比的！ TextOne：首先最最最基础的部分html部分 1、常见的BOM对象 BOM（Browser Object Mode）浏览器对象模型，是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。 window窗口对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。同时， window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。 document 即文档对象，也是window对象的一个属性。整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树

web前端开发这门技术是什么？

阅读更多关于 web前端开发这门技术是什么？

前端是什么？在回答这个问题之前，我想到了一道面试题：当我们在浏览器中输入网址并按回车之后，接下来会发生什么？我们来简单地看一看 “网页展现” 的整个过程。比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”；右侧的事情发生在服务器端，称为 “后端”。（“前端” 之所以叫 “前端”

web前端入门到实战：css如何实现n宫格布局?

阅读更多关于 web前端入门到实战：css如何实现n宫格布局?

常见应用场景现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": @include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形 @include grid(2, 5, false, false); // 2 x 5, 无边框最终效果 "padding百分比"小技巧先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是: padding的值如果是百分比, 那么他是相对"父"元素宽度计算的, 也就是说如果"父"元素宽度是100px, "子"元素设置padding-top:100%,"子"元素的padding-top实际上等于100px, 这样就实现了一个正方形(100 x 100). 为了减少干扰, 我们把"子"元素高度设置为0; 设计思路(无关你是scss还是less) 为了方便内部元素水平/垂直居中, 整体我们用flex布局. 使用正方形占位, 因为用了padding-top:100%, 所以我们就需要再单独用一个div来装内容 , 我给他起名" item__content ". 为了让内容的容器div 充满方块,

web前端入门到实战：CSS的文本格式化样式总汇

阅读更多关于 web前端入门到实战：CSS的文本格式化样式总汇

长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元素字体大小变化而变化*/ width: 2em; /*百分比随着父元素变化而变化*/ height: 50%; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html> 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px

Web最佳实践阅读总结(1)

阅读更多关于 Web最佳实践阅读总结(1)

介绍最近开始刷一些书和题,此系列是介绍在读 Web最佳实践的一些收获和体会。 web前端发展现状存在问题：代码组织混乱代码格式的问题突出页面布局随意网站整体性能差，没有意识到应用诸如缓存，动态加载，脚本压缩，图片压缩等提高性能技术推荐做法：压缩样式表和脚本文件减少HTTP请求次数简洁和符合W3C标准的HTML和CSS代码能减少浏览器解析的时间，加快渲染过程页面请求数量越少，相对页面的加载速度更快在JS代码中选择性能更好的实现方案，如延迟加载，动态加载等技术; 延迟加载 <script type=”text/javascript” src=”" id=”my”></script> <script type=”text/javascript”> setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延时3秒 </script> 最后加载引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码，所以可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度动态加载 <scrīpt src='' id="s1"><

浅谈前后端分离与实践（一）

阅读更多关于浅谈前后端分离与实践（一）

一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Designer, ... Skills: Linux, MySQL, JAVA, JavaScript, HTML, CSS, ... Tools: phpmyadmin, photoshop, powerpoint, ... 我们用 express 应用生成器来模拟一下传统开发（因为本人早已忘记java是怎么写的了，这里只是为了方便演示） $ npm install express-generator -g # 安装 express-generator $ express progressive # 初始化项目 $ cd progressive # 进入目录 $ npm install # 安装依赖 $ npm start # 启动项目然后我们愉快的打开了 localhost:3000 看到了我们的页面: 接着，我看是研究代码：发现我的模板引擎用的是 jade 是通过 nodejs 服务端进行动态渲染： // app.js app.set('view engine', 'jade'); 然后当我访问 localhost:3000 的时候，开始了界面渲染：

前端移动端适配总结

阅读更多关于前端移动端适配总结

meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？不急，我们先往下面看，这里先留个悬念。几个专有名词和单位这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。首先，先来看一下物理像素。以iphone6为例，可知道：分辨率：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。屏幕尺寸：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。屏幕像素密度：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度 = 分辨率 / 屏幕尺寸接着，我们来看一下其他的单位。设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

大前端与前后端分离

阅读更多关于大前端与前后端分离

一、大前端　　简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。　　由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样，代码无法复用，非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢？大前端应运而生，其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。　　目前的主流跨平台方案：Cordova/phoneGap、React Native、Weex、微信小程序、PWA和Flutter等，根据其原理性，可以分为四大类。 H5+原生（Cordova、Ionic、微信小程序） JavaScript开发+原生渲染（React Native、Weex、快应用）自绘UI+原生(Flutter)

web前端入门到实战：十个最流行的前端 CSS 库

阅读更多关于 web前端入门到实战：十个最流行的前端 CSS 库

前端 CSS 库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。为什么要使用 CSS 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的资源，我们不该把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳？答案当然是肯定的。但除非您是位身经百战的 CSS 视觉创意人士，否则把这项工作交给专家才是最好的选择。与此同时，框架则能够更轻松地快速构建起直观的可用应用程序。凭借着极高的人气，目前市场上存在大量前端框架可供我们选择。 Ant Design 项目概括 “Ant Design 能够帮助每一位项目成员降低设计与原型设计工作的难度，同时提高后台应用程序与产品的开发效率。” ——摘自 Ant Design 官网 Ant Design 是一种面向后台应用的设计语言，由 Ant UED 团队开发而成。他们希望借此统一内部后台项目的用户界面规范、减少设计差异以及不必要的实现成本，从而解放出更多可用于设计以及前端开发的宝贵资源。特性一种面向 Web 应用程序的企业级 UI 设计语言。一套开箱即用的高品质 React 组件。由 TypeScript 编写而成并拥有完整的定义类型。整套开发与设计资源及工具。

订阅前端开发