第一章 Web前端技术简介
本章学习目标
- 了解Web前端技术和相关行业信息
- 了解Web前端开发工具
- 理解html基本原理
互联网中的网页大多数都是使用HTML格式展示到浏览者面前，因此，HTML是目前最流行的网页制作语言。为了使网页具有更好的扩展性和用户体验，CSS样式表在网页设计中有着重要的地位。在学习HTML和CSS之前，需要了解一些基本的互联网相关知识，本章将从Web前端概述、Web前端开发工具和HTML入门基本知识开始，带领读者进行Web开发之旅。
1.1 Web前端概述
Web前端即指大家平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面将对Web前端的相关概念进行详细讲解。
1.1.1 初识Web前端
1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http: //info. cern. ch/），从此人类宣布了互联网时代的到来。随着互联网的飞速发展，网站开发人员也变得炽手可热，供不应求。据不完全统计截止2016年底，网站开发人员超过2000万 。
Web前端开发是从网页演变而来，名称上有明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大， Web前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是Table布局，后来发展到DIV CSS网站重构，再到JS逐渐成为web前端开发的语言及web2.0的出现，涌现出相应的产品，如SNS、博客、微博等。人们对网页的需求不断增大，Web前端技术也正加速发展。
Web开发职位可分为网页设计师（UI设计师）、Web前端开发工程师、Web后端工程师、数据库工程师。下面来了解一下这四大职位的分工：
- 首先由UI设计师根据产品的需求做出网站效果图，然后交付给Web前端工程师进行图片切割和网页制作。
- 数据库工程师负责把网站数据进行存储和优化处理。
- Web后端工程师负责把网站数据进行增删改查等逻辑处理，并将操作的数据返给Web前端工程师进行数据的交互与显示。
Web前端工程师能充分理解项目需求和设计需求，并与UI设计师、Web后端工程师紧密合作，产出高质量的网站展示层，为用户呈现最好的界面交互体验。
图1.1网站开发模式
有一句话非常形象的形容了Web前端工程师的特点，“它是游走在二次元与二进制之间的魔法师!”。
1.1.1 Web前端三大核心技术
首先来了解下W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，所以Web前端相关技术都是基于W3C标准实现的。
下面来介绍下Web前端开发所包括的三大核心技术，即HTML语言、CSS语言、JavaScript语言。
1.HTML语言
HTML全称“Hyper Text Markup Language”，中文解释为“超文本标记语言”，它是制作网页的标准语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
2. CSS语言
CSS全称“Cascading Style Sheet”，中文解释为“层叠样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
3. JavaScript语言
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。 通常JavaScript脚本通过嵌入在HTML中来实现自身的功能。
Web前端三大核心技术就像板凳的三条腿，缺一不可。用图片来表示三者之间的联系，如图1.2所示。
图1.2 三大核心技术
W3C组织规定，web标准需要将网页的结构、样式和行为三者进行分离。HTML CSS Javascript本质上构成一个MVC框架，即HTML用来描述网页的结构（Model）、CSS用来描述网页的结构（VIEw）、Javascript用来描述网页的行为即调度数据和实现某种展现逻辑（Controller）。本书主要讲解HTML CSS。
用一个盖房子的例子来描述下三者之间的关系，首先需要把房子的地基和骨架搭建好，有一个良好的结构（HTML）。然后给房子刷上油漆和添加窗户，对房子样式进行美化（CSS）。最后给房子添加电梯和地暖，与住户进行一些行为上的交互（JavaScript），这样房子才算搭建完毕。下面来看一下在web前端中，三者的体现效果如图1.3、1.4和1.5所示。
图1.3 仅仅使用HTML的文字
