第1章 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后端工程师、数据库工程师。下面来了解一下这四大职位的分工：

l 首先由UI设计师根据产品的需求做出网站效果图，然后交付给Web前端工程师进行图片切割和网页制作。

l 数据库工程师负责把网站数据进行存储和优化处理。

l Web后端工程师负责把网站数据进行增删改查等逻辑处理，并将操作的数据返给Web前端工程师进行数据的交互与显示。

l Web前端工程师能充分理解项目需求和设计需求，并与UI设计师、Web后端工程师紧密合作，产出高质量的网站展示层，为用户呈现最好的界面交互体验。

扫描二维码关注公众号，回复： 9716622 查看本文章

图1.1 网站开发模式

有一句话非常形象的形容了Web前端工程师的特点，“它是游走在二次元与二进制之间的魔法师!”。

1.1.2 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的文字

图1.4 在HTML基础上加入CSS样式

图1.5 加入JavaScript鼠标划入效果

1.2 Web前端开发工具

俗话说得好，工欲善其事必先利其器。所以在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及到三大类工具：浏览器、网页编辑器、切图软件，本节就来介绍这三大类工具。

1.2.1 浏览器

浏览器是网页的运行平台，即可以把HTML文件展示在网页中，供用户可上网进行浏览的一种软件。目前主流的浏览器有IE、Chrome、Firefox、Safari、Opera等，如图1.6所示，由于某些因素，这些浏览器不能完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不用的解析。这就导致了同样的页面在不同的浏览器下显示效果可能不同。

图1.6 主流浏览器

不同用户使用的浏览器可能不同，因此制作网页时，需要保证该网页兼容所有的主流浏览器。关于网页制作中的兼容性问题及解决方案，会在后面的章节进行讲解。下面介绍几种主流的浏览器。

1. IE浏览器

IE是Internet Explorer简称，它是微软公司推出的一款网页浏览器，采用Trident内核实现，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直译为“网探路者，但在IE7以后官方便直接俗称"IE浏览器"。由于一些用户仍然在使用低版本的浏览器，所以在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器都是基于IE内核的，如360安全浏览器、搜狗浏览器等，只要兼容IE浏览器，这些基于IE内核的浏览器也都兼容。

2. Chrome浏览器

Chrome浏览器一般指Google Chrome，Google Chrome是一款由Google公司开发的一款设计简单、高效的Web浏览器，采用V8引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webkit、Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。本书运行环境采用Chrome浏览器，

3. Firefox浏览器

Firefox浏览器一般指Mozilla Firefox，中文俗称“火狐”，是Mozilla公司出品的一款自由及开放源代码Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。

4. Safari浏览器

Safari是苹果公司出品用于苹果计算机的操作系统Mac OS X中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论在 Mac、PC 或 iPod touch 上运行，Safari 都可提供极致愉悦的网络体验方式，更不断地改写浏览器的定义。

5. Opera浏览器

Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的Web浏览器，采用Presto内核实现，它是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。

注：浏览器内核负责对网页语法进行解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

1.2.2 网页编辑器

网页编辑器是书写HTML、CSS等代码的工具软件。一般常用的网页编辑器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如图1.8所示为常用的网页编辑器的图标。本教材采用Dreamweaver网页编辑器版本为CS6。Dreamweaver简称“DW”，具备完美的代码提示功能和强大的辅助操作，因此它非常容易上手，是一款适合初学者学习和使用的网页编辑器。

图1.8 常用网页编辑器

1.3 HTML入门

1.3.1什么是HTML

HTML的英语意思是：Hypertext Markup Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。接下来将带领读者从语言、超文本、标记三部分进行理解HTML。

1．语言

HTML一种编程语言，有指定的语法规则。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器HTTP显示出效果。

2. 超文本

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。

HTML的普遍应用就是通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示：

通过HTML可以通过图片格式和文字格式的设计实现出丰富多彩的风格：

通过HTML可以实现页面之间的跳转：

〈A HREF="文件路径/文件名"></A>

通过HTML可以展现多媒体的效果：

