一章 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后端工程师紧密合作，产出高质量的网站展示层，为用户呈现最好的界面交互体验。

有一句话非常形象的形容了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所示。

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.2 Web前端开发工具

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

1.2.1 浏览器

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

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

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浏览器，版本为 54.0.2840.5，如图1.7所示。

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”，具备完美的代码提示功能和强大的辅助操作，因此它非常容易上手，是一款适合初学者学习和使用的网页编辑器。

接下来讲解如何使用Dreamweaver网页编辑器进行网页编程，软件的安装不再介绍，直接讲解软件安装后如何使用。

运行DW软件，进入软件界面， 选择菜单栏中【文件】→【新建】，打开新建文档窗口，在【文档类型】下拉列表中选择HTML5，单击【创建】按钮，如图1.9所示，即可创建一个空白的HTML文档，如图1.10所示。

为了让初学者更好的使用DW工具，需要对DW进行一些初始化的设置，具体如下：

a) 工作区布局设置

运行DW软件，进入软件界面，将布局设置成统一的模式，选择菜单栏中选择【窗口】→【工作区布局(w)】→【经典】，如图1.11。

2. 必备面板

设置经典模式后，需要调出三个常用的面板，分别选择菜单栏【窗口】菜单下的【插入】、【属性】、【文件】3个命令，如图1.12所示。

3. 新建默认文档设置

选择菜单栏中【编辑】→【首选参数】（Ctrl+U），选中左侧【分类】中的【新建文档】，右边就会出现相应的设置，选择最常用的HTML文档类型和编码类型，本书设置为HTML5，如图1.13所示。

新建文档的首选参数设置后，新建HTML文档时，DW就会按照默认文档设置直接生成所需的代码。

4. 浏览器设置

初学者计算机必备IE浏览器和Chrome浏览器，建议讲DW的默认预览浏览器设置为“Chrome浏览器”，快捷键F12是使用主浏览器预览网页，一般把IE浏览器设为次浏览器，快捷键Ctrl+F12，如图1.14所示。

5. 代码提示

为了加快写代码的速度，会用到代码提示，DW中就有强大的代码提示的功能，只需在【首选参数】对话框中设置代码提示，选择【代码提示】选项，然后选中【结束标签】选项中的第二项，单击【确定】按钮即可，如图1.15所示。

1.2.3 切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中涉及到的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。如图1.16为常用切图软件的图标，本教材采用Photoshop进行切图，版本为CS5。Photoshop简称“PS”，它是一款专业性很强的图片处理软件，在第九章中将详细的来学习如何利用Photoshop进行网页的切图操作。

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可以通过图片格式和文字格式的设计实现出丰富多彩的风格：

<IMG SRC="文件名"> 
<FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT> 

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

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

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

<EMBED SRC="音乐地址" AUTOSTART=true> 
<EMBED SRC="视频地址" AUTOSTART=true> 

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

3. 标记

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

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

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

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

1.3.2 HTML基本结构

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>

运行结果如图1.17所示。

一个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>标签，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

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

4. 文档的主体

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

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

1.3.3 运行第一个HTML程序

（1）新建一个空白HTML文档，点击“代码”按钮，默认为HTML基本结构。如图1.18所示。

（2）修改<title>和<body>中的内容，按下Ctrl + S快捷键，进行文件的保存，文件后缀名为.html格式。如图1.19所示。

（3）点击“在浏览器中预览/调试”按钮，选择chrome.exe浏览器进行预览。或者通过双击.html文件进行预览。如图1.20所示。

到此本教材的第一个网页就运行成功了，可以试着改变<title>和<body>中的内容。然后重新保存页面并刷新浏览器进行预览。

1.3.4 HTML注释

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

	<!--注释的内容-->

“<!--”表示注释的开始，“-->”表示注释的结束。DW中自带添加注释功能，如图1.21所示，也可手动添加注释。

1.3.5 HTML属性

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

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

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

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

	<font color="#ff00ff" face="宋体" size="30">字体设置</font> 

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

1.4 本章小结

通过本章的学习，初步了解了Web前端技术和相关行业信息。学习到Web前端开发工具的使用，而且还运行了第一个HTML语言的网页程序。本章中需要理解什么是HTML语言，HTML语言的基本格式，HTML语言的属性设置等相关知识点。在下一章节中，将进一步来学习HTML这门语言。

1.5 习题

a) 填空题

(1) Web前端开发所包括的三大核心技术包含 、 、JavaScript语言。

(2) 超文本标记语言指的是 。

(3) HTML文档包括 和 两部分。

