书名：Web前端学习笔记：HTML5+CSS3+JavaScriptpdf/doc/txt格式电子书下载

推荐语：易学易用的前端开发入门工具书，配套资源丰富，帮读者快速成长为前端开发工程师

作者：王涛,杨延成,姜浩

出版社：机械工业出版社

出版时间：2018-07-01

书籍编号：30614003

ISBN：9787111600909

正文语种：中文

字数：150825

版次：1

所属分类：计算机-程序设计

王涛

山东捷瑞数字科技股份有限公司CEO，北京大学硕士研究生校外导师，山东省优秀软件企业家，山东省电子信息行业优秀企业家。创建并带领捷瑞数字成为领先的大数据可视化与数字展馆解决方案提供商。

杨延成

杰瑞教育总经理，高级讲师，从事IT教育行业多年，主要研究方向为C#、Java、HTML5以及Python。自2010年以来，受聘于山东省内多所高等院校担任客座讲师。

姜浩

杰瑞教育在线教育事业部总监，精通Web前端开发技术以及Java、PHP、Python等后台开发语言，曾参与多款企业级电商项目开发，所带学员多人入职国内知名IT企业，深受学员好评。

本书以杰瑞教育前端课程大纲为基准，由浅及深地讲解了Web前端开发所需的知识。全书共3篇，涵盖了HTML5、CSS3以及JavaScript等多项技术，并提供学习视频，循序渐进地讲解每个知识点，同时每章均配有课堂案例与练习，让读者能够在学习的过程中进行实践操作，提高动手能力。本书可以帮助初学者顺利步入Web前端开发领域，也可作为开发人员的参考手册以及大中专院校与培训机构的教材。

图书在版编目（CIP）数据

Web前端学习笔记：HTML5+CSS3+JavaScript/王涛编著.—北京：机械工业出版社，2018.7

ISBN 978-7-111-60090-9

Ⅰ.①W… Ⅱ.①王… Ⅲ.①超文本标记语言-程序设计②网页制作工具③JAVA语言-程序设计 Ⅳ.①TP312②TP393.092.2

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

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

策划编辑：丁诚

责任编辑：丁诚 王荣

责任校对：张艳霞

责任印制：常天培

北京铭成印刷有限公司印刷

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

184mm×260mm·19.75印张·479千字

0001—3500册

标准书号：ISBN 978-7-111-60090-9

定价：69.00元

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

电话服务

服务咨询热线：（010）88361066

读者购书热线：（010）68326294

（010）88379203

封面无防伪标均为盗版

网络服务

机工官网：www.cmpbook.com

机工官博：weibo.com/cmp1952

教育服务网：www.cmpedu.com

金书网：www.golden-book.com

前言

HTML诞生于20世纪90年代，它带来了Web行业的一片繁荣。而随着移动互联网时代的到来，HTML的最新版本——HTML5应运而生，它的出现颠覆了互联网开发的格局，取代了Flash插件在网页开发中的垄断地位，优化了移动互联网的体验，甚至颠覆了Android、iOS等手机软件。

为了帮助更多的读者进入移动互联网行业。杰瑞教育组织专业讲师团队，完成了此书的编写工作。杰瑞教育成立于2011年，专注于互联网人才培训领域，每年均为全国各地互联网企业输送优秀IT人才数千人。本书以杰瑞教育Web前端课程大纲为基准，结合杰瑞教育线下培训授课内容与课堂案例编写而成。

为保证学习效果，本书秉承“纯干货”的原则，帮助广大读者通过更精简的语言、更通俗的案例，学习更全面的知识体系。

本书特点

本书的特点主要体现在以下几个方面：

配套资源丰富。

为方便读者自学，本书随书附赠教学视频以及案例源代码等学习资源。

专业的技术支持服务。

为保证读者学习效果，杰瑞教育将为读者提供专业的技术支持服务，解决读者学习的后顾之忧。

专业的就业咨询服务。

对那些顺利完成本书学习任务，并达到相应技术要求的学员，杰瑞教育将有专业的就业导师团队，为广大读者在就业过程中遇到的问题提供就业咨询服务。

