Web前端开发实战

第1章 前端开发简介

1.1 前端开发的前世今生

1.1.1 什么是前端开发

1.1.2 前端开发的发展历程

1.2 前端开发工具介绍

1.2.1 Visual Studio Code

1.2.2 WebStorm

1.2.3 HBuilder X

1.2.4 Sublime Text

1.2.5 前端开发工具的安装

1.3 前端开发技术介绍

1.3.1 HTML

1.3.2 CSS

1.3.3 JavaScript

1.3.4 前端框架简介

1.4 本章练习

第2章 网页排版实战

2.1 HTML文档的基本结构

2.2 HTML标签语法

2.2.1 标签类型

2.2.2 标签属性

2.3 HTML常用标签

2.3.1 标题标签

2.3.2 段落标签

2.3.3 文本格式化标签

2.3.4 列表标签

2.3.5 图片标签

2.3.6 超链接标签

2.3.7 注释标签

2.3.8 换行标签

2.3.9 水平线标签

2.3.10 (div)和(span)标签

2.4 标签实战

2.4.1 项目分析

2.4.2 项目开发

2.5 本章练习

第3章 表格案例实战

3.1 表格元素

3.1.1 简单的表格

3.1.2 表格标题

3.1.3 表格三元素

3.2 表格属性

3.2.1 表格边框

3.2.2 表格间距

3.2.3 表格跨列

3.2.4 表格跨行

3.3 表格实战

3.4 本章练习

第4章 表单案例实战

4.1 表单标签

4.1.1 表单标签简介

4.1.2 表单标签的常用属性

4.2 input标签

4.2.1 input标签的使用

4.2.2 input标签的常用属性

4.3 选择框

4.3.1 单选框

4.3.2 复选框

……

第5章 CSS布局之个人简历制作

第6章 个性化的CSS样式

第7章 定位布局

第8章 弹性盒子布局方案

第9章 网格布局

第10章 响应式布局

第11章 移动端布局

第12章 长页面布局实战

第13章 响应式布局综合实战

参考文献

1.1前端开发的前世今生

早期的Web界面都是在PC端的浏览器上进行渲染的，它的作用也仅仅是填写并提交表单：界面都以静态为主，代码组织非常简单。2012年之后，HTML5技术有了更进一步的发展，标签语义更加明确，还有丰富的媒体支持，本地数据的存储技术和画布（canvas)元素被广泛应用。近年来，单页面应用程序、响应式开发、动态加载、组件化等在前端开发领域逐渐盛行，迎来了前端开发的蓬勃发展。

1.1.1什么是前端开发

前端，是网站的前台部分；是指运行在PC端、移动端等浏览器上展现给用户浏览的网页。

前端开发指制作Web或者App等前端界面的过程，是通过HTML、CSS及JavaScript以及通过它们封装的各种类库、框架、解决方案，实现互联网产品的用户界面交互效果。

前端开发从早期的网页开发与制作分化而来。在互联网的演化进程中，网页制作是Web1.0是一种将数据和设计图转换为图形界面的实践过程。时代工作的主要特色，早期网站主要是静态网页，以图片和文字展示为主，用户使用网站也以浏览信息为主。随着移动互联网技术的发展和HTML5、CSS3的应用，现在的网页更加美观，交互效果显著，功能更加强大，用户体验也更好。

1.1.2前端开发的发展历程

1.原始阶段

前端开发最原始的阶段是直接使用HTML、CSS和JavaScript制作页面，此时的网页多是以纯HTML为主要开发方式，都是纯静态的网页，网页只能浏览，缺乏互动效果，信息流只是通过服务器到客户端的单向流通，属于Web1.0时代。从Web诞生以来到2005年，一直处于此种状态，后端主导项目，前端只是负责制作HTML页面。

2.第一次前端革命

在原始阶段，前端页面想要获取后台数据，需要整体刷新页面，这样会出现一个闪现的空白页面，用户体验十分不友好。2005年，AJAX技术的诞生，不需要刷新页面，就可以使前后端数据进行网络交互，极大地改善了用户体验。同时也使用户局部刷新网页内容和动态获取数据成为可能，客户端和服务器端数据交互非常方便，由此进入Web 2.0时代。

因此可以说成熟的AJAX技术，促进了第一次前端革命的到来。

第一次前端革命以jQuery为代表。jQuery 等前端类库做了底层的浏览器兼容，并且提供了方便的API，提高了代码的可维护性，更是极大地提高了开发效率。

3.第二次前端革命

2009年，Ryan Dahl将谷歌浏览器的JavaScript引擎（V8引擎）从浏览器中取出，并在之上添加了更多功能，使JavaScript拥有了独立于浏览器的运行环境，这就是Node.is。此时，那些后端能实现的功能，前端开发者通过Node.js也可以完美实现。与此同时，AngularJS诞生，AngularJS有诸多特性，最为核心的是MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。

第二次前端革命意味着在前端可以进行组件化开发，开发者只需要开发项目组件，就能快速完成一个项目，甚至可以通过适配来运行小程序、native等多端环境。同时，利用相应的编译工具 WebPack，在前端可以直接完成一些编译、打包等工程化功能：在极大地提高项目性能的同时增强了项目的可维护性。

……