书名：Web开发技术——HTML、CSS、JavaScriptpdf/doc/txt格式电子书下载

推荐语：以一个实际案例项目贯穿全书

作者：赵振,郝生武,王海红

出版社：机械工业出版社

出版时间：2018-04-01

书籍编号：30613997

ISBN：9787111592136

正文语种：中文

字数：115301

版次：1

所属分类：教材教辅-中职/高职

本书主要讲解了Web前端开发的相关知识，主要包括HTML、CSS和JavaScript等内容。在讲解理论知识的基础上，本书更加重视应用实践，分3个层次来强化学生的实际动手能力，包括每个知识点后的示例demo，每章后的综合应用实例，以及每个部分后的实际案例。本书配套提供所有的源代码。

本书从实用的角度出发，在设计案例、章节内容等方面，力求能够满足读者需求，使读者可以迅速理解并借鉴应用相关知识点。

本书既可作为高等学校Web开发基础课程的教材，也可作为Web开发人员的技术参考书。

本书配套授课电子课件，需要的教师可登录www.cmpedu.com免费注册，审核通过后下载，或联系编辑索取。QQ：2850823885。电话：010-88379739。

图书在版编目（CIP）数据

Web开发技术：HTML、CSS、JavaScript/赵振，郝生武，王海红主编.—北京：机械工业出版社，2018.4

“十三五”普通高等教育规划教材

ISBN 978-7-111-59213-6

Ⅰ.①W… Ⅱ.①赵…②郝…③王… Ⅲ.①超文本标记语言-程序设计-高等学校-教材②网页制作工具-高等学校-教材③JAVA语言-程序设计-高等学校-教材 Ⅳ.①TP312.8②TP393.092

中国版本图书馆CIP数据核字（2018）第047831号

机械工业出版社（北京市百万庄大街22号 邮政编码 100037）

责任编辑：郝建伟 责任校对：张艳霞

责任印制：李昂

河北鹏盛贤印刷有限公司印刷

2018年4月第1版·第1次印刷

184mm×260mm·17印张·412千字

0001—3000册

标准书号：ISBN 978-7-111-59213-6

定价：49.90元（含1CD）

凡购本书，如有缺页、倒页、脱页，由本社发行部调换

电话服务

服务咨询热线：（010）88379833

读者购书热线：（010）88379649

封面无防伪标均为盗版

网络服务

机工官网：www.cmpbook.com

机工官博：weibo.com/cmp1952

教育服务网：www.cmpedu.com

金书网：www.golden-book.com

前言

本书主要讲解了Web前端开发的相关知识，包括HTML、CSS和JavaScript等内容。

在讲解理论知识的基础上，本书更加重视应用实践，分3个层次来强化学生的实际动手能力：（1）每个知识点后都附有详细的示例demo小程序，以讲解知识点的实际应用；（2）每章结尾的实验要求学生综合应用本章知识点，完成一个较为复杂的任务。（3）以一个实际案例项目一以贯之。全书分为3部分（HTML、CSS及JavaScript）进行讲解。书中提供一个实际案例项目，在每一部分完成后，综合使用讲解的相关内容，对网站进行相应设计与优化；通过深入实践，让读者能够熟练掌握所学知识，并将它们应用到实际工作中；通过逐步的深入，学生可以深入理解每一部分相关知识在网页设计中的作用、技术进化和优势等，将Web前端开发技术串联成一个整体。

本书对各相关知识点进行了独到的讲解，尤其对一些重要的知识，例如，网页设计不仅要关注基本知识，还要考虑搜索引擎友好的相关知识介绍；对frame布局、table布局、CSS布局的纵向比较与分析；Ajax的相关知识及案例应用的讲解等。请读者在文中仔细品读，这里不再详述。

本书对章节名称（尤其是小节标题）、示例demo名称及示例demo中运行结果的描述力求目标明确、示意清晰，使读者也可以将本书当作一本工具书。读者在需要时，可按照相关章节、demo的名称迅速、方便地查到相关内容；并且在查看相关demo后，即可进行借鉴使用，甚至无需再看书中的知识介绍。

