本书基于丰富的实例, 着重介绍网页设计技巧、HTML5、CSS3、DIV布局、Javascript、JQuery等WEB技术的基本原理和开发方法, 深入解析典型综合案例的分析与构建过程, 使读者由浅入深、循序渐进地掌握开发基于WEB应用程序的方法和技术, 具有很强的实用性。
1、内容全面，由浅入深。由网页基本概念开始，逐步介绍网页配色技巧、HTML（及HTML5）、CSS（及CSS3）、布局技术、JavaScript、JQuery等网页设计技术。
2、结合标准，易于提高。本着一切的标准出发，紧密结合W3C的WEB标准来控制界面实现，既可帮助读者牢固掌握基础知识，又具有一定的理论高度，有助于读者进一步提高。
3、技术先进，符合潮流。对目前市场主流的网页设计组合DIV+CSS以及响应式布局技术进行详细讲解，能够帮助读者设计出具有一定水准的网页。基于微软Visual Studio工具进行设计和开发，更好地贴近技术发展的时代脉搏。
4、教学灵活，强化理解。各章节通过实例详细演示制作过程，并提供大量设计技巧、注意事项和常见问题解答。
5、综合应用，实战演练。提供完整、翔实的综合案例，详细解析各类网站的页面设计技术，予以全程设计跟踪指导，将作者的经验融汇于知识中，有益于初学者更快地上手和掌握。
本书重视实践，以一个完整、翔实的实例为主线，在各章中对HTML5、CSS3、布局技术、JavaScript、jQuery等知识点进行详解，并在*后对该实例进一步汇总，完整再现网页设计从初步规划，到HTML文档创建，再到表现形式设计的过程，适合教师教学和学生自学。本书内容全面，深入浅出，实例丰富，紧跟技术发展潮流，对目前流行的HTML、CSS3和jQuery等内容通过实例进行了详细的介绍，有助于提高学生的实际动手能力，在实践方面具有突出的优势。
主要内容
全书分为三个部分，共10章，建议学时为48，主要内容如下：
第1部分为基础篇，包括第1~第6章。第1章重点介绍网站的基础知识、基本架构，以及网页和标记语言的相关概念； 第2章重点介绍网页前端设计的基础知识，包括网页配色、布局及各元素设计等，掌握一些简单实用的设计技巧和工具软件； 第3章重点介绍HTML与XHTML文档结构、标签的使用及它们的区别； 第4章重点介绍层叠样式表（CSS）的基本概念与用途、层叠样式表的规则和常用的编写方法，以及美观的页面效果； 第5章通过对具体实例的详细剖析来讲解DIV+CSS的网页布局技术及优势，然后介绍针对不同类型终端而采用的响应式布局方法和VS中的母版； 第6章重点介绍JavaScript语言的基本用法和JavaScript的对象概念。
第2部分为进阶篇，包括第7~第9章。第7章重点介绍HTML5的相关知识以及它的新特征，并熟悉HTML5的基本开发环境和基本语法等； 第8章重点介绍CSS3的新增用途，以及CSS3新增选择器的规则和常用编写方法，并通过实例分析其各种使用技巧； 第9章重点介绍jQuery库及引入jQuery的方法和基本语法，以及常用的jQuery选择器及操作DOM对象的方法，理解并应用jQuery中的重要事件。
第3部分为案例篇，即第10章。该章包括两个完整的案例，一个涉及网站的开发，以“等级考试网上报名系统”为例，介绍各页面设计与实现的完整过程； 另一个涉及网站首页UI的设计，以设计一个茶楼营销及形象网站为例，详述网站前端UI设计的整个流程与具体工作，为读者进行网页UI设计案例练习提供参考。
本书特色
（1） 内容全面，由浅入深。由网页基本概念开始，逐步介绍网页配色技巧、HTML（及HTML5）、CSS（及CSS3）、布局技术、JavaScript、jQuery等网页设计技术。
（2） 结合标准，易于提高。本着一切的标准出发，紧密结合W3C的Web标准来控制界面实现，既可帮助读者牢固掌握基础知识，又具有一定的理论高度，有助于读者进一步提高。
（3） 技术先进，符合潮流。对目前市场主流的网页设计组合DIV+CSS以及响应式布局技术进行详细讲解，帮助读者设计具有一定水准的网页。基于微软公司的Visual Studio工具进行设计和开发，更好地贴近技术发展的时代脉搏。
（4） 教学灵活，强化理解。各章节通过实例详细演示制作过程，并提供大量设计技巧、注意事项和常见问题解答。
（5） 综合应用，实战演练。提供完整、翔实的综合案例，详细解析各类网站的页面设计技术，予以全程设计跟踪指导，将作者的经验融汇于知识中，有益于初学者更快地上手和掌握。
本书作者均为重庆理工大学计算机学院*线的骨干教师，教学实践经验丰富。本书由王柯柯任主编，第1、第3、第5和第10章案例1由王柯柯编写，第2和第10章案例2由周宏编写，第6和第9章由刘亚辉编写，第4和第8章由倪伟编写，第7章和习题部分由黄丽丰编写。
由于笔者水平有限，书中难免存在不足和疏漏之处，请广大读者批评指正。同时，为便于教学，本书中引用了一些网站的界面图和一些书籍的封面，在此对其制作者一并表示感谢。
编者
2017年1月
作者：王柯柯、周宏、刘亚辉、倪伟、黄丽丰
第3章HTML&XHTML 【学习目标】 通过本章的学习，了解并掌握HTML与XHTML文档的结构、标签的使用及它们的区别，能阅读HTML、XHTML文档，并独立编写一些简单而实用的HTML文档。 【本章要点】 HTML文档结构； HTML常用标签； XHTML文档结构。
3.1HTML标记语言 标记语言不同于一般的程序语言，主要用来定义文档规则和描述文档结构。例如，它可以指示一段文本为段落，一段文本为置顶的标题，而另一段文本为底部的备注信息等，通过在文档中放置代码和指定的标记即可指示这些内容。标准通用标记语言(Standard Generalized Markup Language，SGML)是*基础的标记语言，其他标记语言(如HTML、XML、XHTML)都是在SGML的基础上发展起来的，但是它们又各自根据不同的使用领域对SGML有着不同的扩展，从而形成了更具针对性的标记语言。 超文本标记语言(Hyper Text Markup Language，HTML)是专门用于编写Web应用文档的语言，通过相关代码和各种HTML标签的使用，可以将数据以网页的模式，在各种浏览器中显示出来。 HTML中的“超文本”是指页面内可以包含图片、链接、音频及程序等非文字的元素； “标记”说明它不是程序语言，只是由文字及标记组合而成的语言。 首先以一个经典的“Hello World！”实例来初步认识HTML标记语言，具体代码如下： 示例31
Hello World Hello World! 这是*个HTML文件，该页的名字叫作 "hello World" 一个HTML文档主要包括两部分： 文档定义(DTD)和文档结构。 其中DTD指定了该HTML文档必须遵循DTD中制定的文件结构。文档结构就是为*终页面中呈现的内容所建立的HTML代码设计…… DTD(Document Type Definition)文档类型是由W3C组织所制定的，其概念源于SGML，每一份SGML文件均有相对应的DTD。 上述代码描述了*基本的Web文档结构，对于其中各段代码的具体含义目前暂且不讨论，来看该段代码在IE浏览器中运行之后的效果，如图31所示。 图31“Hello World！”运行界面 从图31中可以看到，示例31定义了一个名称为“Hello World！”的标题，并设置了两段文字，分析其代码可以得到以下三点：
（1） 网页中呈现的是HTML文档中标签和标签之间的内容。
（2） 标签和标签定义了一个内容为“Hello World！”的标题。默认情况下，标题的文字比其他的文本字体要大，而且设置了加粗样式。
（3） 标签 和标签 用来定义一个段落，置于该标签中的内容同属于一个段落。 以上三点就是根据网页中实际显示的效果所做的初步分析，可见，HTML标记语言就是通过一系列的HTML标签规范各种信息数据的显示结构，从而保证能*终被客户端的浏览器解析并正确执行。 事实上，一个网页无论它的表现形式如何的五花八门、生动活泼，无论它所承载的数据信息如何的庞大和复杂，*终都是通过HTML标记语言定义和生成的。之后，浏览器将这些HTML语言“翻译”过来，并按照其定义的格式显示。 与普通的数据文件(如文本文件、音频文件等)相同，网页文件同样具有扩展名。简单的网页文件的扩展名有html(或htm)，根据网页程序开发环境的不同，网页的扩展名还有asp、php、jsp、aspx等。无论开发人员采用的是什么技术，*终生成的网页文件都具有标准的HTML文档结构和代码，因此HTML是*基本的网页代码语言。
3.1.1HTML文件基本结构 一个内容丰富的网页并非像以上的代码那么简单，往往承载了大量的信息，如文字、图片、音频、动画等，因此，其文档结构也会根据内容的多少和表现形式的不同变得更加复杂。例如，在新浪网(http://www.sina.com.cn)首页的空白处右击，选择“查看源文件”命令，就可以看到形成该页的HTML文档竟然有几千行之多，但万变不离其宗，所有的网页都有着固有的文档结构。这里以Visual Studio软件为例(其文件扩展名为aspx)，其页面文件主要包含如图32所示的三部分。 第3章HTML&XHTML 【学习目标】 通过本章的学习，了解并掌握HTML与XHTML文档的结构、标签的使用及它们的区别，能阅读HTML、XHTML文档，并独立编写一些简单而实用的HTML文档。 【本章要点】 HTML文档结构； HTML常用标签； XHTML文档结构。
3.1HTML标记语言 标记语言不同于一般的程序语言，主要用来定义文档规则和描述文档结构。例如，它可以指示一段文本为段落，一段文本为置顶的标题，而另一段文本为底部的备注信息等，通过在文档中放置代码和指定的标记即可指示这些内容。标准通用标记语言(Standard Generalized Markup Language，SGML)是*基础的标记语言，其他标记语言(如HTML、XML、XHTML)都是在SGML的基础上发展起来的，但是它们又各自根据不同的使用领域对SGML有着不同的扩展，从而形成了更具针对性的标记语言。 超文本标记语言(Hyper Text Markup Language，HTML)是专门用于编写Web应用文档的语言，通过相关代码和各种HTML标签的使用，可以将数据以网页的模式，在各种浏览器中显示出来。 HTML中的“超文本”是指页面内可以包含图片、链接、音频及程序等非文字的元素； “标记”说明它不是程序语言，只是由文字及标记组合而成的语言。 首先以一个经典的“Hello World！”实例来初步认识HTML标记语言，具体代码如下： 示例31 Hello World Hello World! 这是*个HTML文件，该页的名字叫作 "hello World" 一个HTML文档主要包括两部分： 文档定义(DTD)和文档结构。 其中DTD指定了该HTML文档必须遵循DTD中制定的文件结构。文档结构就是为*终页面中呈现的内容所建立的HTML代码设计…… DTD(Document Type Definition)文档类型是由W3C组织所制定的，其概念源于SGML，每一份SGML文件均有相对应的DTD。 上述代码描述了*基本的Web文档结构，对于其中各段代码的具体含义目前暂且不讨论，来看该段代码在IE浏览器中运行之后的效果，如图31所示。 图31“Hello World！”运行界面 从图31中可以看到，示例31定义了一个名称为“Hello World！”的标题，并设置了两段文字，分析其代码可以得到以下三点：
（1） 网页中呈现的是HTML文档中标签和标签之间的内容。
（2） 标签和标签定义了一个内容为“Hello World！”的标题。默认情况下，标题的文字比其他的文本字体要大，而且设置了加粗样式。
（3） 标签 和标签 用来定义一个段落，置于该标签中的内容同属于一个段落。 以上三点就是根据网页中实际显示的效果所做的初步分析，可见，HTML标记语言就是通过一系列的HTML标签规范各种信息数据的显示结构，从而保证能*终被客户端的浏览器解析并正确执行。 事实上，一个网页无论它的表现形式如何的五花八门、生动活泼，无论它所承载的数据信息如何的庞大和复杂，*终都是通过HTML标记语言定义和生成的。之后，浏览器将这些HTML语言“翻译”过来，并按照其定义的格式显示。 与普通的数据文件(如文本文件、音频文件等)相同，网页文件同样具有扩展名。简单的网页文件的扩展名有html(或htm)，根据网页程序开发环境的不同，网页的扩展名还有asp、php、jsp、aspx等。无论开发人员采用的是什么技术，*终生成的网页文件都具有标准的HTML文档结构和代码，因此HTML是*基本的网页代码语言。
3.1.1HTML文件基本结构 一个内容丰富的网页并非像以上的代码那么简单，往往承载了大量的信息，如文字、图片、音频、动画等，因此，其文档结构也会根据内容的多少和表现形式的不同变得更加复杂。例如，在新浪网(http://www.sina.com.cn)首页的空白处右击，选择“查看源文件”命令，就可以看到形成该页的HTML文档竟然有几千行之多，但万变不离其宗，所有的网页都有着固有的文档结构。这里以Visual Studio软件为例(其文件扩展名为aspx)，其页面文件主要包含如图32所示的三部分。
新书资讯