作者：王震
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3+JavaScript从入门到精通试读：
前言
随着互联网信息技术的飞速发展，Web前端开发越来越受到相关行业的重视。虽然目前流行采用各类框架进行前端开发，包括当下流行的微信小程序开发，但传统的HTML、CSS、JavaScript技术仍是构成各种框架的基石，所以要想熟练掌握Web前端开发技术，成为一名合格的从业者，必须要掌握前端开发所需要的HTML、CSS、JavaScript技术。只有熟练掌握了这些技术，才能深入理解与领会各种开发框架，达到事半功倍的效果，为职业前景打下坚实的基础。
目前图书市场上关于HTML、CSS、JavaScript的图书不少，但将三者有机结合、互为补充并达到融会贯通的图书却很少。本书便是从理论到实践，从知识点到具体实例，通过总结、归纳HTML、CSS及JavaScript最核心的知识，结合实例训练，再加上具体案例进行练习拓展，通过各种实例来指导读者从零基础开始到能够应用开发，让读者全面、深入、透彻地理解Web前端开发的基础知识和技术，逐步将读者打造成具有实际开发水平和项目实战能力的Web前端程序员。
本书有何特色
1.讲解特色
● 为了让读者更快地上手，本书特别设计了适合初学者的学习方式，用准确的语言总结概念，用直观的图示演示过程，用详细的注释解释代码，用形象的比喻帮助记忆。
● 知识点介绍：在每节的开始或者每个概念的开始，都有知识点介绍，让零基础读者能了解概念，顺利入门。
● 范例：为每个实例进行编号，便于检索和循序渐进地学习。
● 示例代码：与范例对应，层次清楚，语句简洁，注释丰富。
● 运行结果：针对范例的结果给出图示，直观清楚。
● 代码解析：针对范例的代码和关键点逐一解释，让读者能融会贯通。
● 贴心的提示：全书关键点都给出了提示，让读者能举一反三。
2.内容特色
● 经验丰富：笔者有10多年的编程经验，熟悉Web前端的各项知识细节。
● 只讲重点：HTML 5、CSS 3、JavaScript涉及的知识点很多，本书讲解了常用的400多个知识点，其他内容可以参考本书的赠送资料。
● 实例众多：针对每个知识点，都给出了典型的示例程序，边学边练习。
3.本书关键数字
● 400多个知识点。
● 300个典型范例。
● 50000行代码。
● 40余个知识表格。
● 55个开发技巧。
本书内容及知识体系
第1篇 HTML技术篇
（第1～10章）本篇介绍了HTML相关知识，包括网页中的文本与段落、图像、链接、表单、多媒体、拖放内容、本地存储、页面绘图等内容。
第2篇 CSS技术篇（第11～17章）
本篇介绍了CSS相关知识，包括CSS基础知识、美化文本与背景、DIV+CSS布局、盒布局、多列布局、CSS 3自适应布局及动画和渐变等内容。
第3篇 JavaScript技术篇（第18～23章）
本篇介绍了JavaScript相关知识，包括JavaScript程序基础知识、核心语法、核心对象、浏览器对象模型、文档对象模型和JavaScript事件响应等内容。
第4篇 实战篇（第24、25章）
本篇主要介绍了两个微信小程序的开发实例。实例涵盖了从微信小程序项目的搭建、样式的设计、脚本的实现到小程序上线的全部过程。
适合阅读本书的读者
● 想从事Web前端开发工作的人员。
● 大、中专院校的学生。
● 网页制作爱好者。
● 参加实习的“菜鸟”程序员。
● 网站前端测试及维护人员。
● 微信小程序开发入门人员。
本书由王震、盛立、秦文友共同编写，其中王震（沈阳理工大学艺术设计学院副教授）负责编写第1～11章，盛立（沈阳理工大学艺术设计学院副教授）负责编写第12～23章，秦文友（网名秦子恒，计算机专家）负责编写第24、25章。第1篇 HTML技术篇网页基础知识入门视频
第1章 网页基础知识入门
Internet，中文名称为国际互联网。众所周知，Internet起源于1969年，是由美国国防部授权ARPANET（高级研究规划署）进行的互联网的试验。当初没有人预料到，在几十年后的今天，互联网会成为全球互通的主要方式。网页是Internet的主要组成部分，在本章中读者可以学到很多Internet及网页制作方面的基础知识。
1.1 了解HTML网页技术
HTML技术是一切网页技术的基础，只有学好它，才能做出精美的网站。我们平时看到的网页，有静态的，也有动态的。本节会详细阐述网页技术的发展历史，以及动态网页、静态网页、网站等概念的定义。1.1.1 什么是HTML和HTML 5
HTML（Hyper Text Markup Language），即超文本标记语言。没有基础的读者不要对“语言”有所畏惧，这并不是计算机编程语言，而是由一些命令组成的描述性文本。
HTML命令用于说明并组织网页上的文字、图形、动画、声音、表格、链接等。网页上的内容都是由HTML命令组织起来的，可见HTML技术在网页中的重要性。
组织网页元素的HTML命令包括在“< >”内，这些HTML命令也叫HTML标签。一般HTML标签是成对出现的，被组织的网页元素放在首尾标签内，如你好。但也有少数标签是单个出现的，如
、。
网页文件即采用HTML标签组织内容并符合HTML规范的文件，一般扩展名为.htm或.html。
注意：HTML格式的文件是一种文本文件，里面的内容都是文本。
HTML的出现由来已久。1993年，HTML首次由因特网工程任务组（IETF）以因特网草案的形式发布。接着，HTML的发展一路高歌：1995年发布了2.0版，1996年发布了3.2版，1997年发布了4.0版，到1999年12月发布了4.01版。从第3个版本（3.2版）开始，W3C（万维网联盟）开始接手，并负责后续版本的制定工作。
在HTML 4.01之后，W3C的认识发生了倒退，把发展HTML放在了次要的地位，而是把主要注意力转移到了XML和XHTML之上。由于当时正值CSS崛起，设计者们对XHTML的发展也深信不疑。但随着互联网的发展，HTML迫切需要增加一些新的功能，指定新的规范。
为了能继续并深入发展HTML规范，在2004年，一些浏览器厂商联合成立了WHATWG（Web超文本技术工作小组），以推动HTML 5规范。最初，WHATWG的工作内容包含两部分：Web Forms 2.0和Web Apps 1.0。它们都是对HTML的发展并纳入HTML 5的规范之中。Web 2.0也是在那个时候提出来的。
到2006年，W3C组建了新HTML的工作组，非常明智地采纳了WHATWG的意见，于2008年发布了HTML 5的工作草案，直至2014年10月底，HTML 5规范正式定稿。1.1.2 如何获取网页的源代码
刚刚接触网页制作的读者肯定对网上优秀的网页感兴趣，本节就来学习如何获取这些网页的源代码。网页都是由HTML标签组成的，读者可以直接查看其HTML源代码。查看方法为：打开网页后，用鼠标右键单击页面空白处，在弹出的菜单中选择“查看网页源代码”选项。
注意：读者在操作时，一定要在网页空白处单击鼠标右键。
还有一个查看源代码的办法，即在浏览器菜单栏中单击“查看”→“查看源文件”，读者可以马上看到此网页的HTML源代码。系统会调用特殊的浏览器窗口以便于查看HTML源代码，如图1.1所示。图1.1 查看网页的HTML源代码
如果读者需要保存此网页的HTML源代码，则只需以下几步：（1）在打开的窗口的菜单栏中单击“文件”。（2）在弹出的下拉菜单中选择“保存”。（3）选择保存类型为“HTML源”或“格式化的HTML视图”。（4）选择保存的路径。
利用优秀网页的源代码作参考，是读者学习网页制作的好方法。1.1.3 静态网页
在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”。
静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，文件内包含文本、图像、声音、客户端脚本、ActiveX控件及Java小程序等。
静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言的，是指没有后台数据库、不含程序和不可交互的网页。静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型网站。
容易误解的是，静态页面都是.htm这类页面。实际上，静态也不是完全静态，也可以出现各种动态的效果，如GIF格式的动画、Flash、滚动字幕等。1.1.4 动态网页
所谓动态网页，是指与静态网页相对的一种网页编程技术。静态网页随着HTML代码的生成，页面的内容和显示效果基本上就不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或数据库操作的结果而发生改变的。
值得强调的是，不要将动态网页和页面内容是否有动感混为一谈。这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的动态效果没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要是采用动态网站技术生成的网页，都可以称为动态网页。
总之，动态网页是基本的HTML语法规范与ASP、PHP、JSP等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页，都是动态网页。1.1.5 网站
网站（Website）是指在因特网上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的、用于展示特定内容相关网页的集合。比如，在浏览器中输入www.baidu.com，访问的是百度网站，而访问后打开的网页是百度网站的首页。
简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或享受网络服务。
1.2 了解网页技术的工作原理
上一节介绍了网页基本技术，还了解了静态网页、动态网页与网站，那么这些网页与网站是如何运作的呢?本节就来了解静态HTML和动态HTML的工作流程。1.2.1 静态HTML的工作流程
通过前面的介绍读者可以了解到，静态网页是纯HTML页面，用户使用浏览器访问静态页面不需要服务器做额外的解释工作，直接将页面所标记的内容呈现给用户即可。所以，静态HTML的工作流程大致分为以下几步：（1）用户通过浏览器输入要访问的URL地址。（2）浏览器查找域名对应的IP地址。（3）浏览器查找到对应主机的IP地址后，与对应主机的Web服务器建立连接，通过HTTP协议（超文本传输协议）向Web服务器发送请求，请求服务器上相应目录下的文件。（4）Web服务器收到请求后，在其所管理目录中找到相应文件。如果用户请求的是HTML文件，则Web服务器找到对应HTML文件后，打开HTML文件，并将HTML代码响应给客户端。（5）浏览器收到Web服务器的响应后，接收并下载服务器端的HTML静态代码，然后浏览器解析代码，最终将网页呈现出来。1.2.2 动态HTML的工作流程
相比静态HTML，动态网页中包含动态技术，所以呈现给用户的页面都是经过动态技术的解析生成相应的静态内容之后再呈现给用户的。所以，动态HTML的工作流程相比静态HTML多了几个步骤，大致可以分为以下几步：（1）用户通过浏览器输入要访问的URL地址。（2）浏览器查找域名对应的IP地址。（3）浏览器查找到对应主机的IP地址后，与对应主机的Web服务器建立连接，通过HTTP协议向Web服务器发送请求，请求服务器上相应目录下的文件。（4）Web服务器收到请求后，在其所管理目录中找到相应文件。若用户请求的是动态页面文件，如PHP，则Web服务器将找到的动态页面文件交给相应的应用服务器（比如PHP）处理（Web服务器本身不处理动态页面文件）。（5）应用服务器接收并打开动态页面，再通过应用服务器将动态页面数据解释生成HTML静态代码，并将HTML静态代码交还给Web服务器，Web服务器将接收到的HTML静态代码输出到客户端浏览器。（6）浏览器收到Web服务器的响应后，接收并下载服务器端的HTML静态代码，然后浏览器解析代码，最终将网页呈现出来。
可见，相比静态网页，动态网页多了通过应用服务器将动态页面解析为静态页面的过程，所以通常静态网页会比动态网页加载速度快。
1.3 制作一个完整的HTML 5网页
前面两节介绍了一些网页与网站的基础知识，本节就来动手制作一个完整的HTML 5网页，其中包括搭建上机练习环境与完成第一个网页两部分。1.3.1 搭建上机练习环境
要制作HTML 5网页，有两样东西必不可少：一个是文本编辑器，用于编写HTML；另一个是网页浏览器，用来运行HTML网页。因为本书所介绍的均为静态HTML的知识，所以不用安装专门的Web服务器环境，使用系统自带的浏览器直接打开即可。
对于文本编辑器，没有特别要求，甚至可以使用系统自带的记事本。但一些高级的文本编辑器可以大大提高编写效率，如EditPlus、NotePad++、UltraEdit等，读者选择一款使用即可。
对于浏览器，建议读者选用最新版的、支持HTML 5的浏览器，如Goole Chrome等。本章代码均基于Chrome浏览器运行。1.3.2 完成第一个网页
下面用HTML完成第一个网页，该网页内容较为简单，除基本的HTML标签外，网页内没有其他内容，只显示“Hello World!”一句话。新建一个文本文档，改名为“hello.htm”，输入示例1-1所示的代码。【示例1-1】第一个网页
以上代码就是一个标准的HTML网页结构，包括、
、等部分，关于这些标签的具体内容将在后续章节详细介绍。运行以上代码（用鼠标右键单击文件，在弹出的菜单中选择“打开方式”→“Google Chrome”），结果如图1.2所示。图1.2 第一个网页执行效果
1.4 技术解惑
1.4.1 HTML与HTML 5是两种网页语言吗关于HTML与HTML 5，如果读者理解起来有困难，则只需了解HTML 5是HTML的最新版本，包含许多更先进的功能，使用HTML 5可以比HTML更简单地实现一些特殊效果，使用户创建网络应用更加容易。1.4.2 如何区分静态网页与动态网页
静态网页与动态网页是两个很重要的概念，理解起来也会有一定难度。有一种更为直观的方法区分这两者，如果网页的扩展名为.php、.asp、.jsp等，则通常是动态网页，这些页面需要经过专门的服务器解释执行；而如果网页的扩展名为.htm、.html等，则很大可能是静态网页。当然，也有部分伪静态网页是用动态网页解释之后生成的HTML文件，这些另当别论。HTML 5网页的结构视频
第2章 HTML 5网页的结构
要学习HTML 5，首先要了解HTML 5网页的结构。通过上一章的学习，读者对网页、网站有了一个大概的了解，同时还尝试制作了一个简单的网页，但对于其中的标签却不甚了解。这一章我们就来学习HTML 5网页的结构。
2.1 动手解构一个HTML 5页面
要学习HTML 5，最便捷的方法就是分析现成的HTML 5页面代码。用户可以使用浏览器浏览知名站点，然后通过查看源代码来获取网页的HTML代码。
利用1.1.2节所介绍的方法获取网页的源代码，然后就可以分析HTML 5页面的编写方法了。这里笔者就不浪费版面截图了，读者可以先浏览代码，然后笔者会逐步给出解读。
2.2 HTML的基础知识
解构完一个HTML 5页面之后，就需要对其中的HTML 5代码进行学习。这一节我们来介绍HTML的基础知识，其中包括HTML的基础语法和HTML文档的基本骨架。通过本节的学习，读者会对HTML有一个初步的认识。2.2.1 HTML的基础语法
区别于C语言、Java语言这类高级语言，HTML 不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色显示等，这些都是利用HTML标记来实现的。
HTML 标记以“<”与“>”来标记。HTML中的标记按其是否成对出现，可以分为单标记与双标记两类。
单标记是指只有一个标记的HTML标记，按标记有无属性值又可以分为无属性值单标记和有属性值单标记。（1）无属性值单标记是单一型的标记，没有任何属性值。其语法格式如下：
最常见的无属性值单标记是
，表示换行符。（2）有属性值单标记相比无属性值单标记多了属性值，用户可以为其指定各种属性。其语法格式如下：
比如，指定一个宽度为80%的水平线可以使用以下代码：
双标记是指标记通常成对出现，一个表示标记开始，另一个表示标记结束。其语法格式如下：
无属性值双标记除了标记并没有属性及属性值，比如常见的页面标题标记：
有属性值双标记可以为标记的属性设置各种属性值，如果没有则采用默认值。其语法格式如下：
比如，为页面添加背景颜色就可以使用如下代码：
其中，
为双标记，bgcolor为其属性背景颜色，red为属性bgcolor的属性值。除普通标记外，HTML中也可以使用注释。其语法格式如下：
HTML中的注释都放在注释符号“”之中，即以“”结束，其中所出现的内容并不会被显示，注释用于对HTML代码的解释说明。2.2.2 HTML文档的基本骨架
网页通常都是由四对标记来构成文档的骨架的，内容如以下代码所示：
以上代码中的、
、上一节介绍了HTML的基础语法及HTML文档的基本骨架，这一节将接上一节的内容，来介绍HTML文档中的各种标签。2.3.1 样本代码DOCTYPE
首先我们来看样本代码DOCTYPE， 声明不是HTML标签，它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行，位于标签之前。
在HTML 4.01中， 声明引用DTD，因为HTML 4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML 5不基于SGML，所以不需要引用DTD。
提示：请始终向HTML文档中添加 声明，这样浏览器才能获知文档类型。
在HTML 4.01中有3种 声明，而在HTML 5中只有一种，即：2.3.2 开始标签＜html＞
标记告知浏览器其自身是一个HTML文档。与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
正如前面所介绍的那样，文档的头部由
标签定义，而主体由标签定义。…标识网页文件的开始与结束，所有的HTML元素都要放在这对标签中。2.3.3 头部标签和头部标签的对象标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意：应该把
标签放在文档的开始处，紧跟在后面，并处于标签之前。另外，请记住始终为文档规定标题!2.3.4 标题标签＜title＞HTML 代码文档的编写没有严格的格式化要求，设计人员甚至可以将所有文档写在一行，就像如下代码这样：
将以上代码保存为unfit.htm。
虽然以上代码也能正常被浏览器解析，但这样非常不便于阅读及后期管理。为了使HTML文档更容易阅读，同时也为了更容易后期维护，建议读者在书写HTML文档时遵循如下几个原则：（1）一句HTML代码占用一行。（2）采用必要的缩进格式。
上面的代码按这样的原则重新编排后如下所示：
将以上代码保存为fit.htm。
很明显，重新编排后的代码更清晰，结构也更明了，更利于阅读及维护。所以，读者在编写HTML代码时要养成良好的书写习惯。
2.4 拓展训练
2.4.1 训练一：制作一个HTML网页，包含HTML基本标记，页面显示“HelloWorld！”【拓展要点：对HTML结构的掌握程度】
HTML网页的基本结构是学习HTML最基础的内容，所以一定要熟练掌握。【代码实现】（略）2.4.2 训练二：制作一个HTML网页，要求在浏览器标题栏中显示“Hello World！”【拓展要点：对HTML文档中＜title＞标签的掌握程度】
2.5 技术解惑
2.5.1 HTML标签需要死记硬背吗HTML作为一种文本标记语言，包含大量的HTML标签，在初学阶段，用户不用刻意去记忆种类繁多的标签，只需要知道常用的HTML标签，如、
、理解HTML网页的结构对于学习HTML至关重要，用户只需了解HTML通常包括根标签及根标签中的头部标签
与主体标签即可。通常需要在页面载入前就加载的内容，比如JavaScript代码、CSS样式等内容及元信息放在中，其他需要在页面上显示的内容均放在标签中。网页中的文本与段落视频第3章 网页中的文本与段落
通过上一章的学习，读者在网页整体结构方面有了比较系统的认识。这一章我们来学习网页中的文本与段落，文本是表达信息的一种重要手段，所以在很多网页中，文字信息占有相当大的比重，比如各种新闻、资讯或网上小说、网络用户留言等，都需要文本作为载体。本章就来详细介绍网页中的文本与段落。
读者不仅希望在网页中表现文字，更希望对网页中的文字进行排版、修饰。本章我们将学习文字的简单排版、修饰、滚动文字及超级链接。超级链接在网站开发中无处不在，是网页中的重点。
3.1 文本的排版格式
排版在使用文本时具有举足轻重的作用，良好、清晰的排版能够使用户快速获取信息。而糟糕的排版格式则会使用户摸不着头脑，不知道网页所要表达的重点，而不尊重用户行为的网站往往会失去更多用户。所以，这一节介绍一些常用的网页排版技巧。3.1.1 写一行换一行
一般页面文本每行的字数在35个左右，没有严格规定，用户可以根据自己的实际情况进行操作，但要遵循的原则是每行控制在恰当的长度。太短了用户需要频繁阅读下一行；反之，一行内容太多需要用户去拖动浏览器的水平滚动条，这样都会令用户阅读时很不舒服。
在HTML文档中，可以使用两类标签使文本换行，一类是段落标签
，另一类是换行符
。
下面来介绍一下这两者的区别与联系。两者的相同之处是都有换行的属性及意思。区别是
只需单独使用即可，而
和
是成对使用的。另外，标签是小换行提行，并不分开各行；
标签是大换行，分开各行。
换行标签
是一个没有结尾的标签，HTML文件中任何位置只要使用了
标签，当文件显示在浏览器中时，该位置之后的文字将显示在下一行，
是起到换行作用的标签。
在一般的文字文件中，只要按下键盘上的“Enter”健便会发生换行，但是在HTML文件中按“Enter”键换行是没用的，我们必须用特定的标签
来换行。
接下来再来看看段落标签
的使用。由
标签所标识的文字，代表同一个段落的文字。在浏览器中，不同段落的文字间除了换行，有时还会以一行空白加以间隔，以便区别出文字的不同段落。其语法格式如下：
但在一般的应用中，往往只会在要区分为段落的文字后加上一个
标签。
下面的代码演示了如何使用
与
标签。【示例3-1】换行符的使用【代码解析】以上代码在第9行加入了
标签，在第11行使用了
标签。
执行该代码，浏览效果如图3.1所示。图3.1 使用换行符3.1.2 在页面中使用空格
排版的另一个常用技巧就是首行缩进，通常人们习惯在段首行缩进两个字符。这可以通过使用空格来实现。但在使用编辑器编辑HTML文档时，输入多个空格会被默认为只有一个空格，这时需要使用特殊的空格符号放置在文本中。
在HTML中使用特殊符号“ ”来表示空格。也就是说，在HTML源文档中输入“ ”，在实际浏览网页时会被显示为空格。
下面的代码演示了如何在文本中使用空格符号来实现首行缩进的效果。【示例3-2】在页面中使用空格【代码解析】以上代码在第8行使用了普通空格，在第10行使用了一组特殊符号“ ”来表示空格。
执行该代码，浏览效果如图3.2所示。
试读结束[说明：试读内容隐藏了图片]