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 是一种支架应用，能够根据你所定义的框架和库自动 为各种应用生成样板代码