web前端开发

看到一篇不错的文章，拿来收藏和分享。 原文：http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由 html、css和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型

一、什么是HTML5和H5 HTML5是HTML网页标准的5.0版本，5.0版本相比4.0新增了很多技术内容，这一次的变化是比较大的，甚至是革命性的，它的诞生带动了很多技术领域的发展，尤其是在移动端设备上面。因此，我们今天所谈论的HTML5这个词它已经产生了一些变化，它代表的已经不再是简单的HTML网页设计标准，而是围绕着HTML这个东西以及它周边的一系列网页相关技术的总称。这其中，既包含了HTML+CSS的网页制作，也包含了JavaScript这门编程语言的相关开发。 而H5就简单了~~，它就是HTML5的简称，仅此而已。 二、什么是WEB前端 它是根据H5的功能和作用所起的一个别名而已，就好像，当我们说微博的时候，我们的第一反应，想到的是新浪微博，但微博不止有新浪微博，它还有腾讯微博、Twitter等等，所以微博与新浪微博的关系，就像WEB前端与H5的关系一样。 三、全栈 大家都知道，我们平常看到的网页，全部是由程序编写的，这些程序运行的结果，就是我们看到的网页，我们管我们看得到的这部分技术领域叫做前端，而在一个网站的内部，还有很多很多我们看不见摸不着的程序在运行着，这些程序在背后进行着复杂又精密的计算，才能保证我们程序的正常运作，他们很重要，但很多时候，我们却感知不到它们的存在，因此我们管这个看不见的技术领域，叫做后端。当一个人的技术能力，既能覆盖前端又能覆盖后端的时候

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士，这几年我还是阅过很多同门从知名到很知名的各种前端框架，本来想拿15-20个框架来分享一下，但在跟几个前辈讨教写文章的技巧时果断被无情的打击了，所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍，凑够字数也就全剧终了。 原本写这篇文章想围绕着 CSS 框架来的，但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架，并且自己靠着一点 JS 功底，就想专门针对 CSS，所以最后来个大锅乱炖都大致聊聊。下面的框架也没有什么先后顺序之分，我想到啥就写啥啦( 作为前端，我一向都这么的任性 ^_^ )。 Bootstrap 首先说 Bootstrap，估计你也猜到会先说或者一定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心，来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美，所以这也是我最初选择 Bootstrap 的原因之一，它让我做出来的东西好歹能在妹子面前装个逼，不过时间长了难免觉得 Bootstrap 美的让人烦躁， 但好在它的每个版本都会有很大的改变，不会让人觉得自己做的网站会跟很多网站撞脸

一、为什么需要前后端分离 1.1什么是前后端分离 前后端分离这个词刚在毕业（15年）那会就听说过，但是直到17年前都没有接触过前后端分离的项目。怎么理解前后端分离？直观的感觉就是前后端分开去做，即功能和职责上的一种划分，前端负责页面的渲染，部分页面交互的逻辑，然后通过网络请求与后端进行数据的交互；后端则着重关注业务逻辑的处理，直接操控数据库。 1.2前后端未分离前 （1）jsp + servlet 开发模式: JSP页面：负责视图层的渲染及交互，内部可以嵌入java 代码，在某些场景下开发起来比较方便，但是这种页面和java代码混合开发的方式造成逻辑不够直观，项目代码维护起来困难。 Servlet类: 负责接收from表单提交的参数，进行业务层逻辑和页面导航的处理。但是这种方式需要区分请求的方式，手动把请求的参数拿出来进行封装。基本上一个请求对应一个servlet，需要在web.xml文件中配置urL映射或者注解的方式。 大体流程： 编写JSP页面，引入java常用类库和JSTL标签库，编写HTML表单，CSS，javascript。 编写Servlet 方法，重写service()方法，需要手动获取请求参数，然后业务逻辑处理。 配置web.xml。在web.xml文件中注册servlet，配置请求映射(简单方法：增加注册)。 （2）jsp + spring mvc开发模式

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1，不要着急看一些复杂网页效果的代码，这样除了打击你自信心，什么也学不到。没达到一定的武功水平，割了小JJ也学不会葵花宝典的。 2，别急着加技术交流QQ群，加牛人QQ。如果你找张三丰交流武功，你上去第一句问“丰哥，where is 丹田？”，你会被他一掌劈死的。 3，看网上什么多少天精通JS，啥啥啥从入门到精通，这种教程直接跳过吧，太多的事实证明，以一种浮躁的心态去做任何事都会以失败而告终。 推荐几本好书 “你丫吹了半天牛B，还是没说怎么学啊” 呵呵，我也没啥特别的办法，只是推荐几本好书。推荐的书，得按先后顺序看。别第一本没看完，就急着上第二本，并不是每次“穿越”都能成功的 第一阶段：《JavaScript DOM编程艺术》 看这本书之前，请先确认您对Javascript有个基本的了解，应该知道if else之类的语法，如果不懂，先去看看我第二阶段推荐的《Javascript高级程序设计》的前三章，记住看三章就别往下看了，回到《JavaScript DOM编程艺术》这本书上来。 学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了，老老实实看两遍，看完了你就会对JS有一个大概的了解，整本书都围绕着一个网页效果例子展开，你跟着老老实实敲一篇，敲完之后