从上面我们可以看到HTML超文本文件时需要用到的一些标签。

3. 标记

对于刚刚接触超文本的读者，可能不能理解一些用“<”和 “>”括起来的句子，它们称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。

在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。如<head>、 <body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类，具体介绍如下：

l 单标签指的是只存在一个标签的写法，如<meta>、<input>等。

l 双标签指的是存在一对标签的写法，如<head></head>、<body></body>等。注意在双标签中第一个标签叫做起始标签，第二个标签叫做结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和WEB浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。

1. 3.2HTML基本结构

HTML文档是由一系列的元素和标签组成。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。其基本结构如例1-1所示。

1 <!DOCTYPE HTML>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>标题</title>

6 </head>

7 <body>

8 内容

9 </body>

10 </html>

一个HTML文档基本结构主要由文档声明（<!DOCTYPE HTML>）、HTML文档（<html>）、文档头部（<head>）和文档主体（<body>）四部分组成。接下来具体介绍这四个部分的内容。

1. 文档声明

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签，它用于向浏览器说明当前文档属于哪种HTML或XHTML标准规范。必须在开头处使用<!DOCTYPE>为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将网页作为有效的XHTML文档，并按照指定文档类型进行解析。

<!DOCTYPE>声明与浏览器的兼容性相关，如果没有<!DOCTYPE>，就由浏览器决定如何展示HTML页面，这时，不同的浏览器可能有多种显示效果，这样是不允许的。

2. HTML文档

<html>标签位于<!DOCTYPE>声明之后，作用相当于在告知浏览器这是一个HTML文档，<html></html>标签限定了文档的开始点和结束点，其中<html>表示网页的开始，</html>表示网页结束，网页需要展示的所有内容都应该写到<html></html>标签的内部，<html>标签也被称为根标签，指最外层的意思。

3. 文档的头部

<head></head>用于定义HTML文档头部信息，如图1.17中的标题，也称头部标签，在<html>标签之后，用来封装其他位于文档头部的标签，如表1.1中的标签。一个HTML文档只能有一对<head></head>标签，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

表1.1 文档头部内的标签

标签	描述
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

上例中<meta charset="utf-8">指定网页的编码方式为utf-8。utf-8是一种网页编码规范，可以统一页面显示中文简体繁体及其他语言（如英文，日文，韩文），这样网页就不会出现乱码的情况。它属于国际通用编码方式。

4. 文档的主体

<body></body>包含文档要展示的所有内容，也称主体标签，网页中显示的文本、超链接、图像、表格和列表等信息都必须在<body>内，如图1.17中的内容，就是<body>内的信息，<body>中的内容是最终展示给用户的。

HTML语言是不区分大小写的，但建议文档声明采用大写方式，其他部分都采用小写方式。

1.3.3 HTML注释

在编写HTML代码时，经常要在一些关键代码旁做一下注释，这样做的好处很多，如：方便理解代码、方便查找相关代码或是方便项目组里的其他程序员来了解你所写的代码，还可以方便自己以后对代码的理解和修改。语法格式如下：

“”表示注释的结束。

1.3.4HTML属性

使用HTML制作网页时，如果想让网页的内容更丰富，如设置显示文字的颜色为彩色，大小为30。此时如果仅仅使用HTML标签默认显示样式已经不能满足需求，就需要对HTML标签的属性加以设置，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，可以省略而采用默认值;其语法格式如下：

<标签名字属性1 属性2 属性3 … >内容</标签名字>

在语法格式中，标签可以有多个属性，必须写在开始标签中，位于标签名之后。属性与标签之前需要一个空格隔开，多个属性之间也用空格隔开。

作为一般的原则，大多数属性值不用加双引号。但是包括空格、“％”，“＃”等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：

注意：一定不要在“<”与标签名之间输入多余的空格，也不能在中文状态下输入这些标签及属性，否则浏览器不能正确的识别括号中的标志命令，从而无法正确的显示信息。后面还会学习到更多其他的HTML属性，这里读者只要记住HTML属性的基本格式就好。

html学习笔记二————第一章 Web前端技术