本日要先容的是产品经理的小伙伴之一：前端开拓工程师，虽然每天和他们打交道，但是想必大家都没有好好的“关心”过他们，本日我们一起来看看每天打仗的前端工程师到底在忙些什么。
现在移动互联网发展的这么快，前端开拓领域也越来越广，前端早已经告别了切图崽的时期，在web端、移动端（安卓、IOS）、Watch、小程序、"大众年夜众号开拓、稠浊app开拓都能看到前端开拓工程师的影子。
从狭义上讲，前端工程师利用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。
从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
大略的说，前端开拓工程师日常事情是创建Web页面或移动页面等前端界面呈现给用户的过程，通过前端三大件HTML、CSS、JavaScript以及衍生出来的各种技能、框架、办理方案，来实现互联网产品的用户界面交互 。
用户看到的每一个网页紧张由三部分组成：构造（ Structure） 、 表现（ Presentation） 和行为（ Behavior）。
HTML —— 构造， 决定网页的构造和内容（“是什么”）；CSS —— 表现（ 样式） ， 设定网页的表现样式（“什么样子”）；JavaScript —— 行为， 掌握网页的行为（“做什么”）；HTML、CSS、JavaScript是前端开拓中最基本也是最必须的三个技能；前端开拓中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。接下来我们好好聊聊这三大件，心腹知彼。
一、HTML是什么？
可以把HTML构造想象成一个没穿衣服的人。
HTML指超文本标记措辞（HyperText Markup Language），“超文本”便是指页面内可以包含图片、链接，乃至音乐、程序等非笔墨元素；前端开拓利用HTML标签（Tag）来标记（Markup）网页中的笔墨。
（html代码示例）
上述代码是一个最根本HTML构造，一个网页的构造每每包括“头”和“主体”，头部的内容利用header标签标记，紧张存放一些网页信息，例如网页标题、内容择要、关键词等，头部内容也是SEO优化的主要工具。
主体部分用标签body标签标记，网页的内容全部放在body标签下，其内部又包含了很多代表不同含义的标签（如下表所示，只展示部分常用的）。
这些形形色色的标签就构成了页面的内容，要把稳的是全体网页的内容都要放在一个顶层标签html标签下。
（常用标签）
例如：我们点击某个链接，然后自动跳转一个新的页面，这过程都是a标签在起浸染；还有看到的图片，便是img标签承载图片的数据源。
末了，见告大家两个查看HTML源码的方法，好奇的伙伴可以去试试。
打开浏览器，鼠标在页面上右击，然后点击“查看页面源码”；打开浏览器，按 “F12” 键；二、CSS是什么？可以把CSS想象成给一个没穿衣服的人(HTML构造)扮装、穿衣服等，浸染是让它变得美美的 。
CSS 指层叠样式表（Cascading Style Sheets），是一种将网页内容与网页样式分离的技能。
我们常常会对一个网站评价道：这网站页面怎么这么乱、这网站看起来真大气——这背后都是受CSS影响。
CSS可以做什么？
1）CSS紧张用来设计网页的样式，美化网页；它不仅可以静态地润色网页，还可以合营各种脚本措辞动态地对网页各元素进行格式化；比如一开始笔墨显示是赤色，我点击某个按钮后笔墨变玄色了。
2）你可以轻松地掌握页面的布局，CSS 能够对网页中元素位置的排版进行像素级精确掌握，因此我们能看到各式各样的布局风格。
3）在页面制作时采取CSS技能，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的掌握；例如通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等。
4）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了；你可以将站点上所有的网页风格都利用一个CSS文件进行掌握，只要修正这个CSS文件中相应的行，那么全体站点的所有页面都会随之发生变动。
5）CSS在险些所有的浏览器上都可以利用。
CSS代码示例
三、JS是什么？
JS能够让HTML构造这个人“舞蹈”、“跑步”等动作，紧张目的是让“人”动起来。
JS（JavaScript）是一种属于网络的高等脚本措辞，已经被广泛用于Web运用开拓，常用来为网页添加各式各样的动态功能，为用户供应更流畅都雅的浏览效果；常日JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
js可以做什么：
使网页具有交互性，例如，banner轮播效果、手动Tab切换等效果；可以处理表单，考验用户的输入，并供应及时反馈节省用户韶光。例如，表单中要你输入电子邮箱而你却输入一个手机号，那么该当给你一个缺点提醒。还可以根据用户的操作，动态的创建页面。例如，发邮件时，添加附件操作。设置cookie，cookie是存储在浏览器上的一些临时信息，例如你浏览过的网站地址，利用过的用户名。跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。……JS代码示例
前端三大件到此先容完毕，不过现在有些其他措辞的程序猿在谈论HTML、CSS、JS倒是算不算编程措辞。
四、全栈工程师
前端开拓工程师在精进一步可以发展为全栈工程师，向T型人才或者π型人才发展。
全栈工程师熟习多种开拓措辞，同时具备前端和后台开拓能力，既能做前端（须要熟习前端三大件以及Vue等各种前端技能），又能做后端（须要熟习Node.js或Java或ASP.net或php或Go等），可以独自完成一个产品的前、后台开拓事情。
大略理解下全栈工程师的技能栈有哪些：
前端技能：HTML/HTML5、CSS/CSS3、LESS/Javascript、jQuery、RequireJS、AngularJS、Vue等；后端技能：node.js或Java、php等；中间件：Nginx或Dubbo；数据库：MySQL或MongoDB；代码管理：git、svn；构建工具：webpack、gulp、Jenkins；……我们可以看到，对付全栈工程师来说，要活到老，学到老，个中最主要的属性，便是不同的思维办法和强大的学习能力。
末了，请重新认识一下你身边那个平平无奇的前端小伙伴吧！
也可以把本篇文章分享给他看看，到底有几分像，哈哈。
作者：道三，电商PM；公众号: 产品大秘籍
本文由 @道三 原创发布于大家都是产品经理，未经作者容许，禁止转载。
题图来自Unsplash，基于CC0协议。
