开 篇
项目1
网页入门
任务描述与技能要求
随着互联网的飞速发展，获取信息的渠道从传统媒体（纸媒、电
媒）发展到了网媒。人们一方面通过网站发布资讯、提供网络服务，
另一方面通过浏览器访问网站获取资讯、选择网络服务。那么什么是
网站？它又是如何实现资讯的发布、向公众提供服务的呢？本项目将
介绍Web网站相关技术的基本概念——网页三剑客HTML、CSS、
JavaScript，以及制作网站所需的基础知识。通过本项目的学习，读者
将建立起对这些技术的基本认识，知道这些技术分别起到什么作用，
并能够利用工具Visual Studio Code搭建并运行一个简单的网站。
Web
004
前端开发与项目实践
任务1-1 基本概念
知识目标：
●了解HTML的概念
●了解CSS样式的概念
●了解JavaScript的概念
导语
HTML、CSS、JavaScript是Web前端开发最基础、最重要的技术。HTML用于描
述网页内容，CSS用于规划页面的布局和样式，JavaScript提供实现网页交互的逻辑编
程。本任务将向读者简单介绍这三大技术，旨在使读者建立起对Web前端开发初步的
概念。
知识点
1. HTML概述
HTML（hyper text mark-up language，超文本标记语言）是一种用来描述网页的通
用标记语言。网页本质上即超文本标记语言，使用标签来描述网页中的图像、文本、
音频、视频等元素，然后通过浏览器解析，最终得到人们所看到的页面。HTML并不
是程序语言，它是一种规范的、标准的、结构化的标记语言，符合标记语言的语法规
则，每个标签均有严格的语义。
HTML具有平台无关性，无论是Windows还是macOS亦或是Linux平台，都可
以正常访问。早期开发人员使用记事本等文本编辑工具即可编写HTML文件。随着互
联网的发展，Web应用越来越受到重视，操作简单、功能强大的网页开发工具不断地
呈现在人们面前，常见的工具有Dreamweaver、HBuilder等。使用这些开发工具编写
HTML，生成扩展名为.htm（或.html）的网页文件，经浏览器加载并解析网页文件，
人们即可看到熟悉的网页页面。早期对HTML文件的结构要求并不十分严格，甚至可
以不按规则结构编写HTML文档，而不同的浏览器对HTML文件的解读也不完全一
致。为了能给用户提供较好的体验，虽然主流的浏览器能够兼容这类文档，但是作为
开发人员，仍应该考虑到代码的可读性、可维护性等方面的因素，所以从一开始就应
当严格按照HTML的标准书写规范的HTML代码。
项目1 网页入门
005
HTML5是W3C（Word Wide Web Consortium，万维网联盟）和WHATWG（Web
Hypertext Application Technology Working Group，网页超文本应用技术工作小组）合作
产生的新一代超文本标记语言，是W3C对HTML的第五次修改，于2014年10月完
成标准规范的制定。较之于早期的版本，HTML5丰富了表单、多媒体元素，并新增了
语义、结构元素，使开发者能更高效地设计出功能更加丰富的网页。
2. CSS概述
CSS（cascading style sheets，层叠样式表）是W3C制定的一种网页新技术，用于
精确控制页面布局、文本、颜色、背景、边框和其他页面效果。CSS除了支持更丰富
的页面外观外，同一个CSS还可以同时在多个页面上复用，并且一个页面也可以应用
多个CSS。若多个CSS样式文件所定义的样式发生冲突，将依据层叠顺序处理。
现今Web页面的开发模式大多采用内容（HTML）和样式（CSS）分离设计的方
式。当一个或多个网页采用相同的样式时，只需建立一个CSS文件，让页面调用这个
CSS文件即可，这样做简化了网页的代码，提高了页面加载的速度。在网页制作过程
中，我们经常遇到反复修改页面样式的问题。若把相同的样式统一由CSS管理，那么只
需修改CSS样式即可，既能够简化修改工作，减少了重复劳动，又能够避免遗漏工作。
目前，CSS已经成为网页设计中必不可少的技术之一。它具有丰富的功能，可归
纳为以下几点：
（1）可以灵活控制网页中各种元素的外观和位置；
（2）可以为网页中的元素设置各种过滤器，从而产生诸如阴影、模糊等只有在图
像处理软件中方可实现的效果，美化页面效果；
（3）可以结合脚本语言，实现多种动态效果；
（4）可以更快、更容易地维护及更新大量的网页样式。
一般所提到的CSS指的是CSS2.x，而CSS3则是CSS的最新标准，是CSS2.x的
升级，能更好地实现网页样式与内容的分离。首先，CSS3不再是一个整体标准，而是
被拆分成不同模块，常用的模块分别是盒模型、列表、超链接、语言模块、背景和边
框、文字特效、多栏布局；其次，CSS3增加了许多新的特性，例如边框的圆角效果、
简单的动画效果等；最后，CSS3还增加了更多的CSS选择器类型，从而使Web开发
可以通过更简单的方式实现更强大的功能。
目前不同浏览器对HTML5和CSS3特性的支持度和兼容性方面还存在不完全一致
的情况，但是网页开发使用HTML5和CSS3是大势之趋，现代浏览器也在朝着这个方
向发展。
3. JavaScript概述
如果说HTML和CSS是Web页面的骨骼和皮肤，那JavaScript就是Web页面的
大脑。JavaScript使信息和用户之间不再只是一种显示和浏览的关系，它实现了一种实
Web
前端开发与项目实践
时的、动态的、可交互式的表达能力，可提供动态实时信息。JavaScript的出现弥补了
“静止”页面所缺少的客户端与服务器端的动态交互。
JavaScript是一种基于对象（object）和事件驱动（event-driven）并具有安全性能
的脚本语言。JavaScript在客户端运行，结构简单，使用方便，通过和HTML结合，可
以在一个Web页面中链接多个对象，与Web用户进行交互。当用户浏览Web页面并
做出某种操作时，就会产生相应的事件，JavaScript所编写的脚本即对相应事件做出响
应。JavaScript是通过嵌入标准的HTML中实现的，它有以下几个基本的特点。
（1）脚本语言。JavaScript是一种脚本编辑语言，采用小程序段的方式运行在浏
览器前端。它是一种解释型语言，不需要提前编译，直接在运行过程中被逐行地解释
执行。
（2）基于对象。JavaScript是一种基于对象的语言，能灵活运用已有的对象处理事
务；同时JavaScript也可以看作一种面向对象的语言，具备面向对象的特征。
（3）简单性。JavaScript受Java启发而产生，采用弱类型，并未使用严格的数据类
型，是一种建立在Java基本语句和控制流之上的简单而紧凑的语言。
（4）动态性。JavaScript通过事件驱动响应用户的操作，无须通过Web服务器，可
在客户端直接对用户的操作进行响应，可以说是一种客户端动态服务技术。
（5）跨平台性。JavaScript依赖宿主代理程序（主要是浏览器）来运行，所以和操
作系统无关。只要操作系统平台有支持JavaScript的宿主代理程序就可以运行。
任务1-2 制作第一个页面
知识目标：
●初步掌握使用Visual Studio Code创建Web项目
导语
在对网页开发技术有了一定了解之后，本任务将介绍目前使用较为广泛的一款集
成开发工具——Visual Studio Code。通过本任务的介绍，读者能够基本掌握使用Visual
Studio Code创建、运行Web项目的方法。
知识点
1. Visual Studio Code介绍
Visual Studio Code是微软公司开发的一款轻量级、功能强大的源代码编辑器，支
持C、C++、Python等多种语言，并且可以运行在Windows、macOS以及Linux等多
个平台上。
（1）Visual Studio Code的工作界面。通过官方网站（https://code.visualstudio.com/）
下载Visual Studio Code安装程序，并进行安装。安装完毕以后，打开Visual Studio
Code，如图1-1所示。
①②
③
④
⑤
图1-1 Visual Studio Code的工作界面
Visual Studio Code的工作界面包含5个部分：活动栏、侧边栏、编辑区、面板区、
状态栏。
①活动栏。活动栏位于窗口左侧。单击活动栏中的按钮，可以切换资源管理器、
搜索、源代码管理git、调试以及插件管理。
②侧边栏。侧边栏默认显示的是资源管理器，可以辅助开发人员管理项目，新建
项目文件和文件夹。通过活动栏可切换所提供的功能。
③编辑区。编辑区用于编辑文档代码。
④面板区。面板区顶部的选项卡菜单可以切换显示不同的面板内容，包括问题、
输出、调试终端。
⑤状态栏。状态栏用于显示打开的项目以及正在编辑的文档的信息。
（2）Visual Studio Code的中文语言包。Visual Studio Code提供多种语言的工作
界面，默认是英文环境，可以通过内置的插件功能在线下载官方提供的语言包。若要
将工作界面设置为中文环境，具体操作如下。
①单击活动栏的插件管理按钮，此时侧边栏会显示已安装的插件。
②在顶部搜索框中输入chinese，显示搜索结果，如图1-2所示。
Web
前端开发与项目实践
图1-2 插件搜索
③在搜索结果中单击Chinese(Simplified) Language条目，此时编辑区会显示简体中
文版插件的安装界面，如图1-3所示。
图1-3 中文语言包安装
④单击install按钮，即可下载安装Visual Studio Code语言包。
⑤安装完成后需在弹出的窗口中单击Restart Now按钮重启软件，软件重启后界面
将切换为中文。
（3）在Visual Studio Code中运行网页。设计好的网页需要运行以查看效果的时候，
如何在Visual Studio Code中运行网页文件呢？Visual Studio Code提供了两种类型的插
件来实现。
Visual Studio Code提供了一个具有实时加载功能的小型服务器插件live server，可
以用它来运行前端静态文件。但是live server只是一个临时的服务器，用于实时地查看
网页运行效果，并不能作为最终部署网页的站点。live server的安装方法与中文语言包
类似。单击活动栏插件管理按钮后，在搜索栏中输入live server，单击安装搜索结果中
出现的live server插件即可，如图1-4所示。
图1-4 安装运行live server
安装完毕后可以根据需要修改默认的服务器启动信息，具体操作如下：
①选择“文件”→“首选项”→“设置”选项；
②在弹出的设置窗口的搜索栏中输入live server，如图1-5所示；
③单击“在settings.json中编辑”链接，在打开的settings.json文件中编写服务器
配置代码，如图1-6所示；
④保存settings.json文件，完成服务器配置。
图1-5 live server配置
图1-6 服务器配置代码
配置完成后，打开浏览器，在地址栏中输入“http://127.0.0.1:5500/网页路径”，查
看网页效果。
Visual Studio Code还提供了一个运行HTML文件的插件open in browser，其安装
方法与中文语言包类似。单击活动栏“插件管理”按钮后，在搜索栏中输入open in
browser，选择安装搜索结果中出现的open in browser 2.0.0插件，如图1-7所示。
Web
前端开发与项目实践
图1-7 安装运行浏览器插件
安装完插件以后，在页面文件任意位置上右击，此时弹出的菜单中多了两个选
项：Open In Default Browser和Open in Other Browser，如图1-8所示。Open In Default
Browser表示以默认浏览器打开网页文件（一般默认浏览器为IE浏览器）；Open in
Other Browsers表示可以选择本机已安装的浏览器打开网页文件，此时会弹出浏览器选
择窗口，如图1-9所示。
图1-8 选择运行方式
图1-9 Open in Other Browsers浏览器选择
如果希望将某个浏览器设置为默认浏览器，以方便调试页面，那么需要修改默认
浏览器的配置，具体修改操作如下：
①选择“文件”→“首选项”→“设置”选项；
②在弹出的设置窗口的搜索栏中输入open in browser；
③在显示的Open-in-browser：Default选项中输入默认浏览器的名称，如图1-10设
置了chrome为默认浏览器。
图1-10 设置默认浏览器
2.制作HelloWorld页面
（1）创建项目。打开Visual Studio Code，选择“文件”→“打开文件夹”选项，
在弹出的打开文件夹窗口中，选择事先创建好的项目文件夹PROJECT01，单击“选择
文件夹”按钮即完成了项目的创建，如图1-11所示。
图1-11 选择项目文件夹PROJET01
（2）创建页面。选中项目文件夹PROJECT01，单击右侧的“新建文件”按钮，在
PROJECT01项目下弹出的可编辑文本框中输入页面文件名helloworld.html，即创建了
helloworld页面文件，如图1-12所示。
图1-12 创建页面文件helloworld.html
Web
前端开发与项目实践
（3）编辑页面。使用Visual Studio Code打开helloworld.html文件，在文档中输入
HTML结构代码，代码如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<style type="text/css">
<!--设置h1标题样式-->
h1 {
font-family: 'Times New Roman';
font-size: 12pt;
font-weight: bolder;
}
<!--设置段落样式-->
p {
font-family: '楷体';
font-size: 10pt;
color: blue;
}
</style>
</head>
<body>
<script>
//弹出提示框
alert("Welcome to Web Design Journey!");
</script>
<h1>Hello World</h1>
<p>欢迎来到Web的世界!</p>
</body>
</html>
上述代码中，<head>表示网页的头部，其中包含网页的编码方式、网页标题
<title>以及CSS样式<style>，<style>标签中设置了标题和段落文本的样式；<body>
是网页的主体，包含页面内容：一段JavaScript脚本、一个<h1>标题以及一个段
落<p>。
（4）运行页面。右击编辑区任意位置，在弹出的菜单中选择Open with Live Server
命令，自动打开默认浏览器Chrome运行helloworld.html文件。打开页面后，首先执
行脚本弹出的提示框，提示框内容为“Welcome to Web Design Journey!”，如图1-13
所示。
图1-13 提示框
单击提示框中的“确定”按钮，显示页面文本内容。该页面的文本包含1个标题
文本Hello World和1个普通段落文本“欢迎来到Web的世界!”，如图1-14所示。
图1-14 helloworld.html文件的执行结果
至此，完成了一个Hello World项目的创建、编辑和运行任务。
项目小结
项目1重点介绍了网页关键技术HTML、CSS和JavaScript以及制作网页的开发平
台Visual Studio Code，并通过一个实例演示了如何利用Visual Studio Code创建项目、
编写网页代码以及运行浏览网页。