今天要介绍的是产品经理的小伙伴之一：前端开发工程师，虽然天天和他们打交道，但是想必大家都没有好好的“关心”过他们，今天我们一起来看看天天接触的前端工程师到底在忙些什么。

现在移动互联网发展的这么快，前端开发领域也越来越广，前端早已经告别了切图崽的时代，在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指超文本标记语言（HyperText Markup Language），“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。前端开发利用HTML标签（Tag）来标记（Markup）网页中的文字。

(html代码示例)

上述代码是一个最基础HTML结构，一个网页的结构往往包括“头”和“主体”，头部的内容使用header标签标记，主要存放一些网页信息，例如网页标题、内容摘要、关键词等，头部内容也是SEO优化的重要对象。

主体部分用标签body标签标记，网页的内容全部放在body标签下，其内部又包含了很多代表不同含义的标签（如下表所示，只展示部分常用的）。

这些形形**的标签就构成了页面的内容，要注意的是整个网页的内容都要放在一个顶层标签html标签下。

标签

描述

定义锚。

定义粗体字。

定义文档的主体。

定义文档中的节。

定义定义列表。

to

定义 HTML 标题，可以改变标题的大小。

定义关于文档的信息。

定义 HTML 文档。

定义图像。

ta>

定义关于 HTML 文档的元信息。

定义段落。

定义文档中的节。

定义强调文本。

定义表格。