作者：聚慕课教育研发中心
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3+JavaScript 从入门到项目实践(超值版)试读：
前言
部分对资源包的具体内容、获取方式以及使用方法等做了详细说明。本书适合希望学习Web开发前端编程语言的初中级程序员和希望精通程序开发的程序员阅读，还可作为大中专院校及社会培训机构的师生以及正在进行软件专业相关毕业设计的学生阅读。前言丛书说明
本套“软件开发魔典”系列图书，是专门为编程初学者量身打造的编程基础学习与项目实践用书。
本丛书针对“零基础”和“入门”级读者，通过案例引导读者深入技能学习和项目实践。为满足初学者在基础入门、扩展学习、编程技能、行业应用、项目实践5个方面的职业技能需求，特意采用“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深，由深到精”的模式进行讲解。
本套丛书目前计划有以下书目。
古人云，读万卷书，不如行万里路；行万里路，不如阅人无数；阅人无数，不如有高人指路。这句话道出了引导与实践对于学习知识的重要性。本书始于基础，结合理论知识的讲解，从项目开发基础入手，逐步引导读者进行项目开发实践，深入浅出地讲解Web前端编程的各项技术和项目实践技能。我们的目的是多角度、全方位地帮助读者快速掌握软件开发技能，为读者构建从高校到社会的就职桥梁，让有志从事软件开发的读者轻松步入职场。Web前端开发最佳学习线路
本书以Web前端开发最佳的学习模式设置内容结构，第1～4篇可使您掌握Web前端编程基础知识、应用技能，第5、6篇可使您拥有多个行业项目开发经验。遇到问题可学习本书同步微视频，也可以通过在线技术支持，让老程序员为您答疑解惑。本书内容
全书分为6篇31章。
第1篇（第1～6章）为基础知识，主要讲解Web前端开发技术的基础知识，包括HTML 5知识、CSS 3知识、网页文本与网页图像等，引领读者步入Web前端开发的编程世界。使读者能快速掌握JavaScript语言，为后面更好地学习网页编程打下坚实基础。
第2篇（第7～13章）为核心应用，主要讲解Web前端开发的核心应用，包括网页中超链接、网页列表、网页表格以及网页表单的美化，网页布局、网页动画效果等。通过本篇的学习，读者可对Web前端开发有较高的掌握水平。
第3篇（第14～18章）为核心技术，主要介绍通过案例示范学习JavaScript在前端开发中的一些核心技术，例如JavaScript的基础、开发应用工具、对象与数组、函数与闭包以及窗口与人机交互对话框等。
第4篇（第19～24章）为高级应用，主要讲解JavaScript的高级运用。通过本篇的学习，读者将学会文档（Document）对象与文档对象模型（DOM），JavaScript的事件机制、客户端开发技术、服务器端开发技术、安全策略以及错误和异常处理等。学好本篇可以极大地提升JavaScript编程能力。
第5篇（第25～28章）为行业应用，主要讲解JavaScript语言在游戏、金融理财、移动互联网、电子商务等行业开发的应用。另外补充了软件工程师的必备素养与技能，为日后进行软件开发积累下行业开发经验。
第6篇（第29～31章）为项目实践，介绍企业门户网站、游戏大厅网站、便捷计算器App等实战特效案例。本篇内容不仅融入了作者丰富的工作经验和多年的使用心得，还提供了大量来自工作现场的实例，具有较强的实战性和可操作性。学习完本篇，读者可对JavaScript在Web前端开发中的应用有个详尽的了解，能在自己的职业生涯中应对各类JavaScript开发需求。
系统学习本书后，可以掌握Web前端开发基础知识、全面的前端程序开发能力、优良的团队协同技能和丰富的项目实践经验。我们的目标就是让初学者、应届毕业生快速成长为一名合格的初级程序员，通过演练积累项目开发经验和团队合作技能，在未来的职场中获取一个较高的起点，并能迅速融入软件开发团队。本书特色1. 结构科学、易于自学
本书在内容组织和范例设计中都充分考虑了初学者的特点，讲解由浅入深、循序渐进。无论您是否接触过Web前端开发语言，都能从本书中找到最佳的起点。2. 视频讲解、细致透彻
为降低学习难度，提高学习效率，本书录制了同步微视频（模拟培训班模式）。通过视频学习除了能轻松学会专业知识外，还能获取老师的软件开发经验，使学习变得更轻松、有效。3. 超多、实用、专业的范例和实践项目
本书结合实际工作中的应用范例逐一讲解Web前端开发的各种知识和技术，在行业应用篇和项目实践篇中更以3个项目的实践来总结、贯通本书所学，使您在实践中掌握知识，轻松拥有项目开发经验。4. 随时检测自己的学习成果
每章首页中均提供了学习指引和重点导读，以指导读者重点学习及学后检查；每章后的就业面试技巧与解析均根据当前最新求职面试（笔试）精选而成，读者可以随时检测自己的学习成果，做到融会贯通。5. 专业创作团队和技术支持
本书由聚慕课教育研发中心编著和提供在线服务。读者在学习过程中遇到任何问题，均可登录http://www.jumooc.com网站或加入图书读者（技术支持）QQ群（529669132）进行提问，作者和资深程序员将为读者在线答疑。本书附赠超值王牌资源库
本书附赠了极为丰富、超值的王牌资源库，具体内容如下：（1）王牌资源1：随赠本书“配套学习与教学”资源库，提升读者的学习效率。
● 本书同步408节教学微视频录像（支持扫描二维码观看），总时长40学时。
● 本书3个大型项目案例以及360个实例的源代码。
● 本书配套上机实训指导手册及本书教学PPT课件。（2）王牌资源2：随赠“职业成长”资源库，突破读者职业规划与发展瓶颈。
● 求职资源库：100套求职简历模板库、600套毕业答辩与80套学术开题报告PPT模板库。
● 面试资源库：程序员面试技巧、常见面试（笔试）题库、400道求职常见面试（笔试）真题与解析。
● 职业资源库：程序员职业规划手册、软件工程师技能手册、常见错误及解决方案、开发经验及技巧集、100套岗位竞聘模板、网页设计技巧查询手册。（3）王牌资源3：随赠“软件开发魔典”资源库，拓展读者学习本书的深度和广度。
● 案例资源库：600个实例及源码注释。
● 项目资源库：行业网站开发策划案。
● 软件开发文档模板库：60套8大行业软件开发文档模板库，JavaScript特效案例库、网页模板库、网页素材库、14套网页赏析案例库等。
● 电子书资源库：HTML参考手册电子书、CSS参考手册电子书、JavaScript参考手册电子书、CSS属性速查表电子书、HTML标签速查表电子书、jQuery速查表电子书、语法速查表电子书、网页配色电子书、Web布局模板电子书。（4）王牌资源4：编程代码优化纠错器。
● 本助手能让软件开发更加便捷和轻松，无须安装配置复杂的软件运行环境即可轻松运行程序代码。
● 本助手能一键格式化，让凌乱的程序代码规整美观。
● 本助手能对代码精准纠错，让程序查错不再难。上述资源获取及使用
注意：由于本书不配送光盘，因此书中所用资源及上述资源均需借助网络下载才能使用。1. 资源获取读者服务qq群
采用以下任意途径，均可获取本书所附赠的超值王牌资源库。（1）加入本书微信公众号“聚慕课jumooc”，下载资源或者咨询关于本书的任何问题。（2）登录网站www.jumooc.com，搜索本书并下载对应资源。（3）加入本书读者（技术支持）服务QQ群（529669132），读者可以打开群“文件”中对应的Word文件，获取网络下载地址和密码。（4）通过电子邮件elesite@163.com、408710011@qq.com与我们联系，获取本书相应资源。2. 使用资源
读者可通过以下途径学习和使用本书微视频和资源。（1）通过PC端（在线）、App端（在/离线）、微信端（在线）以及平板端（在/离线）学习本书微视频。（2）将本书资源下载到本地硬盘，根据学习需要选择性使用。读者对象
本书非常适合以下人员阅读：
● 没有任何网页设计基础的初学者。
● 有一定的HTML基础，想进一步精通HTML编程的人员。
● 有一定的Web前端开发基础，没有项目实践经验的人员。
● 正在进行软件专业相关毕业设计的学生。
● 大中专院校及培训学校的教师和学生。创作团队
本书由聚慕课教育研发中心组织编写。河南工业大学的李岚老师任主编，胡江汇、张猛、李永刚老师任副主编。其中李岚老师负责编写第1章～第10章，胡江汇老师负责编写第11章～第17章，张猛老师负责编写第18章～第24章，李永刚老师负责编写第25章～第31章。
在本书的编写过程中，我们竭尽所能将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请广大读者批评指正。若读者在学习中遇到困难或疑问，或有何建议，可发邮件至elesite@163.com。另外，读者也可以登录我们的网站http://www.jumooc.com进行交流以及免费下载学习资源。作者第1篇基础知识
本篇介绍Web前端开发技术的基本入门，包括HTML 5基础知识、CSS 3基础知识、网页文本与网页图像等，引领读者步入Web前端开发的编程世界。
读者在学完本篇后将会了解到标签的基本概念，掌握Web前端开发的基本操作及应用方法，为后面更好地学习网页编程打好基础。
● 第1章 HTML 5基础入门
● 第2章 HTML 5文档基本结构
● 第3章 CSS 3基础入门
● 第4章 CSS 3样式选择器
● 第5章 使用并美化网页文本
● 第6章 使用并美化网页图像第1章HTML 5基础入门学习指引
当今社会已经进入互联网时代，人们的生活、工作都离不开网络，网页设计是其中的一门学科，将成为学习计算机知识的重要内容之一。本章介绍网页设计中的基本语言HTML，介绍它的基本概念和编写方法，让读者初步了解HTML。重点导读
● 了解HTML基本概念。
● 熟悉HTML 5的优点。
● 掌握第一个HTML页面的编写方法。
● 熟悉网站与网页。1.1 HTML的基本概念
HTML是互联网上应用最广泛的标记语言之一，用来编写因特网上的网页。1.1.1 什么是HTML
HTML是标记语言，它由W3C组织提供的一套标记标签组成。程序员使用这些标签进行叠加，可以开发出各种各样的网页。HTML使用标记标签来描述网页。一个网页除了由大量的标签组成，还有后续要学习的CSS样式和JavaScript脚本组合而成。1.1.2 HTML的发展史
HTML的发展有很多的曲折，从诞生至今已有20多年的历史，经历的版本以及发布日期如下。
● HTML（第一版）：1993年IETF团队的一个草案，并不是成型的标准。
● HTML：1995年11月作为RFC1866发布。
● HTML 3.2：1996年1月14日由W3C组织发布，是HTML文档第一个被广泛使用的标准。
● HTML 4.0：1997年12月18日由W3C组织发布，也是W3C推荐标准。
● HTML 4.01：1999年12月24日由W3C组织发布，是HTML文档另一个重要的被广泛使用的标准。
● XHTML 1.0：发布于2000年1月26日，是W3C组织推荐，标准，经修改于2002年8月1日重新发布。
● XHTML 1.1：于2001年5月31日发布。
● XHTML 2.0：于2002年8月5日发布草案。
● HTML 5：第一份正式草案于2008年1月22日公布。1.1.3 HTML与XHTML
XHTML是可扩展超文本标记语言，是一种置标语言，表现方式与HTML类似，不过语法上更加严格，是更纯净的HTML版本。它是W3C的一个标准，与HTML 4.01几乎相同。
XHTML是以XML格式编写的HTML，是指可扩展超文本编辑语言，与HTML 4.01版本几乎相同，可以说XHTML是更严格、更纯净的HTML版本。XHTML是以XML应用的方式定义的HTML，在2001年1月，W3C推荐发布为标准，目前，几乎得到所有主流浏览器的支持。
XHTML具有 强制性、元素必须合理嵌套、元素必须有关闭标签、空元素必须包含关闭标签、元素必须是小写、属性名称必须是小写、属性值必须有引号和不允许属性简写等特性。1.2 HTML 5的优势
HTML 5相对于前面的版本，以HTML、XHTML来说，增加了一些实用的新功能，对于用户和网页开发来说，HTML 5的出现意义很重大。但是HTML 5并不是革命性的改版，不会对开发者带来过多的冲击。本节我们就来介绍HTML 5的一些优势。1.2.1 解决跨浏览器问题
对于网页设计程序员来说，跨浏览器问题绝对是使其记忆深刻的一个问题。
在HTML 5前面的版本中，由于不同的浏览器对于HTML标准支持的不同，致使同样的网页在不同的浏览器中表现的效果不同。对于HTML 5，各大浏览器厂商对于HTML 5都表示出很高的热情，这是解决跨浏览器的根本所在。1.2.2 部分代替了原来的JavaScript
HTML 5中新增了一些功能，这些功能可以部分代替JavaScript。如打开一个页面后，想让某个文本框获得输入焦点，很多人会想到用JavaScript来完成。【例1-1】（实例文件：ch01\Chap1.1.html）获取文本框的焦点。
相关的代码实例请参考Chap1.1.html文件，在Chrome浏览器中运行的结果如图1-1所示。图1-1 获取文本框的焦点
在HTML 5中，则只需要设置autofocus属性就可以代替JavaScript代码，代码如下：
在HTML 5中，如一些输入验证的属性，以前都需要通过JavaScript来完成，现在都只需要一个HTML 5属性就可以实现。1.2.3 更明确的语义支持
在HTML 5以前，布局基本都是使用
HTML对于Web应用程序来说功能太匮乏了，如上传文件时想同时选择多个文件都不行，为了弥补类似的不足，在HTML 5中新增大量API来提高应用程序性能，增强用户体验，以及对应用程序现有的功能进行扩展。1.3 编写第一个HTML页面
前面介绍了HTML的基本知识，下面编写一个简单的HTML页面，使用的是WebStorm编辑软件，在后续的讲解中均使用这款编辑器。1.3.1 搭建HTML运行环境
HTML运行环境非常简单，它不需要服务端，只需要下载一款编辑器，如Dreamweaver、WebStorm等，在编辑器中直接编写代码，然后在浏览器中查看效果。下面以WebStorm为例来介绍一下。
首先到WebStorm编辑器的官网http://www.jetbrains.com/webstorm/去下载软件的安装包，如图1-2所示。图1-2 WebStorm编辑器的官网
安装完成后，还需要创建一个文件夹，用于存放代码，假设在桌面创建这个文件夹，命名为“源码”，如图1-3所示。图1-3 “源码”文件夹
启动WebStorm编辑器，在编辑器中打开刚才创建的文件夹“源码”，操作顺序是选择file→open命令，在弹出的窗口中，选择“源码”选项，如图1-4所示。图1-4 找到源码文件
单击OK按钮后，在弹出的对话框中单击This Window按钮，这样就进入“源码”文件夹里了，如图1-5所示，以后所编写的代码都在这里面。图1-5 进入“源码”文件夹
完成以上步骤，接下来就可以创建HTML页面了。
创建HTML页面有两种方法。
第一种：操作顺序是File→New→HTML File，如图1-6所示。图1-6 创建HTML页面
第二种：在“源码”文件夹上右击→New→HTML File，如图1-7所示。图1-7 创建HTML页面
单击HTML File选项后，弹出命名窗口，这是第一个页面，所以命名为one，如图1-8所示。图1-8 页面命名
单击OK按钮，页面创建完成，如图1-9所示。图1-9 新创建的页面1.3.2 检查浏览器是否支持
在WebStorm中，把鼠标指针移动到编辑器的右上角，会默认显示5种浏览器的图标，如图1-10所示。图1-10 默认的浏览器
如果用户的计算机上安装了相应的浏览器，当单击时会在浏览器中显示页面内容，如果没有安装，就会弹出找不到的提示框，如图1-11所示。图1-11 提示框1.3.3 编写“hello HTML 5”Web页面
一切准备就绪，开始编写一个简单的页面。
就会发现，当one.html文件创建完成时，里面有一些代码，这些代码其实是HTML的框架，只需在
标签中编写需要的内容即可，如图1-12所示，其他标签含义将在后续的内容介绍。图1-12 编写hello HTML 5页面在Chrome浏览器中运行的结果如图1-13所示。图1-13 one.html文件显示效果1.4 认识网页与网站
网页和网站都是互联网的一部分，本节介绍网页和网站的基本概念。1.4.1 网页与网站的关系
网页是一个文件，它存在于计算机中，而这部计算机必须是与互联网相连的。网页是由网址（URL）来识别与存取的，当在浏览器中输入网址后，网页文件会被传送到正在浏览网页的计算机中，然后通过浏览器对网页进行解析，再展示给用户。
网站是指根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
网站和网页最直接的关系是网站有后台，也就是网站里的内容可以更换，而网页没有后台，里面的东西全是固定的，没法再更换。
从某种程度上讲，网站是由网页组成的，但是网站往往要复杂得多，网站一般由许多个网页组成。但是网页设计是网站设计的基础，只有学好了网页设计才能组织好网站设计。1.4.2 建立网站的一般流程
网站建设的流程基本上都包括域名注册查询、网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。1. 网站建设的需求
有网站建设需求的客户向网站建设公司提出具体的网站建设要求，这些要求都是需要通过文字的形式，详细地向制作公司进行说明，要将需要建设的网站要求、内容，以及产品描述全部描写清楚。网站制作公司则要对客户的网站建设要求进行全方位的评估及了解，这样才能做出符合用户需求的网站。2. 制定网站建设方案
针对客户提出的网站建设需求，设计出整体的网站建设方案，并与客户进行再次商谈，就网站建设的风格，主题以及相关的细节进行详细的沟通，只有在与客户达到共识之后才能无所顾忌地进行网站建设。3. 网站建设初稿，敲定细节
在与客户达成共识，网站建设公司便开始着手进行网站建设的工作，在双方约定的时间内给出客户网站建设的初稿，就双方约定的网站风格、网站建设主题、网站设计内容等进行初步审核。
在初审通过之后，便开始对网站建设的细节进行详细处理，网站建设的框架大体好规划，但是在细节方面需要花费的时间比较多，往往花费时间越多，做出来的网站效果更好。4. 网站建设完成，进行验收
网站建设完成之后，需要网站制作公司反复审核和试验之后，才能交付给客户完工，在交付给客户之前，所有的网站制作商都要对网站进行反复的测试，特别是对于网站的核心功能模块，要进行反复的测试才可以交付给客户。
网站交给客户之后，还要对客户进行指导，对网站进行维护。1.5 就业面试技巧与解析1.5.1 面试技巧与解析（一）
面试官：XHTML是一种为适应XML而重新改造的HTML，当XML越来越成为一种趋势，就出现了这样一个问题：如果用户有了XML，是否还需要HTML?
应聘者：依然需要使用HTML。因为很多人已经习惯使用HTML作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的，所以在将来依然需要HTML。1.5.2 面试技巧与解析（二）
面试官：HTML文件的扩展名有哪些？
应聘者：HTML文件的扩展名有“.html”和“.htm”。“.html”是当今网页文件的一种最基本的、也是使用最广泛的保存格式，是一种超文本标记语言，页面中没有嵌入任何服务器要执行的语句，是一种静态的页面格式，一般的浏览器都能够直接解析并显示。
关于“.htm”，其实与“.html”并没有本质意义上的区别，只是为了满足DOS的8+3（文件名不能超过8个字符，扩展名不能超过3个字符）的文件名命名规范。因为一些老的系统（32位）不能识别4位文件扩展名，所以某些服务器要求.html的最后一个字母l省略。浏览器能自动识别和打开这些文件，编写这些网页网址的时候必须是对应的，也就是说index.html和index.htm是两个不同的文件，对应着不同的地址。第2章HTML 5文档基本结构学习指引
HTML 5的文档结构包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象。本章主要介绍HTML 5文档的基本结构。重点导读
● 掌握HTML 5文档构成。
● 掌握HTML 5的语法变化。
● 掌握HTML 5标签、元素及属性。
● 掌握HTML 5文档头部标签。
● 掌握标签。
● 掌握页面注释标签。
● 掌握标题标签。
● 掌握段落标签。
● 掌握其他标签。2.1 HTML 5文档构成
HTML 5的文档结构包括头部（head）、主体（body）两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容，代码如下：
试读结束[说明：试读内容隐藏了图片]