交互式Web前端开发实践

本书以Web前端开发工程师在Web前端开发过程中的实际需要和应该掌握的技术为基础，全面、系统地介绍了Web前端开发所涉及的相关知识点和开发技巧，涵盖网页设计基础知识、高级编程知识：HTML（含HTML 5）、CSS（含CSS3）、JavaScript基础及jQuery框架。每章都配置了大量的实用案例，图文并茂，效果直观。  

本书以Web前端开发过程中的实际需要和应该掌握的技术为基础，全面、系统地介绍了Web前端开发所涉及的相关知识点和开发技巧，涵盖HTML（含HTML 5）、CSS(含CSS 3)、JavaScript基础及jQuery框架等网页设计基础知识、高级编程知识。每章都配置了大量的实用案例，图文并茂，效果直观。
本书分3部分，共8章。*部分为基础篇，主要介绍Web前端开发基础知识、HTML标记语言、HTML 5新特性、CSS基础知识、盒子模型、CSS DIV布局、JavaScript语言及网页设计方法等内容；第二部分为进阶篇，详细介绍了JavaScript的面向对象编程思想及常用的JavaScript框架，重点介绍了jQuery框架的使用，并辅以大量的案例和综合实例进行讲解，让读者能通过本阶段的学习提高前端设计和编程的能力；第三部分为实战篇，综合运用前两部分的理论知识，结合软件开发流程，详细讲解了“点餐系统”前端的功能设计、编程实现及各方面的内容和技巧。
本书可作为从事Web前端开发、网页设计与制作、网站开发及网页编程等行业人员的参考书，也可作为应用型本科院校及培训学校计算机及相关专业的教材。

近十年来，信息技术产业发展态势良好，在我国经济发展中起着非常重要的推动作用。信息技术产业也是“十三五”期间被列为重点发展的产业，市场前景广阔，Web前端开发工程师的需求量大幅增加。一名合格的Web前端开发工程师必须掌握基本的Web前端开发技术，包括CSS、HTML、DOM、JavaScript、ajax等，在掌握这些技术的同时，更要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和潜在的Bug。一名合格的前端工程师除了掌握网站性能优化、SEO和服务器端的基础知识等知识结构之外，还必须学会运用各种工具进行辅助开发，比如处理IE系列浏览器兼容性问题的IEtester，Firefox排错用的Firebug、FlashFirebug、Debugger等调试工具。总而言之，一名合格的Web前端开发工程师不但要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等内容。本书基于HTML、CSS、jQuery、ajax等技术编写，重点突出交互式的Web前端技术实现。本书囊括了编者及其团队成员多年Web前端开发与设计的经验，是一本可以使读者快速建立规范的Web前端开发意识和工程化软件开发思想的书籍，是一本可以使读者快速提高Web前端开发技能并快速达到Web前端开发工程师岗位任职能力要求的书籍。本书内容编排结构合理，知识由浅入深，以较全面的知识点、丰富的案例、完整的综合项目实践为主要内容，结合分层开发思想，循序渐进地引导读者在基础篇学习基础理论，在进阶篇学习编程技巧，在高级篇通过综合项目实战提高Web前端开发技能。本书由冷亚洪、黄炜负责全书的编写、统稿、知识点及案例设计。具体编写分工为: 第1章由李发陵编写，第2章由冷亚洪编写，第3、4章由阚洪编写，第5、6章由宋宇编写，第7、8章由黄炜编写。本书的特色如下: （1） 本书内容编排结构合理，知识点由浅入深，循序渐进地引导读者快速入门，并能提高初级及以上读者的实际应用水平，让读者能够快速适应对Web前端开发工程师岗位的新要求。（2） 本书采用“案例制”和“项目制”相结合的思想，通过大量的案例帮助读者对知识点的理解及掌握，使用综合项目案例（在线订餐系统）提升读者的综合应用能力。（3） 本书重点突出Web的交互式开发，结合软件的面向对象和分层开发思想进行编程，让读者掌握的不仅是传统的HTML DIV CSS jQuery编程，而且会掌握软件开发思想，掌握前端与后台之间的交互式设计与实现。（4） 本书在综合项目案例部分，提供了Java和C#两种语言实现后台的数据处理，方便Java和C#方向的读者学习。（5） 本书使用市场上流行的软件开发技术，使读者在完成本书的学习后，可以无缝地过渡到对应的工作岗位。我们期望本书能为阅读者们提供以下帮助。（1） 软件类应用型本科或高职高专人才培养的实训教材。（2） Web前端开发工程师的岗前学习教材。（3） 培训机构的培训教材。（4） Web前端开发工程师的能力提升学习书籍。在本书的编写过程中，参阅了大量的资料，尤其是参考文献中列出的资料。在此对所有资料的编写者表示衷心的感谢！由于本书内容涉及面广，加之编者的水平有限，不当之处在所难免，恳请广大读者朋友批评、指正，我们将不胜感激，编者的邮箱是[email protected]。 
编者2017年1月

