必博（中国）Bibo·官方网站 - 做高端体育品牌

　　为了更好的让你理解，我们简单地做一个类比：动画制作者在创造人物的时候，需要从构图、着色和动画效果上入手，让人物有骨、有血，灵性生动。

　　而如果将一个网站应用比作一个人，那么作为造物主的前端工程师，同样要塑造她的骨架、血肉和灵魂。

　　用比较专业的术语来描述，网页的骨架其实就是它的布局，血肉即为它的样式，而灵魂则是应用在交互过程中的动作和响应。对应着这三个方面，前端工程师也使用了不同的工具。

　　JavaScript则赋予网站灵魂，让网站“动起来”能够进行交互和响应。

　　我们对HTML、CSS、JavaScript这三个工具的作用进行详细解析：

　　画龙画虎先画骨，一个人第一眼看上去是否漂亮，在于她的身材和比例。类比到网站，也就是网站建设者需要考虑的“结构”。在前端领域里，我们也会将网页结构称为“布局”。

　　设计师虽然给出了网页的设计图，但页面上图片、文字等页面元素的排列关系，需要用编程语言来控制。前端工程师一般会使用“标准结构化语言 HTML”进行页面构建。一个最基础的 HTML 文件是这样的：

　　我们可以看到，这个文件中包含head (头部)、body (身体)部分，特别像对一个人物的描述。

　　为了让你有更清晰的认识，我们看一个具体的例子，这看上去是一个人物肖像画，但它其实是一张网页。

　　下图是上述网页的 HTML 结构， 我们可以很直接地看到，在 body 内，有着标记人物各个部分的标签。页面的结构，也就是通过它们（标签）的排布关系决定的。

　　当然，除了你看到的 “div”，HTML 还有各式各样的标签。例如，在网站中，你所常见的输入框，其实就是 input 标签，你所看到的图片，其实就是img 标签。

　　而网站页面的整体结构，就是靠着一个一个的 HTML 小标签，构建起来的！

　　搭建完“骨架”，我们还需要让我们创造的人“有血有肉”！小家碧玉还是大家闺秀，都需要造物主去打扮，在网页应用中，我们把页面呈现的视觉效果称为网站的“样式”。

　　我们需要给网站“填充”样式！这时候前端一般会用表现标准语言 CSS对页面进行样式修饰。描绘 “头发是什么颜色的”，“脸有多宽”等特征。

　　在 CSS 部分，我们可以看到 color (颜色)、width (宽度)、height (高度) 和 backgorund (背景) 等信息，它们其实就是给骨架的相应部分进行描述。各种描述信息堆叠起来，页面也就生动了起来。

　　CSS 能够对网页中元素位置的排版进行精确控制，并且能够支持几乎所有的字体、字号以及色彩。网页应用的样式，就是靠一条一条的 CSS 描述性语句，呈现出来的。通过 CSS 和 HTML，我们就把网站的“形”搭建起来了！

　　光有“形”还不够，我们需要给创造的人注入灵魂，一颦一笑，一喜一嗔，举手投足都是对外界的“反馈”；我们通常称之为“行为”。在前端中，行为大概分为两种：服务器参与的响应和前端自身的响应。

　　一般情况下，我们的页面资源（文字，图片等）是来自一个或多个后端服务器。服务器，顾名思义，就是为用户服务的，我们想要浏览的音视频、文字等内容都存储在服务器中。通常刷新页面、点击链接、提交表单时，浏览器会向服务器发送请求，进而通过网络获得服务器返回的资源。前端工程师可以根据返回的资源，给我们呈现新的内容，并做出相应的反馈。

　　就像上图中所展示的，当我们点击不同的学习路线时，网页的内容也做出了相应的变化，这其实就是典型的“服务器参与的响应”。

　　除服务器响应之外，当用户停留在网站当前页面，还没有发出网络请求时，前端同样也可以控制页面内容。

　　有兴趣可以试一试 chrome 的小游戏，在并没有连接互联网的情况下，我们可以通过“空格”控制小恐龙的跳跃，并获得一定的分数。

　　在一些场景下，我们并不需要频繁的向服务器获取新的资源。从鼠标必博官方网站点击、键盘输入、滚动页面的动画效果，到诸如计算器、跳格子等应用，前端可以完全通过 JavaScript 采集用户动作，控制页面的行为和样式，并做出反应，这就是“前端自身的反馈”！

　　在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果讲师一对一辅导，在线答疑解惑，指导就业！

　　前端开发常用的编辑器有哪些？工欲善其事必先利其器，每个前端工程师在做前端开发的时候，一定有几款自己用着顺手的编辑器。而一款好用且适合自己的前端开发编辑器，往往会达到事倍功半的效果。以下是小编为大家推荐的几款编辑器，它们分别是HBuilder、WebStorm、Sublime Text、Visual Studio Code和wampServer。

　　入门需要学习Dart语言、Flutter控件体系、动画体系、触摸和交互机制、网络编程、数据存储、状态管理等内容。Flutter是Google力推的跨平台框架，可快速在iOS、Android构建高质量的原生用户界面，且完全免费与开源；

　　0基础前端开发需要学什么？零基础学员入门前端需要了解前端行业的发展趋势、学习前端的方法、前端学习路线详解以及前端案例展示等内容；有老师指导的情况下，可以结合学员自身情况制定前端学习路线，明确学习前端的路径、未来发展趋势。提前为学员打好基础，避免小白学员走弯路。

　　在互联网中许多开发工具可以让前端开发人员的工作生活变得更加轻松。应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加，急需好的开发工具。今天和大家分享一些前端开发常用工具，这些工具真的对于提高工作效率有很大的帮助。

　　在实际开发过程中，前端开发人员精通JS能熟练应用JQuery，懂CSS能熟练运用这些知识，进行交互效果的开发；后端开发人员会写Java代码SQL语句，能做简单的数据库设计会Spring和iBatis懂一些设计模式等。