关于@import和link引入样式的区别网上有很多种说法。大致有如下几种，不过这其中会有我存疑的地方，我们可以一起来探讨一下。 区别 1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载。 3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。 4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用 @import 的方式插入样式。 5.权重区别 link引入的样式权重大于@import引入的样式。（？？？） 我们在网上搜索关于这两者的区别的时候通常会看见有第5条这么一个说法。难道第5条真的是这样吗？有待商榷。 所以这里我们就通过几个demo来验证一下第五条 再验证之前我们先来说说css权重的相关概念： css的权重指的是选择器的优先级，CSS 选择器的权重高，即选择器的优先级高。 css的优先级表现在，对同一个html元素设置元素的时候，不同选择器的优先级不同

第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS 高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段：HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem

原作者：https://segmentfault.com/a/1190000013857582 1.HTML HTML5新特性，语义化 浏览器的标准模式和怪异模式 xhtml和html的区别 使用data-的好处 meta标签 canvas HTML废弃的标签 IE6 bug，和一些定位写法 css js放置位置和原因 什么是渐进式渲染 html模板语言 meta viewport原理 2.CSS 盒模型，box-sizing CSS3新特性，伪类，伪元素，锚伪类 CSS实现隐藏页面的方式 如何实现水平居中和垂直居中。 说说position，display 请解释*{box-sizing:border-box;}的作用，并说明使用它的好处 浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值 link和@import引入css的区别 解释一下css3的flexbox，以及适用场景 inline和inline-block的区别 哪些是块级元素那些是行级元素，各有什么特点 grid布局 table布局的作用 实现两栏布局有哪些方法？ css dpi 你知道attribute和property的区别么 css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？ 流式布局如何实现，响应式布局如何实现 移动端布局方案 实现三栏布局（圣杯布局，双飞翼布局

第一步：首先java SE重要的IO、线程、集合框架等掌握了； 第二步：java ee，servlet、jsp，jdbc，前端的js+CSS+jquery+ajax,还可以学点前端的vue等框架，建议这个阶段结合数据库基本的增删改查，做出点小项目，把web项目搭建好，部署到tomcat等容器跑起来，知道运行的过，出了错能找到解决办法； 第三步：学习框架。Spring必须的，orm框架建议学习mybatis，SpringMVC，有余力的话，集合SpringBoot框架一起学习，这个阶段还要学会使用maven和SVN等企业开发常用的工具，到这个阶段，其实已经可以进入公司慢慢上手了； 这种学习方式就是java web开发人员的基本路线。 来源： CSDN 作者： algo▪Tempest 链接： https://blog.csdn.net/weixin_43899266/article/details/103584901

首先，你要明白，你学前端是兴趣爱好，还是今后想从事前端工程师。如果是兴趣爱好的话，完全没有必要去购买视屏教程，各大视屏网站都会有免费的视屏教程，还有各种学习网站，编程论坛里面都会有书面教程，也是比较专业的。但是无论是视频教程，还是编程论坛里的教程，技术层次上都是比较滞后了的，并且质量参差不齐，作为一个新手，你肯定是不知道自己学的到底是不是正确的，方法是最好的。 就比如，做出一个轮播图，我能用几十条代码写出来，你却要上百条，并且代码不简洁，效果卡顿。 这里真的要说一句，编程，不是说你写的代码越多越好，好的代码，一眼望过去，不是杂乱无章，而是赏心悦目！ 如果你是想从事前端工程师，最好是有一个老师带着你学，督促你。 别说什么自学成才啦！这种时代，一万个人，可能就一个吧，你确定你就是那一个吗？ 有很多学生来向我咨询前端怎么学，怎么样才能拿到一个好的offer， 其中就有一个学生(这里简称：小A)，网盘里面屯了好几套前端教程，加起来快1T了，电子书也是收集了几十本。 我问小A：这么多，你看完过一套吗？ 小A说：没有，一开始给自己定了目标，每天至少看一两集，写代码，做一下笔记。一个星期后就坚持不下去了，越往下学，越觉得难，就不想花时间在上面了，感觉自己也学不会。 这里，并不是小A不想学，没有认真过，无论是学习编程，还是学习其他的，每个人都会遇到困难，遇到困难总有人会想直接放弃了的。毕竟