完善的知识体系。

本书讲授的所有知识内容，均来自杰瑞教育多年教学经验的积累，完全按照杰瑞教育Web前端课程教学大纲要求进行本书知识体系的编写。

每章均提供案例与习题。

本书在注重理论知识的同时，更加注重学员的动手实践能力，每章节均附有完整的章节案例与章节练习，帮助读者提高动手操作能力。

本书内容

本书分为3篇，共18章。

第1篇HTML5（第1～4章）首先讲授的是HTML5的基础入门知识，紧接着是常见的块级标签与行级标签，最后详细地介绍了表格与表单的使用。

第2篇CSS3（第5～10章）首先从CSS3的基础知识开始，讲解了CSS样式表与选择器的使用（包括CSS3新增选择器），并重点讲解了CSS中的各种属性以及CSS3的新属性，紧接着讲解了CSS中的盒模型、浮动、定位的相关知识，最后介绍移动开发、响应式与弹性布局。

第3篇JavaScript（第11～18章）从JavaScript的语法基础开始，逐步讲解JavaScript中的变量与运算符、分支与循环、函数、BOM与DOM、数组与对象、正则表达式等相关知识点，并通过学习JavaScript面向对象来结束这一篇章的学习。这部分内容是全书的重点也是难点。

适合阅读本书的读者

希望学习并从事Web前端行业的初学者。

具有一定的工作经验但希望夯实基础知识的前端开发工程师。

相关专业大中专院校或培训学校的学生。

需要备课教材的大中专院校或培训学校的教师。

希望转入Web前端开发的其他软件工程师。

阅读建议

没有基础的读者应从第1章开始顺序阅读，尽量不要跳跃学习。

有一定工作经验的开发工程师可以根据需要选择所需章节阅读。

学练结合，将书中涉及的案例与练习亲自动手做一遍，会加深对内容的理解。

认真阅读书中的源代码，养成良好的编码习惯。

结合图书配套视频学习，可以帮助读者更好地掌握新的知识点。

养成良好的自学习惯，这将对读者以后的发展至关重要。

提升解决问题的能力，学会利用网络资源解决问题。

本书作者

本书由王涛、杨延成、姜浩编写，姜浩、王翠英负责本书的资料与案例整理，杨延成负责全书的最后审定工作。

编者

2018年1月

第1篇 HTML5

第1章 HTML5学习概述

HTML是HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页的标准标记语言。HTML使用标记标签来描述网页，由浏览器来解析，即使用HTML来建立Web站点，通过Web浏览器读取HTML文档，并以网页的形式显示出来。

欢迎各位读者步入HTML5的世界。本书将立足企业需求，从最基础的知识点讲解，一步步带领大家成为一名优秀的HTML5开发工程师。

本章学习目标：

了解HTML的发展历程及影响。

安装HTML的开发软件。

掌握HTML的基本结构与语法。

本章首先介绍HTML5的由来，HTML5与HTML4的区别，然后介绍学习HTML前的准备工作，最后介绍HTML5的语法与结构，并完成一个简单的网页页面。

1.1 认识HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5是跨平台的，被设计为在不同类型的硬件（台式计算机、平板计算机、手机、电视机等）上运行的语言。

1.1.1 HTML的发展历程

通俗来讲，HTML就是网页的源代码，任何一个网页都是由一行行HTML代码编写而成的。

HTML的第一个版本诞生于20世纪七八十年代，当时互联网没有普及，也没有专业的组织制定HTML规范。因此，那个时代HTML的发展非常混乱，并没有受到开发者的重视，更没有得到大幅度的发展，HTML还是一门冷门的语言。

HTML真正崛起是从1998年诞生的HTML4.0版本开始的，紧接着在1999年更新了HTML4.01版本。自HTML4.01版本以后，Web世界经历了巨变。此时，被称为BAT三巨头的百度、阿里巴巴、腾讯等互联网企业相继崛起，标志着互联网时代的到来。

HTML5是由W3C（万维网联盟）于2007年正式立项的，直至2014年10月底，这个长达八年的规范终于制定完成并公开发布。