参加本书编写、设计工作的团队成员包括赵振、郝生武、王海红、高杨、周生昌、袁铭壕、李仲浩、解同磊、安仲辉、张鑫、王康、赵杰、范明勇、李福鑫、都姜帆、季金一、崔舒娅、杨红光、李泽、曹美。他们在梳理本书框架、方向的前提下，花费了大量的时间和精力，关注模糊、晦涩的细节，查阅了大量资料，做了大量实验，最终完成了本书的撰写。感动于团队所有人不畏困难、努力付出的精神，在此一并感谢！

本书配套提供所有的源代码。

由于时间仓促，书中难免存在不妥之处，敬请广大读者原谅，并提出宝贵意见。

编者

第1章 HTML基础

在Internet上畅游时，通过浏览器所看到的网站是由HTML语言构成的。HTML语言可以将文字、图像、声音及表格等内容，按照一定规则在网络上进行展示。本章将主要介绍HTML的概念、特点、发展及常用开发工具等基础知识，在此基础上概要介绍如何构建第一张HTML网页。

1.1 HTML简介

1.什么是HTML

HTML（Hyper Text Marked Language，超文本标记语言）是一种基于SGML（Standard Generalized Markup Language，标准通用标记语言）的，用来制作超文本文档的简单标记语言。简单来讲，HTML就是构建一套标记符号和语法规则，将所要显示的文字、图像和声音等要素按照一定的标准要求排放，形成一定的标题、段落和列表等单元。

HTML由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立。自1990年以来，一直被用作WWW（World Wide Web，万维网）的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。

2.HTML的特点

1）HTML不是一种编程语言，而是一种标记语言（Markup Language），由一套标记标签（Markup tag）组成并描述网页。

2）HTML文档非常容易创建，只需一个文本编辑器就可以完成。

3）通过HTML描述的文档，可包含出版在线的文档，其中包含标题、文本、表格、列表、超链接、图片、视频和音频等内容。

4）HTML文件存储量小，能够尽可能快地在网络环境下传输与显示。

5）HTML独立于操作系统平台，它能对多平台兼容，只需要一个浏览器，就能够在操作系统中浏览网页文件。

1.2 HTML开发工具简介

1.文本编辑器

HTML文件可以直接使用文本编辑器（如记事本等）进行编写。编写完成后，将文本的扩展名改为.htm或.html，即成为一个HTML文件，可以使用浏览器打开该网页文件进行浏览。

2.FrontPage

FrontPage是微软公司出品的一款网页制作入门级软件，“所见即所得”是其特点，该软件结合了设计、程式码和预览三种模式。2006年，微软公司宣布Microsoft Front Page将会被Microsoft Share Point Designer新产品替代。

Microsoft Office System 2007已经包含Microsoft Share Point Designer，其实现了多系统的单点访问。这些系统包括Microsoft Office System程序、商业智能和项目管理系统，以及现有的业务应用程序（包括第三方和行业专用的程序）。这不仅易于用户使用，还可以消除冗余解决方案的成本支出，可以从系统和报告中及时提取出相关的信息并加以重新利用。

3.AdobeDreamweaver

Adobe Dreamweaver的中文名称为“梦想编织者”，是由美国MACROMEDIA公司开发的、集网页制作和管理网站于一身的所见即所得网页编辑器。在Dreamweaver CS4中新增的实时视图功能，可以使用户在真实的浏览器环境中设计网页，同时仍可以直接访问代码，所呈现的屏幕内容会立即反映出对代码所做的更改。

4.Aptana

Aptana是一个非常强大、开源的、基于Eclipse的集成开发环境，支持HTML、JavaScript及CSS的编辑与开发。Aptana经常作为JavaScript的编辑器和调试器。其特点包括了代码语法错误提示、Aptana UI自定义和扩展、编码支持，以及跨平台等。

5.其他

由于HTML编程工具可以仅仅是一个简单的文本编辑器，因此已有的大部分集成开发环境如Eclipse、.NET等都支持HTML编程开发。另外，对于本书后面将要学习的CSS和JavaScript，上述工具均适用。

