这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向
有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。
当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。
一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链abc.com/a.css，它就会去请求这个资源。
HTML 页面往往还需要加载外部的 JS 资源，比如abc.com/a.js，此时浏览器同样会向服务器请求这个资源。
当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。
我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”；右侧的事情发生在服务器端，称为 “后端”。（“前端” 之所以叫 “前端”，是因为它离用户更近一些。）
大家都学过后端开发的相关课程，对后端这一块应该都比较熟悉了。那问题来了：在上面这个过程中，后端有哪些局限？
这意味着，只有当用户下一次向服务器请求资源时，服务器才有机会再次决定用户看到的内容。那么，用户什么时候再向后端请求资源呢？
第一种情况是 “导航动作”。比如用户刷新页面、点击链接、点击浏览器的前进/后退等等。
第二种情况是用户提交表单。表单是最传统的页面交互方式之一，提交表单时浏览器会向服务器发出新请求——这意味着浏览器会跳转到一个新的地址，服务器会在新页面中显示表单的处理结果。
还有一种特殊情况，就是服务器在给浏览器返回 HTML 资源时，在页面中插入一个特殊的标记，浏览器看到这个标记就会在一定的时间后自动刷新当前页面或跳转到其它页面，相当于服务器强制用户再次发出请求。可想而知，这种非用户意愿驱动的页面跳转行为并不讨人喜欢，因此已经不常用了。
在传统网页中，上述几种用户与服务器之间的交互方式也算够用了。不过随着网页形态的不断演进，用户对网页体验提出了更高的要求，很多时候网页不仅仅是一篇静止的文档，而更像是一个应用程序，用户随时可能与之互动。这个时候，前端的价值就体现出来了。
在前端与用户的交互过程中，有些事情光靠前端就可以做出响应。比如我们在网页上做了一个计算器的功能，当用户输入算式之后，JS 就可以直接计算出结果并显示给用户。整个过程不需要服务器的参与就可以完成。
但有些事情，光有前端是无法完成的。此时前端就需要交给后端来处理，拿到处理结果之后再交给用户。在这个过程中，前端可以让用户一直停留在当前页面，交互过程具有良好的连续性。
那么，前端如何把任务交给后端并拿到后端处理的结果呢？主要有两种方式：Ajax 和 Socket 连接。
Ajax 是最常见的前后端交互方式。它以 “请求→响应” 的方式来完成前后端的信息传递。传统的表单交互需求几乎都可以由 Ajax 改造为 “原地提交并获取反馈” 的交互方式，不需要跳转页面，从而有效提升用户体验。
而对于实时性比较高的场景，Socket 连接就是一个更好的选择。它的工作方式是前后端建立一个持续的连接，信息可以随时由前端发向后端，或由后端推送到前端。如果我们要建立一个实时对话的应用，通常就会用到 Socket 连接了。
接下来，我们就会说到 “前端的分层架构”。这个架构的原则就是 “让合适的技术去做合适的事情”。一个网页从逻辑上可以视为这三层的有机结合体：
：这一层的作用是表述一个页面中有哪些信息，以及这些信息之间的关系是什么。这一层在技术上是由 HTML 来实现的。
：这一层决定了页面中的信息会以什么样的外观呈现出来。这一层由 CSS 来实现。
：这一层控制了页面如何与用户进行交互。在传统的展示型网页中，可能只需要 “结构层” 和 “表现层” 就足以提供完整的功能；而现代网页承载了越来越多的交互，这就推动 “行为层” 的能力不断增强。这一层由 JS 来实现。
比如我是一个百姓网的用户，我打开了 “用户中心” 中的 “我发布的信息” 这个页面。
这个页面的 HTML 描述了信息以及信息的结构。即使没有 CSS 和 JS 的辅助，这个页面仍然可以呈现出可理解的内容（参见上图）。页面顶部是一些导航元素，接下来的 “显示中的信息” 是一个标题，它又引出了一个列表。这个列表自然就是我在百姓网发布的所有信息了。（除了 “显示中的信息” 以外，页面后半段还有 “已删除的信息”，这里不再赘述。）
接下来，我们会在表现层下功夫，通过 CSS 来为页面中的各个元素设定外观。经过这一层的修饰之后，页面中的内容更加美观了；更重要的是，各元素的功能职责也更加直观易懂了（参见上图）。
这已经是一个挺不错的网页了，但接下来，我们还会通过 JS 来丰富它的功能，提升用户的使用效率。
作为信息的发布者，我可能需要修改某条信息的内容，或对它进行 “刷新” 之类的操作。在传统的交互中，我需要在这个列表中点击需要操作的信息，然后在信息的详情页选择合适的操作。
我们可以把这个流程简化一下：我们在这个列表中为每条信息添加一个操作按钮，当用户点击某条信息的操作按钮时，我们就在页面中弹出一个操作面板，用户可以直接选择想要的操作，减少了中间环节（参见上图）。
由此可见，结构层、表现层、行为层这三者各有所长，共同构造了一个功能完备、体验良好的网页出来。
除了基本的 “三大块” 之外，作为前端工程师，我们还需要掌握以下知识和技能：
：由于前端资源都是浏览器通过网络下载的，因此我们有必要了解相关的网络协议。
：前端代码运行在浏览器中，我们需要了解浏览器的各种特性，以及浏览器向我们提供的各种接口。
：让网页更快，减少用户的等待，这也是前端工程师面临的重要课题。优化网页的前端性能，需要我们具备上面两项知识，并且掌握性能优化相关的工具和方法。
：网页信息不仅包含文字，还包含图片、视频等多媒体信息。图片作为最常用媒体资源，需要我们掌握与其相关的技能。比如了解各种图片格式适用的场景、基本的图片处理方法等等。
（在讲座中设立了一个 demo 环节，我会现场演示如何从零开始创建一个简单的网页，并实践 “前端的分层架构” 这一指导思想。）
前面我们已经介绍了前端技术 “三大块”，然而在如今，当我们在编写这三块的代码时，已经不再 “裸写” 了。这意味着我们在开发阶段编写的代码与实际在浏览器环境中运行的代码已经不一样了，详细来说：
采用了 Jade 和 Jedi 这两种模板语言。在上图的代码中，我们仅仅使用了模板语言最基本的标记语法，还没有插入使用模板语言的任何逻辑能力。仅此一步，就可以看出模板语言带来的好处。
原先我们在写 HTML 代码时，会花费大量的精力在、/、这样的语法噪音上；同时，识别标签的嵌套关系也很费眼。幸运的是，Jade 和 Jedi 这样的现代模板语言把前端工程师解放了出来。它们通过缩进来表达嵌套关系，层级关系一目了然；语法更精练，表现力更强。
在 CSS 方面，预处理器一方面通过更简洁的语法减轻开发者的书写负担，另一方面通过内置的逻辑能力增强了代码的表现力。举个例子，在使用原生 CSS 来写代码时，不同元素采用的相同颜色只能分散在代码各处；而采用了 CSS 预处理器之后，我们可以把相同意义的颜色通过变量的形式抽象出来，然后在代码各处调用即可。这样不仅便于后期维护，在平时读代码时也更容易理解代码意图。
在 JS 方面，我们开始享受 ES6+ 带来的新特征福利。ES（ECMAScript）是定义 JS 这门语言的标准规范，从第六版开始，ES 以每年一版的节奏持续快速地扩展着 JS 语言的能力。
在以往，如果我们要实现 “在数组中找出符合特定条件的成员” 的需求，往往需要借助 Underscore 这样的工具库，调用它的_.find()方法。而在 ES6 中，语言本身就扩展了数组的能力，我们只需要直接调用Array#find()接口即可。另外，像箭头函数这样的新语法也可以令代码进一步简化。
在 HTML、CSS、JS 这三大块，我们放弃 “裸写”，采用 “更高级” 语言的目的在于：
当然，采用这些更高级的语言也不是完全没有成本的。我们在开发阶段所用的语言已经不是纯粹的 HTML、CSS、JS 了，浏览器无法直接识别和运行。因此，当我们放弃 “裸写”，也就意味着：
：模块化是最常见的编程实践之一，令我们的代码组织更加清晰、易维护。ES6 为 JS 增加了完善的模块化方案，我们的日常开发也已经迁移到了 ES6 模块规范之下。
：如何将开源社区中的优秀组件为我所用？这就不能不提 “npm” 这个最主流的 JS 包管理器。前端界优秀的开源项目几乎都发布到了 npm 的包仓库，我们日常开发中用到的第三方库也都是由 npm 来管理的。
打包工具可以把我们写的模块化的源码和第三方包整合到一起，形成页面所需的完整 JS 资源。“包管理器”、“模块化”、“打包工具” 的相互结合，基本上就是日常的 JS 代码组织方式。
：在传统的前端开发中，HTML、CSS、JS 这三块的代码有各自独立的文件，这些文件往往也分散在不同的目录结构中。
如果页面功能区块的划分足够清晰，开发者就可以用 “组件” 的概念来把页面拆分，整个页面会被视为多个组件的嵌套和组合；同时，开发者也倾向于把每个组件相关的 HTML、CSS、JS 代码整合到同一个目录（或同一个文件）中，便于管理和维护。
这就是 “组件化” 的开发模式。要实现这样的开发模式，通常需要前端框架和构建工具的配合。
：HTML5 的 History API 为前端提供了控制浏览器导航行为的能力，配合 Ajax 无刷新更新页面内容的特性，我们可以在一个页面内实现应用的多视图切换，避免页面的频繁跳转，提供类似桌面应用的体验。比如 Gmail 等产品就是典型的单页应用模式，百姓网的大多数后台系统也都是单页应用。
修真院内容部倾力打造，修真院技术总监沁修主讲，web工程师零基础全能课第一讲！初识前端1、前端开发是什么？2、前端开发有前途吗？3、前端开发哪里学？4、前端发展5、对初学者的建议6、学习html入门7、学习css入门1.前端开发是什么？前端开发是从网页制作演变而来。早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。随着互联网的发展，现代网页更佳美观，交互效果显著，功能更加强大。因此现在的前端开发的主要技术通常是指html、css、js技术和一些开发框架的使用。
2.前端开发有前途吗？如果在8年10年以前这么问，或许很多人会思考一下，说：不知道，应该没后端编程有前途吧或者直接说：web前端有啥啊？不就是个美工吗不就是个页面仔吗？不就写个网页、js吗？工资又低。。。。然而现在？随着html5的崛起，css3的风靡，随着nodejs 的出现，JavaScript这个最容易被人误解的语言，终于散发了它本该有的光芒。Javascript这个牛X的历史产物，现在真的可以说是万能的，至少在web层面是这样，交互、效果、数据操作、娱乐游戏、操作文件io等等。而且由于现在是web应用时代，各种尺寸的电子设备增长式的爆发，只要和屏幕有关的就是颜值，颜值代表了一切，可以说是前途一片光明；html5、网页游戏风靡全球，需要页面展现的东西都是前端范畴，前途一片光明；目前世界上最多的可视化物质是什么？是网页，网页 ，网页，据统计现在全世界有亿级别的网页，这是什么概念，前途一片光明；最最直观的：前端的工资从前几年的平均几K，到现在的10k、20k ，真的是前途一片光明！
3.前端开发哪里学？前端开发应该在哪里学怎么学？通常有3种选择：一是报班，效果好但价格贵对时间要求高，不是所有人都能拿得出那么多时间和金钱去学习的。二是自学，经济实惠但缺点是缺少指导缺少方向，如果没有出众的意志力规划力是很难学下去的；三是报名线上课程，优点是价格相对便宜，通常有一个集体可以探讨问题，有老师指导方向，效果要比自学好很多但缺点就是可能没有报班效果显著，比自学要贵一点。因此到底该怎么去选择还是要看个人具体的情况去对症下药了。还有许多人总是爱问，我现在多少岁什么学历什么专业什么性别我适合学XXX吗？这种问题其实没太大意义，最重要的是知道一句话：种一棵树最好的时间是在十年前，其次是现在。只要立即去学，比什么都强。
4.前端发展前端的发展是经历了一些阶段性的发展的：在最开始那些年是一个前后端不分的蛮荒时代，那个时候前后端没有分离，程序员是又当爹又当妈，要做前端又要做后端。代码各种耦合在一起，服务器压力巨大，因为服务器会受到各种http的请求例如静态的css，js，图片等，一旦服务器出现问题，前后台一起玩儿完，用户体验特别差。而且开发上也是，UI出好设计图之后，必须先切html页面，再来套jsp等数据化的内容。开发时间变长，出错率也非常高如果html发生变更，就更惨了，可以说是开发效率奇低。后来随着开发和应用的需求变化，逐渐进入到了前后端分离的文明时代。在文明时代的第一阶段，js通常使用原生js，但这样做的缺点也很明显：首先是js语言设计比较草率，一些原生的api并不好用，因此需要更多代码来解决浏览器的兼容问题，需要大量的时间精力，对开发人员要求也比较高。因此在第二阶段，为了解决原生js晦涩难懂还不好用的问题，出现了jquery等框架解救了万千开发人员。和js相比，这些库的语法更简单，可以很容易地浏览文档，选择元素，处理事件等，也降低了开发人员的门槛。到了第三阶段，因为随着互联网的发展，项目越来越大，前后端分离后的开发工作量越来越多的转移到前端上来。一个简单的jquery库或者是underscore库等等已经难以管理控制整个项目了，代码变得越来越复杂难以修改。这个时候就迫切的需要将代码更合理的划分以便于开发和管理，因此诞生了MVC这种取自于后端的概念沿用到前端来。M是模型model用于数据保存V是视图view用于用户界面绘制C是控制器controller用于业务逻辑这就将代码分层，成为了我们基本的MVC框架。当然还有一些框架提出了MVVM模式，其实就是用View Model代替了Controller，成为了简化的Controller这样做唯一的作用就是为view提供处理好的数据，不含其它任何逻辑，实现视图与数据模型的强耦合，数据的变化会实时反映在view上，不再需要手动处理。
5.对初学者的建议第一，梳理信心，坚定目标。只要相信自己可以就一定可以。第二，多练习多写，好的代码是写出来不是看出来的。第三，不要停止学习，互联网的发展特别快，可能快过其他任何领域，因此不要有一次学习就可以工作终身的想法。第四，开放的心态，去拥抱变化，不断尝新，并且停止争论语言和工具，把精力投放在更合适的领域。
6.学习html入门学习html首先认识一下运行于浏览器上几门语言：html，css和javascript。html是一门标记性语言，负责描述网页的骨架，简单来说就是把网页分割成一个个的矩形，然后把这些矩形嵌套起来，形成层级关系。CSS是一门装饰性的语言，负责描述这里面矩形的大小位置背景等外观。javascript则是一门脚本语言。负责定义网页的行为，定义了哪个矩形在什么时候做什么事情。值得开心的是js是一门非常容易入门的弱类型语言，但值得引起警惕的是，js也属于一门复杂的语言它的复杂度即使是放在非脚本语言中来衡量，也是不容小觑的。因此学习它的过程中千万不能掉以轻心。首先来看一下html元素的语法：pthis is content/p元素通常是由开始标签加闭合标签加上内容组成，标签由英文尖括号括起来比如htmlp这些就是标签，结束标签要比开始标签多一个斜杠。另外元素可以防止于其他元素之中，无限极的嵌套。接下来看一个最简单的网页代码：!DOCTYPE htmlhtml lang=“en”headmeta charset=UTF-8titleDocument/title/headbodyh1this is a head title/h1h6this is a head title too/h6pthis is a param/pullithis is a list/lilithis is a list.../li/ul/body/html首先是doctype文档类型。在html刚刚出现的时期，文档类型是用来连接一些应该遵守的规则，有点像是自动校正等。然而现在大家都不用管文件类型，只是因为历史原因还必须包含在代码中。html，这个元素包含了整个页面的内容，有时也被称为根元素。head，这个元素可以包含想添加的任意内容，但是不会被用户所看到。通常包括想让搜索引擎搜索到的关键字、页面描述、css样式表和字符编码声明等等。body，这个元素包含了想被用户看到的内容，不管是文本，图片还是多媒体等等。meta charset=“UTF-8”，这个元素指定了字符编码，可以避免出现乱码等问题。title，这个元素设置了页面的标题，显示在浏览器标签页上。h1-h6，标题元素，指定文章的标题和子标题，它包括6个级别从1到6.p，这个元素用来指定段落内容的。ul/ol，列表元素其中ul是无序列表，其中的顺序并不重要比如购物清单，这种就放在ul中；ol是有序列表，每一项li都会默认自带数字。元素还分为块级元素和内联元素。块级元素在页面中以块的形式展现，一个块级元素会新开始一行并且尽可能撑满容器。比如div p h1-h6 header footer section等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。内联元素也叫行内元素，通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素a或span包裹一些文字，或者强调元素em和 strong。
7.学习css入门在css中，选择器是一种模式，用于选择需要添加样式的元素。最常见的选择有：选择器说明例子*选择所有元素*id选择id为intro的元素#introclass选择class名为navs的元素.navselement选择所有p元素p结构选择所有的div和p元素选择div内部的所有p元素选择父元素为div元素的所有p元素选择紧邻在div元素之后的所有p元素div, pdiv pdiv pdiv + p学习css首先要学习的概念是盒子模型
盒子模型有5种主要属性：宽和高让盒子有基本的形状大小；border是盒子的边框，可以设置厚度和基本形态以及颜色；padding是沿着border在内部产生的一个边距，让盒子内部的内容和边框产生距离；margin则是沿着border在外部产生的一个边距，让盒子之间产生距离。其次是知道浮动的概念，浮动在文档布局中是一个非常重要的概念。通常块级元素在页面中独占一行，自上而下成为流。元素浮动之后，会被移出正常的文档里，根据设置向左或者向右平移，直到碰到了所处容器的边框，或者是另外一个浮动的元素。当一个元素浮动之后，不会影响到块级元素的布局只会影响到内联元素比如文本的排列。浮动有3个属性值，left，right以及none，分别表示向左向右浮动和不浮动。元素浮动之后通常会产生一个高度塌陷的问题，因为浮动的元素已经脱离文档流，无法撑开父级元素的高度，因此出现高度塌陷。也就是说浮动元素的父级元素不会自动伸缩来闭合浮动元素。为了解决这个问题就需要清除浮动：.container::after {content: “;display: block;clear: both;}这样来让元素盒子的边不能和前面的浮动元素相邻。或者是用overflow的方式：.content {overflow: hidden;height: auto;}这样做的原理是触发BFC。BFC的意思是block format content，块级格式化上下文，也就是产生一块独立的不受外界影响的盒子区域。其触发如下：该元素为根元素，即HTML元素该元素float的值不为none该元素overflow的值不为visible该元素display的值为inline-block、table-cell、table-caption该元素position的值为absolute或fixed运用举例：
以上就是【前端初识】课程的内容解析啦想进一步深入的同学欢迎加入我们的IT交流群557222766共同讨论学习~
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。这里是技能树.IT修真院，初学者转行到互联网行业的聚集地。
我认识一个男生，学的应用物理专业，两年前他毕业的时候，本来在家人的劝说下想考公务员了，但是经常家里来人都躲在自己房间里，平时说句话也“字字斟酌”，也不太适合做公务员。
一次他找到我，问我“前端是什么”他能不能做。其实不是程序员就是性格内向的人做，是这个岗位不论资排辈，不管你什么经历，什么出身，只要技术够牛，你就是牛！后面发展也不受限制，性格开朗的人可以做管理，内向不爱说话可以做资深技术。
这里补充一句，做任何行业都需要与人沟通，只不过程序员对这方面的要求没那么高。
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。说直白点就是我们上网看到的界面，都是前端工程师来完成的。
学习前端，三大核心必须知道，并且决不能马虎，一定要把基本的内容学精，学扎实，这样万变不离其宗，不论后面技术怎么革新，底层的原理不变，接受起来，也容易很多。
是超文本标记语言，是用于描述网页文档的一种标记语言。我们上网所看到网页，多数都是由html写成的。浏览器通过解码html，就可以把网页内容显示出来，它也构成了互联网兴起的基础。
是级联样式表，又叫风格样式表，它是用来进行网页风格设计的。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
至于框架现在流行的框架是vue和react。想进大厂的伙伴react是必须要学的，现在很多大厂都用react。其实框架就是用来提高工作效率的，随着互联网的发展，各式各样的框架相继而出，大家根据公司需求选择就是了。
我是学姐，一个正在创业的前端工程师，如果你同样迷茫不知道前端该如何学习，可以加入我的自学团，会有知识分享，匹配学习伙伴，还可以参加我组织的上线项目及活动。
端：代表输出终端，例如pc浏览器，手机浏览器，甚至有些app，有些应用程序
合起来的意思也就是这些浏览器，app，应用程序的界面展现以及用户交互就是前端
前端工程师主要利用HMTL与CSS建构页面，用JavaScript完善交互以及用户体验