(4) HTML多个属性之间分隔用 。

(5) 用于向浏览器说明当前文档属于哪种HTML或XHTML标准规范。

b) 选择题

(1) 下列选项中，不属于网站开发四大职位的是（ ）。

A．web前端开发工程师 B．数据库开发工程师

C．测试开发工程师D．web后端开发工程师

(2) 下面哪个不属于HTML基本结构（ ）。

A．<meta>B．<head>

C．<body>D．<html>

(3) 下面哪个不属于五大浏览器（ ）。

A．Firefox浏览器B．Chrome浏览器

C．Safari浏览器D．360浏览器

(4) 下面哪个标签限定了文档的开始点和结束点（ ）。

A．<! DOCTYPE >B．<html>

C．<head>D．<body>

(5) 下面用来定义文档标题的标签是（ ）。

A．<style>B．<link>

C．<script>D．<title>

c) 思考题

(1) 请简述什么是超文本标记语言？

(2) 请简述HTML、CSS、JS三者的关系及职能划分？

观看视频+：782542147

内容来源书籍：《HTML5从入门到精通》，一本Web前端实用性综合技术图书。

简介：《HTML5从入门到精通》倡导“快乐学习，实战就业”的理念，作为初学者高品质的入门教材之一，免费提供一站式教学服务包，附赠配套PPT、教学视频、教学大纲、考试系统、测试题等资源。且书本内容覆盖全面、讲解详细，其中包括标签语义化、标签使用规范、选择器类型、盒模型、标签分类、样式重置、CSS优化、Photoshop切图处理、整页制作、CSS3新样式、HTML5新功能等。与此同时，本教材通过总结、归纳HTML、CSS、CSS3动画与3D及移动端布局与响应式开发等核心知识点，并从项目开发的实际需求入手，将理论知识与实际应用相结合，以此帮助初学者全面、系统、深入、透彻地理解HTML5的基础知识和技术，使他们快速地成长为初级程序员，并拥有一定的项目开发经验，从而在职场中拥有一个较高的起点。

TML5 作为下一代网站开发技术，无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。借助尖端功能，技术和 API，HTML5 允许你创建响应性、创新性、互动性以及令人惊叹的漂亮网站。更进一步，你也可以使用 HTML5 创建原来只能用于桌面平台上的复杂应用程序。

这篇文章挑选了10个适合初学者的 HTML5 入门教程，带你踏上 HTML5 之旅。

1. HTML5 教程 4 U

对于初学者，HTML5 Doctor 网站是开始学习的很好的地方，你可以编辑代码，查看输出结果。

2. 使用 HTML5 和 CSS3 创建一个下拉导航菜单

了解如何使用新的 HTML5 标签和 CSS3 创建一个简单又时尚的下拉菜单。

3. 使用 HTML5 和 CSS3 光滑的登录表单

使用 CSS3 和 HTML5 创建漂亮的登录表单，不需要任何 JavaScript 代码。

4. 使用 HTML5，CSS3 和 jQuery 创建下拉式登录框

这是一个简单的教程，可以帮助你使用 CSS3，HTML5 和几行 jQuery 代码创建一个漂亮的下拉登录表单。

5. 使用 HTML5, CSS3 and jQuery 创建可爱的弹出栏

按照这个简单的教程中的步骤来建立一个弹出页面顶部的信息栏，你可以用它来显示从新闻、最新的博客文章等。

6. 如何创建一个很酷和实用的 CSS3 搜索框

了解如何使用 HTML5 的占位符属性来创建一个很酷和实用的 CSS3搜索框。

7. 使用 HTML5 创建一个有吸引力的在线演示文稿

本教程将教你如何使用 HTML5 的标签，nav, menu, section, aside 和 header 制作漂亮的演示文稿。

8. HTML5 灰度图像和悬停效果

你可能已经在其他网站上看到过这样的效果。按照本教程中的步骤学习如何使用 HTML5 和 jQuery 来动态地把彩色图像转化为灰度模式。

9. HTML5 幻灯片 – 使用 Canvas and jQuery

了解如何创建一个优雅的幻灯片过渡效果。

10. 学习如何制作好看的 HTML5 表单

Learn how to style a nice looking HTML5 form using some CSS3 techniques.

了解如何使用一些 CSS3 技术制作一个好看的 HTML5 表单。

加入千锋教育培训，实现高薪就业的华丽转身！私信留下您的联系方式就能免费得到各学科资料哦！长沙校区地址：岳麓区麓谷企业广场A2栋3单元3楼。