1.3 第一张HTML网页

1.3.1 HTML的相关基本概念

1.HTML标签

HTML标签用于定义HTML文档程序。

HTML标签由开始标签和结束标签组成。开始标签是被尖括号包围的元素名，结束标签是被尖括号包围的斜杠和元素名，如＜html＞、＜/html＞就是一对开始标签和结束标签。而某些HTML元素没有结束标签，如＜br/＞。

2.HTML元素

HTML元素是指从开始标签到结束标签内的所有内容。

如在＜p＞This is a paragraph＜/p＞这段代码中，从开始标签＜p＞到结束标签＜/p＞构成一个元素，这个元素拥有一个开始标签＜p＞，以及一个结束标签＜/p＞，元素内容是：This is a paragraph。某些HTML元素具有空内容。

大多数HTML元素可以嵌套使用。HTML文档就是由嵌套的HTML元素构成的，如下面的代码所示。

上述HTML文档由html、body、form、p及input等元素嵌套构成。

3.HTML属性

HTML标签可以拥有属性，属性提供了相关HTML元素更多的信息。

HTML属性总是在HTML元素的开始标签中设置，以名称/值对的形式出现，如元素＜a href=\"http：//www.baidu.com\"＞baidu网站首页＜/a＞中的href属性的设置。

1.3.2 HTML文档基本结构

HTML文档由标题、段落、表格和文本等各种嵌套的元素组成。下面是一个HTML文件的基本结构。

在上面的代码中，＜html＞＜/html＞标签对向浏览器标明了HTML文件开始和结束的位置，其中包括了head和body元素。HTML文档中所有的内容都应该在这两个标签之间。

＜head＞＜/head＞标签对标明了HTML文件的头部标记，在其中可以放置页面的标题、文档属性等内容，通常将这两个标签之间的内容统称为HTML的头部。

＜body＞＜/body＞标签对用来指明文档的主体区域，网页所要显示的内容都放在这个标签对内。

1.3.3 创建HTML网页

在1.2节中，介绍了若干编辑HTML网页的工具，这里介绍使用记事本和Dreamweaver两种编辑HTML网页的方法。

1.使用记事本创建HTML网页

首先，创建一个记事本文件，打开后编写以下代码。

【例1-1】 编写Hello World网页。

然后，在保存并关闭该文件后，将该文件的扩展名改为.htm或.html，这样网页就创建完成了。

2.使用Dreamweaver创建HTML网页

首先，启动Dreamweaver软件，在菜单栏中选择“文件”→“新建”命令，弹出如图1-1所示的“新建文档”对话框。

图1-1 Dreamweaver“新建文档”对话框

在左侧的“类别”列表框中选择“基本页”选项，并在右侧相应的“基本页”列表框中选择HTML选项，然后点击“创建”按钮。这时，可以看到如图1-2所示的编辑界面。

其中，Dreamweaver已为用户搭建好了HTML文档的基本框架。这时可以向相应的元素内（如title、body）填入【例1-1】中的相应代码，然后保存即可。

打开使用上述任何一种方式创建好的网页后，运行效果如图1-3所示。

图1-2 Dreamweaver编辑界面

图1-3 Hello World网页运行效果

1.4 实验与练习

根据本章所学知识，练习使用记事本、Dreamweaver或其他HTML开发工具，构建一张基本的HTML网页，运行并查看其效果。

第2章 HTML基本标签

HTML基本标签是构成HTML网页的基本结构，是HTML网页的骨架，包括定义文档头部的＜head＞标签及定义文档主体部分的＜body＞标签。本章主要介绍这两个基本标签及其相应的属性。另外，还将讲解可以嵌入在＜head＞元素中使用的，用来定义标题的＜title＞标签及声明网页元信息的＜meta＞标签。可嵌入在＜body＞元素中的标签较多，它们将在后续章节中陆续介绍。

2.1 头部标签＜head＞

1.功能介绍

＜head＞标签用于定义文档的头部，是所有头部元素的容器，用于描述文档的各

....