初级前端工程师技能清单

HTML

编写网站需要用到以下三种语言:HTML、CSS 和 JavaScript,而 HTML 是首先需要学习的语言。 HTML 本身并不是编程语言,它用来描述元素应该如何在网站上布局,并向浏览器提供网站所需的其他所有文件列表(例如 CSS 和 JavaScript)。 你可以将 HTML 看做盖房的图纸。它可以告诉你房间有多大,里面应该有什么东西, 但 是它不会告诉你外观如何。
  • 块级元素:块级元素占据了父元素的整个空间
  • 语义元素:语义元素明确地对浏览器和开发者描述其含义;元素包括文章 和部分,而不是到处使用 div
  • 内嵌元素:内嵌元素仅占据由内嵌元素定义标记界定的空间
  • 表格:表格表示文档部分,其中包含向网络服务器提交信息的交互式控件
  • 输入类型:输入元素用于为网络表格创建交互式控件,以便接受用户输入的数据

CSS

如果说 HTML 描述的是房子的布局,那么 CSS 描述的就是房子的外观。层叠样 式表(简称 CSS)负责控制网站的外观。颜色、字体,甚至一些动画都由 CSS 控制。和 HTML 一样,CSS 不是编程语言。它是一种文本文档,就像室内设计 师的说明,使网站看起来很美观。
  • 显示值类型:显示属性使你能够控制图表或容器元素的渲染效果
  • 盒模型:盒模型负责定义矩形框(表示文档中的元素)的尺寸
  • 基本定位:定位属性会为定位元素选择替代规则
  • 静态定位:静态定位使元素能够使用常规行为
  • 绝对定位:不会为元素留空间,而是位于相对于祖先或容器块 的特定位置
  • 固定:不会为元素留空间,而是位于相对于屏幕视口的特定位置
  • 动画和过渡:动画和过渡使我们能够对元素设定动画效果或在元素的两个 状态之间定义过渡
  • 背景:背景使我们能够定义用作容器背景的颜色或图片
  • 伪选择器器:伪选择器使我们能够选择出现在 HTML 中定义的元素周围的假
  • 字体样式和网络字体:字体样式使我们能够更改文本的外观;网络字体使 我们能够加载只有部分客户端能使用的网络字体文件
  • 弹性盒:一种布局模式, 可以组织网页上的元素, 使元素行为 能够符合预期, 这样网页布局就能够满足不同的屏幕大小和设备 显示器的要求 悬浮型:指定元素应该遵守常规版型,并放置在容器的左侧或右侧

JavaScript

在三大网络语言中, JavaScript 是唯一的编程语言。JavaScript 负责控制网 站的交互操作。就像一位勤杂工人,可以拆掉墙壁、建造新的房间和重新装 饰房屋。对于简单的静态网站,你不需要使用太多的 JavaScript。但是对于 动态网络应用来说,你将需要深入学习该语言。
  • 数据类型:该语言支持的不同变量类型(例如字符串和整型)
  • 语法:定义如何组织语言的一般规则
  • 函数:用来执行特定任务的代码块 字面值可以简化代码
  • 对象字面值:JavaScript 中的所有内容都是对象,但是自己编写对象
  • 面向对象的编程:在 JavaScript 中,你可以采用多种方式来实现面向对象 的编程,包括 函数方式、原型方式和伪类方式
  • 设计模式:设计模式是可以重复利用的常见问题解决方案
  • AJAX: AJAX 使我们能够异步地从网络服务器上请求数据,不需要重新加载网页

响应式网页设计

打开网站并缩小浏览器窗口大小。网页内容是否更改了布局,以适应新的屏 幕?这就是响应式设计在起作用。人们希望现代网站能够在手机、平板电脑 和笔记本上都具有美观的界面。通过学习响应式设计原则,你将了解如何使 网站能够缩放,并进行自我调整,从而在所有设备上都能提供超棒的体验。
  • @媒体查询:媒体查询使内容能够根据具体的输出设备的范围调整呈现方 式,不用更改内容本身
  • 相对单位:CSS 还提供了除像素 (px) 之外的很多其他衡量单位,例 如 em、rem、vw、vh 和 vmin

CSS 框架

Bootstrap 是一个典型的 CSS 框架示例。框架使我们能够轻松地设计网站结构 和构 建网站。它们会提供自定义 CSS 类,简化了内容布局操作,确保无论是 何种设备,你的内容都能看起来很美观。框架可以帮助你遵循行业最佳做法和 现代设计原则。
  • Bootstrap:Bootstrap 是一种 CSS 框架,一开始由 Twitter 开发而成, 使 创建响应式设计变得更加轻松
  • Foundation:Foundation 是另一种 CSS 框架,开发者为 Zurb,同样使 创建响应式设计变得更加轻松

JavaScript 库和框架

JavaScript 库和框架会强制要求各种最佳做法,并且通常会强制要求我们在处 理各种文件时遵守组织性格式,使我们能够轻松地编写网络应用。JavaScript 库和框架还会处理你可能会遇到的大部分跨浏览器兼容问题,包括各种性能优 化。JavaScript 库和框架示例包括 AngularJS、EmberJS 和 KnockoutJS。
  • AngularJS:支持双向数据绑定,使你能够扩展 HTML 词汇以创建前端 网络应用
  • EmberJS:通过使用严格的文件和对象命名规范,不用再使用样板代码
  • KnockoutJS:通过声明性绑定系统,使我们能更轻松地创建由数据驱动 的应用

构建和自动化工具

构建应用远远不止编写代码这么简单!你需要运行测试套件、优化图片、遵守你 所在单位的代码格式指南,甚至准备将代码部署到成品服务器上。还需要完成大 量的重复性甚至枯燥的工作。Grunt 和 Gulp 等构建和自动化工具可以在后台帮 你处理所有这些任务,使你能够专注于构建强大的网络应用。
  • npm:npm 是 Node.js 的默认程序包管理器,后者是大多数构建和自动化 工具编写代码时用到的框架
  • Grunt:Grunt 是基于任务的命令行构建工具,可以与硬盘上的文件交互
  • Gulp:Gulp 是基于程序的命令行构建工具,负责阅读硬盘上的文件,然 后以流的形式与这些文件交互
  • Bower:Bower 是 HTML、CSS 和 JavaScript 库的程序包管理器,使你 能够定义和检索依赖项并确定其版本
  • Yeoman:Yeoman 是一种支架应用,能够根据你所定义的框架和库自动 为各种应用生成样板代码