HTML5将会取代HTML4.01、XHTML1.0标准，使网络标准满足互联网应用迅速发展的需求，为移动平台带来多媒体，推动Web进入新的时代。

1.1.2 HTML5与HTML4的区别

除了本身的HTML5标记之外，广义的HTML5还包含CSS3与JavaScript。由于HTML5设计的目的是在移动设备上支持多媒体，所以新的语法特征被引进以支持这一点，但是基本的标记语法并没有大的改变。下面列出HTML4与HTML5的主要区别。

1.语法简化

更简单的doctype是HTML5中众多新特征之一。在HTML5中，头部只需要写＜！DOCTYPEhtml＞即可。HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。

2.新增语义化标签

新增加的语义化标签（如＜header＞、＜footer＞、＜section＞等）使得网页的可读性变得更高，也更加明确地表示出网页的结构，对于搜索引擎优化（SEO）有很大帮助。

3.新的媒体标签

新的＜audio＞和＜video＞标签可以用来嵌入音频文件和视频文件。这些标签的使用让网页播放音频、视频更加方便。

4.使用画布标签绘制图形

＜canvas＞标签具有绘图功能，通过与JavaScript脚本的搭配，可在网页上绘制图像。

5.新的表单设计

在HTML5中，表单增加了新元素，也为表单元素增加了许多新属性，让表单的使用更加便利。

6.废除了一些旧标签

HTML5废除了一些标签，其中大部分为网页美化标签，如＜center＞、＜font＞、＜tt＞、＜big＞、＜dir＞、＜marquee＞、＜frame＞等。

1.2 学习HTML5前的准备工作

在开始编写HTML5网页之前，首先要准备好编写HTML5的操作环境和浏览器环境。本节介绍常用浏览器和常见的HTML5开发软件，以及如何创建一个HTML5页面。

1.2.1 常用浏览器介绍

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并可以让用户与HTML文件交互的一种软件。浏览器可以解析HTML文件，它不会显示HTML标签，而是使用标签来解释页面的内容。

1.常用浏览器

1）Internet Explorer是微软公司推出的一款网页浏览器。全称Microsoft Internet Explorer（6版本以前）和Windows Internet Explorer（7、8、9、10、11版本），简称IE。在IE7以前，中文直译为“网络探路者”，但在IE7以后便直接称为“IE浏览器”。IE9和IE10支持部分HTML5技术。

2013年10月IE11（11.0.9600.16384）问世，由于HTML5标准规范于2014年10月公布，所以IE11不可能完全支持HTML5的所有技术。

2015年微软公司放弃IE浏览器，推出Microsoft Edge浏览器。Microsoft Edge浏览器在支持HTML5方面有了很大提高。

2）Google Chrome是由Google公司开发的一款网页浏览器。Google Chrome的特点是简洁、快速。由于Google Chrome拥有更强大的JavaScript V8引擎，使其拥有更快的解析和执行速度。2016年12月，Google Chrome把HTML5设为网页核心内容。

3）Mozilla Firefox中文俗称“火狐”（正式缩写为Fx或fx），是一个自由及开放源代码的网页浏览器，支持多种操作系统。它是在网页开发调试过程中常用的一款浏览器。

2.浏览器内核介绍

浏览器内核主要分成两部分：渲染引擎和JavaScript引擎。

1）渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入CSS等）以及计算网页的显示方式，然后输出至显示器或打印机。所有网页浏览器、电子邮件客户端及其他需要编辑、显示网络内容的应用程序都需要内核。浏览器内核的不同对于网页的语法解释也会有不同，所以渲染的效果也不同。

2）JavaScript引擎负责解析和执行JavaScript来实现网页的动态效果。

开始，渲染引擎和JavaScript引擎并没有区分得很明确，后来，JavaScript引擎越来越独立，内核就倾向于指渲染引擎。

常见的浏览器内核见表1-1。

表1-1 常见的浏览器内核

1.2.2 常见的HTML5开发软件介绍

1.HBuilder

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的

....