评论

第3章CSS层叠样式表3.1CSS 2基础〖*4/5〗3.1.1CSS编写规范CSS（cascading style sheet）称为层叠样式表，也叫CSS样式表或样式表，文件的扩展名为.css，用来设置Web页面中各种标签的样式，如设置文字大小、颜色、行高、背景等。所谓“层叠”是指当在 HTML文件中引用多个样式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突。CSS样式表是一种控制网页样式，并将样式信息与网页结构分离的一种标记性语言。1. CSS基础语法CSS样式表由若干条样式规则组成。这些样式规则可以应用到HTML的标签中来定义页面的显示效果。样式规则由选择符（selector）、属性（property）及属性值（value）组成，格式如下: selector{property:value;property:value;property:value;…}从以上的格式中可以看出，一条样式规则包含一个选择符和若干属性及对应的属性值。属性及属性值用大括号包含起来；属性与属性值之间用冒号“:”隔开；属性值对之间用分号“;”隔开。如为段落标签

设置样式如下:p{font-family:”微软雅黑”;font-size:24px;color:#ff0000;}以上样式设置段落文字字体为微软雅黑，字体大小24像素，字体颜色为红色。2. CSS样式表类型CSS样式表有三种类型: 行内样式表、内部样式表和外部样式表。(1) 行内样式表行内样式表在这三种样式表中是简单、直观的一种样式表。它是直接将样式规则写入HTML文件中标签的style属性中，以属性值的形式存在。如对段落标签设置样式如下:

段落文字

行内样式表是将样式规则以属性值的形式直接写入标签的style属性中，并直接作用于该标签。虽然简单直观，但如果其他的标签或者相同的标签要采用一样的样式，也需要在标签中设置style属性，并设置同样的样式规则。这样整个HTML页面结构不但显得臃肿，还没有起到页面结构和样式代码进行分离的作用，后期维护也很困难。因此，这种类型的样式表并不常用。(2) 内部样式表内部样式表是将样式规则写在和标签之间，并通常将该段样式代码添加到HTML页面的头部，即与标签内部。其格式如下:

P{font-family:”微软雅黑”;font-size:24px;color:#ff0000;}内部样式表虽然没有完全将页面结构和样式表分离开来，但对于一些简单且某些标签样式需要统一的页面来说，使用内部样式表比使用行内样式表的页面代码结构更优化。(3) 外部样式表外部样式表是用户重新创建的一个扩展名为.css的文件。样式规则按照语法格式直接写入该文件中，不再添加任何标签。3. 文档中如何引用CSS文件行内样式表和内部样式表都是直接写在HTML文档中的，所以不存在引用的问题。但外部样式表是一个独立的文件，与HTML文档没有关联性。HTML文档要使用外部样式表呈现出样式的显示效果，就必须将两个文档关联起来。它们是如何联系的呢？换句话说，HTML文档是如何引用CSS外部样式表的呢？有两种方式: 链接和导入。下面分别介绍。(1) 链接外部样式表链接外部样式表是将外部样式表文件通过标签链接到HTML文档的头部即与之间，代码如下：

其中，属性rel表示链接到样式表，值为stylesheet。属性type表示样式表类型为CSS样式表。属性href指定CSS样式表文件的路径，可以使用相对路径或者路径。链接外部样式表是CSS使用中频繁、实用的方式，也是目前制作HTML页面常用的一种方式。它的优势就是将页面结构HTML代码和样式文件CSS代码实现了完全的分离。同一个CSS文件可以被多个HTML文件链接，一个HTML文件也可以链接多个CSS文件。为了实现相同的样式风格，可以将同一个CSS文件链接到网站所有的页面中。如果需要修改样式，只需修改这一个CSS文件即可。这使得程序员在进行Web前端开发和后期的维护时都十分方便、有效。(2) 导入外部样式表导入外部样式表是将外部样式表文件通过使用@import导入内部样式表与标签中，且放在内部样式表的开始部分。代码如下：

@import “.css”;…导入外部样式表相当于将外部样式表导入内部样式表中，与链接外部样式表类似，同样实现了结构代码与CSS代码的分离。一个HTML文件中可以导入多个CSS文件，一个CSS文件同样可以被多个HTML页面导入。(3) 链接外部样式表与导入外部样式表的区别链接外部样式表和导入外部样式表从本质上来说都实现了结构代码与样式代码的分离。但它们的语法和运作方式有所不同。从语法上看，链接外部样式表采用的标签将样式文件链接进了HTML文件。导入外部样式表采用的是@import，将样式文件导入了HTML文件的内部样式表中。从运作方式来看，链接外部样式表是HTML文件中的标签需要什么样的样式风格时才将外部样式表链接进HTML文件。导入外部样式表则是在HTML文件初始化时，即浏览器加载HTML文件时，就将外部样式表中所有的样式代码导入HTML文件的内部样式表中。导入方式相较于链接方式在浏览器加载页面时比较耗时，但显示效果没有任何差别。在HTML文档中引用CSS文件不管采用哪种方式，好是根据需求灵活处理。3.1.2CSS选择符CSS选择符也叫CSS选择器，HTML页面中的样式都是通过CSS选择器来进行控制的。CSS选择器可以是HTML的结构标签、类、ID或者是标签的某种状态（如“a:hover”）。因此，可以把CSS选择器分为标签选择器、类选择器、ID选择器和伪类选择器。1. 标签选择器标签选择器是使用HTML文档中的标签名作为选择符来定义样式规则。如下面的代码定义了部分标签的样式。body,p,a,div,td,th{font-size:12px;color:#000000;}通过上面所列举的标签选择器的样式定义，只要页面中出现该标签的地方，就会显示出所定义的样式风格。要设置所有的标签，并不需要将HTML中所有的标签名写出来。CSS提供了通配符选择器“”，它可以代表所有的标签，定义如下：{margin:0; padding:0;}2. 类选择器使用标签选择器可以定义页面中所有标签的显示样式，但是如果要对同一种标签在同一个页面中的不同地方使用不同的样式，仅依靠标签选择器是实现不了的。这时就需要类选择器来达到目的。HTML中的每一个标签都具有class属性，并给该标签定义一个类名，即class属性的属性值。这样相同的标签可以具有不同的类名。在设置样式时通过类名来定义不同的样式。标签的类名作为CSS的类选择器时需要在类名前添加符号“.”，用以定义样式规则，代码格式如下: .black{font-size:12px;color:#000000;}或者p.black{font-size:12px;color:#000000;}前提是存在结构代码:

段落文字

类选择器所定义的样式只呈现在具有该类名的标签的显示效果。如果标签中没有该类名，则该标签在页面上的显示效果不具有该类所定义的样式风格。某类选择器所定义的样式还可以应用到其他标签中。如上面定义的“.black”除应用到

标签中，还可以应用到