精通HTML5 + CSS3+JavaScript网页设计(txt+pdf+epub+mobi电子书下载)

作者：刘增杰,臧顺娟,何楚斌

出版社：清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

精通HTML5 + CSS3+JavaScript网页设计试读：

使用HTML5+CSS3+JavaScript技术构建网页，以其标准布局和精美样式，成为Web 2.0众多技术中不可替代的弄潮儿。其应用范围也越来越广，例如门户网站、BBS、博客、在线视频等。而HTML5和CSS3技术的推出结合JavaScript技术，使网页样式布局和美化达到了一个不可思议的高度。引领读者快速学习和掌握新的设计模式是本书的初衷。

本书内容

第1章是HTML5概述。包括HTML5的基本概念、HTML5文件的编写方法和使用浏览器查看HTML5文件。

第2章介绍HTML5网页文档结构。包括Web标准、HTML基本标记和综合案例中符合W3C标准的HTML5网页。

第3章介绍HTML5网页中的文本和图像。包括添加文本、文本排版、文字列表和网页中的图像等。

第4章介绍用HTML5建立超链接。包括URL的概念、超链接标记、创建热点区域和浮动框架iframe等。

第5章介绍用HTML5创建表格。包括表格基本结构及操作、完整的表格标记和制作计算机标价表等。

第6章介绍使用表单。包括表单概述、表单基本元素的使用和表单高级元素的使用等。

第7章是CSS3概述。包括CSS3基本概念、编写与浏览CSS3，以及在HTML5中使用CSS3的方法。

第8章介绍CSS3中文字与段落属性。主要包括字体属性、文本高级样式和段落属性。最后通过两个综合实例，进一步讲述了如何设置公司标题和旅游网页混排的方法和技巧。

第9章介绍用CSS3设置表格和表单的样式。包括表格基本样式和CSS3与表单，并通过5个综合案例，进一步讲述表单和表格样式的制作方法和技巧。

第10章介绍CSS3美化图片。主要包括图片样式、图片的对齐和图文混排等。

第11章介绍CSS3美化背景与边框。主要包括背景相关属性、边框、圆角边框、图像边框和边距。最后通过1个综合实例，进一步讲述了如何制作网上书店圆角边框效果。

第12章是JavaScript概述。包括JavaScript简介、在HTML5文件中使用JavaScript代码等。

第13章介绍JavaScript语言基础。包括数据类型与变量、运算符与表达式、流程控制语句和函数等。

第14章介绍JavaScript内置对象。包括字符串对象、数学对象、日期对象和数组对象等。

第15章介绍JavaScript对象编程。包括文档对象模型、窗口对象、文档对象和表单对象等。

第16章介绍JavaScript操纵CSS3。包括DHTML简介、前台动态网页效果、JS控制表单背景色、文字提示和实现即时验证效果等。

第17章介绍HTML5、CSS3和JavaScript的搭配应用。包括打字效果的文字、文字升降特效、跑马灯效果、闪烁图片和向上移动的图片等。

第18章介绍HTML5绘制图形。包括canvas概述、绘制基本形状、绘制渐变图形、绘制变形图形、图形组合、绘制带阴影的图形、使用图像、绘制文字和图形的保存和恢复等。

第19章介绍在HTML5中的音频和视频。包括

第20章介绍企业门户型网站的综合实战案例。

本书特色

知识全面：知识由浅入深，涵盖了所有HTML5、CSS3和JavaScript知识点，便于读者循序渐进地掌握HTML5+CSS3+JavaScript网页布局技术。

图文并茂：注重操作，图文并茂，在介绍案例的过程中，每一个操作均有对应的插图。这种图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程以及效果，便于更快地理解和掌握。

易学易用：颠覆传统“看”书的观念，变成一本能“操作”的图书。

案例丰富：把知识点融汇于系统的案例实训当中，并且结合经典案例进行讲解和拓展，进而达到“知其然，并知其所以然”的效果。

贴心周到：本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“技巧”的形式进行了说明，以免读者在学习的过程中走弯路。

代码支持：本书提供实例和综合案例的源代码，可让读者在实战应用中掌握网页布局的每一项技能，使本书真正体现“自学无忧”，成为一本物超所值的好书。

读者可加入QQ群：221376441向作者索要源代码，也可在http://download.csdn.net/detail/brucexia/4320365自行下载。

读者对象

本书是一本完整介绍HTML5+CSS3+JavaScript网页制作技术的教程，内容丰富，条理清晰，实用性强，适合如下读者学习使用：

●　对网页制作有兴趣的读者，可以快速上手制作精美网页。

●　对从事美工工作的读者，是手边必不可少的工具书。

鸣谢

本书作者长期从事网站开发实训的培训工作。参与本书编写人员除了封面署名人员以外，还有王英英、苏士辉、肖品、张少军、孙若淞、宋冰冰、王维维、梁云亮、程铖、陈伟光等人。虽然倾注了编者的努力，但由于水平有限、时间仓促，书中难免有错漏之处，欢迎批评指正。如果遇到问题或有好的建议，敬请与我们联系，我们将全力提供帮助。编　　者2012年6月第1章HTML5概述目前网络已经成为人们生活、工作中不可缺少的一部分，网页设计也成为学习计算机的重要内容之一。制作网页可采用可视化编辑软件，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。HTML是网页的基础语言，因此本章就来介绍HTML的基本概念和编写方法及浏览HTML文件的方法，使读者初步了解HTML，从而为后面的学习打下基础。1.1　HTML5的基本概念

因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用一种标记语言书写的，这种语言称为HTML（Hyper Text Markup Language，超文本标记语言）。1.1.1　HTML5简介

HTML是一种标记语言，而不是一种编程语言，主要用于描述超文本中内容的显示方式。标记语言从诞生到今天，经历了十几载，发展过程中也有很多曲折，经历的版本及发布日期如表1-1所示。

表1-1　HTML经历的版本

HTML是一种标记语言，标记语言经过浏览器的解释和编译，虽然它本身不能显示在浏览器中，但在浏览器中可以正确显示HTML标记的内容。HTML语言从1.0至5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经成为一种非常完善的标记语言。尤其是HTML5，对多媒体的支持功能更强，它新增功能如下：

●　新增语义化标记，使文档结构明确

●　新的文档对象模型（DOM）

●　实现2D绘图的Canvas对象

●　可控媒体播放

●　离线存储

●　文档编辑

●　拖放

●　跨文档消息

●　浏览器历史管理

●　MIME类型和协议注册

对于这些新功能，支持HTML5的浏览器在处理HTML代码错误的时候会更灵活，而那些不支持HTML5的浏览器将忽略HTML5代码。

HTML5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML最基本的语法是<标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。

如在HTML中用

完整的HTML文件包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象统称为HTML元素。一个HTML5文件的基本结构如下：

从上面的代码可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为< >，结束标记为，在这两个标记中间添加内容。这些基本标记的使用方法及详细解释，见第2章内容。1.2　HTML5文件的编写方法

有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不是很困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助使用者来做编写的工作。1.2.1　使用记事本手工编写HTML文件

前面介绍到HTML5是一种标记语言，标记语言代码是以文本形式存在的，因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入到记事本并保存之后，可以在浏览器中打开文档以查看其效果。【例1.1】使用记事本编写HTML文件

具体操作步骤如下：

01　单击Windows桌面上的【开始】按钮，选择【所有程序】【附件】【记事本】命令，打开一个记事本，在记事本中输入HTML代码，如图1-1所示。

图1-1　编辑HTML代码

02　编辑完HTML文件后，选择【文件】【保存】命令或按Ctrl+S组合键，在弹出的【另存为】对话框中，选择【保存类型】为【所有文件】，然后将文件扩展名设为.html或.htm，如图1-2所示。

图1-2　【另存为】对话框

03　单击【保存】按钮，保存文件。打开网页文档，在浏览器中预览效果，如图1-3所示。

图1-3　网页的浏览效果1.2.2　使用Dreamweaver CS5.5编写HTML文件

常言道：“工欲善其事，必先利其器”。虽然使用记事本可以编写HTML文件，但是编写效率太低，对于语法错误及格式都没有提示，因此，可以使用专门编写HTML网页的工具来弥补这种缺陷。Adobe公司的Dreamweaver CS5.5用户界面非常友好，是一个非常优秀的网页开发工具，深受广大用户的喜爱，Dreamweaver CS5.5的主界面如图1-4所示。

图1-4　Dreamweaver CS5.5的主界面

1．文档窗口

文档窗口位于界面的中部，它是用来编排网页的区域，与在浏览器中的结果相似。在文档窗口中，可以将文档分为三种视图显示模式。（1）代码视图。使用代码视图，可以在文档窗口中显示当前文档的源代码，也可以在该窗口面板集中直接键入HTML代码。（2）设计视图。设计视图下，无需编辑任何代码，直接使用可视化的操作编辑网页。（3）拆分视图。拆分视图下，左半部分显示代码视图，右半部分显示设计视图。在这种视图模式下，可以通过键入HTML代码，直接观看效果，还可以通过设计视图插入对象，直接查看源文件。

在各种视图间切换，只需在文档工具栏中单击相应的视图按钮即可，文档工具栏如图1-5所示。

图1-5　文档工具栏

2．插入面板

插入面板是在设计视图下使用频度很高的一个面板。插入面板默认打开的是【常用】页，它包括了最常用的一些对象，例如在文档中的光标位置插入一段文本、图像或表格等。用户可以根据需要切换到其他页，如图1-6所示。

图1-6　插入面板包含的页

3．属性面板

属性面板中主要包含当前选择的对象相关属性设置。可以通过单击菜单栏中的【窗口】【属性】命令或按Ctrl+F3组合健，打开或关闭属性面板。

属性面板是常用的一个面板，因为无论要编辑哪个对象的属性，都要用到它。其内容也会随着选择对象的不同而改变，例如当光标定位在文件主体内容部分时，属性面板将显示文字的相关属性，如图1-7所示。

图1-7　文字对象的属性面板

Dreamweaver CS5.5中还有很多面板，在以后使用时再作详细讲解。打开的面板很多时，编辑文档的区域会变小，为了编辑文档的方便，可以通过F4功能键快速隐藏和显示所有面板。【例1.2】使用Dreamweaver CS5.5编写HTML文件

具体操作步骤如下：

01　启动Dreamweaver CS5.5（如图1-8所示），在欢迎屏幕的【新建】栏中选择HTML选项，或者单击菜单中的【文件】【新建】命令（快捷键Ctrl+N）。

图1-8　包含欢迎屏幕的主界面

02　弹出【新建文档】对话框（如图1-9所示），在【页面类型】选项区中选择HTML选项。

图1-9　“新建文档”对话框

03　单击【创建】按钮，创建HTML文件，如图1-10所示。

图1-10　设计视图下显示创建的文件

04　在文档工具栏中，单击【代码】按钮，切换到代码视图，如图1-11所示。

图1-11　代码视图下显示创建的文件

05　修改HTML文件标题，将代码中

06　在标记中键入“今天我使用Dreamweaver CS5.5编写了第一个简单网页，感觉非常高兴。”，完整HTML代码如下所示。

07　保存文件。单击菜单中的【文件】【保存】命令或按Ctrl+S组合键，弹出【另存为】对话框。在对话框中，选择保存位置并输入文件名，单击【保存】按钮，如图1-12所示。

图1-12　保存文件

08　单击文档工具栏的图标，选择查看网页的浏览器，或按下功能键F12使用默认浏览器查看网页，预览效果如图1-13所示。

图1-13　浏览器预览效果1.3　使用浏览器查看HTML5文件

开发者会经常用到浏览器，使用浏览器可以查看网页的显示效果，也可以通过浏览器直接查看HTML源代码。1.3.1　各大浏览器与HTML5的兼容

浏览器是网页的运行环境，因此选择浏览器的类型也是在网页设计时会遇到的一个问题。由于各个软件厂商对HTML的标准支持有所不同，导致了同样的网页在不同的浏览器下会有不同的表现。对于HTML5新增的功能，各个浏览器的支持程度也不一致，选择浏览器变得比以往传统的网页设计更重要。

为了保证设计出来的网页，在不同的浏览器上的效果一致，本书在后面的章节中还会多次提及浏览器。目前，市面上的浏览器种类繁多，Internet Explorer占有较大市场份额，因此，本书主要使用Internet Explorer 9.0作为效果浏览器。如果遇到IE浏览器不能支持的效果，将使用Firefox、Opera或者其他能支持的浏览器，这点请读者注意。1.3.2　查看页面效果

双击前面编写的HTML文件，在Internet Explorer浏览器窗口中可以看到编辑的HTML页面效果，请参阅图1-3或图1-13。

前面已经介绍，网页可以在不同的浏览器中查看，为了测试网页的兼容性，可以在不同的浏览器中打开网页。在非默认浏览器中打开网页的方法有很多种，在此为读者介绍两种常用方法。

方法一：选择浏览器菜单【文件】【打开】（有些浏览的菜单项名为【打开文件】），选择要打开的网页即可。

方法二：在HTML文件上右击，在弹出的快捷菜单中选择【打开方式】菜单命令，在级联菜单中选择需要的浏览器（如图1-14所示）。如果浏览器没有出现有菜单中，选择【选择程序】项，在计算机中查找浏览器程序。

图1-14　选择不同浏览器打开网页1.3.3　查看源文件

查看网页源文件的常见方法有以下两种。（1）在打开的页面空白处右击，在弹出的快捷菜中选择【查看源文件】菜单命令，如图1-15所示。

图1-15　选择【查看源文件】菜单命令（2）在浏览器菜单栏上选择【查看】【源文件】菜单命令，即可查看源文件，如图1-16所示。

图1-16　选择【源文件】菜单命令

技巧提示

由于浏览器的规定各不相同，有些浏览器将【查看源文件】命名为【查看源代码】，请读者注意，但是操作方法完全相同。1.4　专家解惑

1．HTML5中的单标记和双标记书写方法

答：HTML5中的标记分为单标记和双标记。所谓单标记是指没有结束标记的标记，双标记是指既有开始标记又包含结束标记。

对于不允许写结束标记的单标记元素，只可以使用“<元素/>”的形式进行书写。例如“
…”的书写方式是错误的，正确的书写方式为
。当然，在HTML5之前的版本中
这种书写方法可以被沿用。HTML5中不允许写结束标记的元素有：area、base、br 、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

对于部分双标记可以省略结束标记。HTML5中允许省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

HTML5中有些元素还可以完全被省略标记，即使这些标记被省略了，该元素还是以隐式的方式存在的。HTML5中允许省略全部标记的元素有：html、head、body、colgroup、tbody。

2．为何使用记事本编辑HTML文件无法在浏览器中预览，而是直接在记事本中打开？

答：很多初学者，保存文件时，没有将HTML文件的扩展名.html或.htm作为文件的后缀，导致文件还是以.txt为扩展名，因此，无法在浏览器中查看。如果读者是通过单击右键，创建记事本文件，在给文件重命时，一定要以html或.htm作为文件的后缀。特别要注意的是当Windows系统的扩展名是隐藏时，更容易出现这样的错误。读者可以在【文件夹选项】对话框中设置是否显示扩展名。

3．Dreamweaver CS5.5欢迎屏幕的显示与隐藏

答：Dreamweaver CS5.5欢迎屏幕可以帮助使用者快速进行打开文件、新建文件和相关帮助等操作。如果读者不希望显示该窗口，可以按Ctrl+U组合键，在弹出的窗口中选择左侧的【常规】页，将右侧【文档选项】部分的【显示欢迎屏幕】勾选取消。第2章HTML5网页文档结构当互联网和Web逐渐成为主流时，Web技术也发生了巨大的变化。W3C和其他的标准化组织共同制定了一些规范，用来创建和解释基于Web的内容。2.1　Web标准

在Web技术成为主流的时代，开发人员也日益增多，各种类型和版本的浏览器也越来越多，网页的兼容成为困扰开发人员最头痛的问题。为了解决这一问题，W3C和其他标准化组织制定了一系列的规范，本节将为读者介绍Web标准。2.1.1　Web标准概述

通过前面的学习，读者了解到，制作的网页需要在浏览器中运行。由于目前存在不同的浏览器版本，为了让各种浏览器都能正常显示网页，Web开发者常常需要为此耗费时间，当新的硬件（比如移动电话）和软件（比如微浏览器）开始可以浏览Web时，这种情况也就变得更加严重了。

为了Web更好地发展（对于开发人员和最终用户而言也是非常重要的事情），在开发新的应用程序时，浏览器开发商和站点开发商应遵守共同的标准。

Web的不断壮大，使得越来越有必要依靠标准实现其全部潜力。Web标准可确保每个人都有权利访问相同的信息。如果没有Web标准，那么未来的Web应用，包括我们所梦想的应用程序，都是不可能实现的。

同时，Web标准也可以使站点开发更快捷，更令人愉快。为了缩短开发和维护时间，未来的网站将不得不根据标准来进行编码。开发人员不必为了得到相同的结果，而挣扎于多版本的开发。一旦Web开发人员遵守了Web标准，由于开发人员可以更容易地理解彼此的编码，Web开发的团队协作也将得到简化。

因此，Web标准在开发中是很重要的，使用Web标准有几下几个优点：

1．对于访问者

●　文件下载与页面显示速度更快。

●　内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。

●　内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。

●　用户能够通过样式选择定制个性化的表现界面。

●　所有页面都能提供适于打印的版本。

2．对于网站所有者

●　更少的代码和组件，容易维护。

●　带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS改版后，每天节约超过两兆字节（terabytes）的带宽。

●　更容易被搜索引擎搜索到。

●　改版方便，不需要变动页面内容。

●　提供打印版本而不需要复制内容。

●　提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。2.1.2　Web标准规定的内容

Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

1．结构标准语言（1）XML

XML是The Extensible Markup Language（可扩展记识语言）的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML 1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。（2）XHTML

XHTML是The Extensible HyperText Markup Language（可扩展超文本标记语言）的缩写。目前推荐遵循的是W3C于2000年1月26日推荐的XHTML 1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML 4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2．表现标准语言

CSS是Cascading Style Sheets（层叠样式表）的缩写。目前推荐遵循的是W3C于1998年5月12日推荐的CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3．行为标准（1）DOM

DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种浏览器，平台，语言的接口，使得用户可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的JavaScript和Microsoft的JScript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。（2）ECMAScript

ECMAScript是ECMA（European Computer Manufacturers Association）制定的脚本程序设计语言，目前推荐遵循的标准是ECMA-262。2.2　HTML基本标记

HTML文档最基本的结构主要包括文档类型说明、HTML文档开始标记、元信息、主体标记和页面注释标记。2.2.1　文档类型说明

HTML5设计准则中的第3条——化繁为简，Web页面的文档类型说明（Doctype）被极大地简化了。

细心的读者会发现，在第1章中使用Dreamweaver CS5.5创建HTML文档时，文档头部的类型说明代码如下：

上面为XHTML文档类型说明，读者可以看到这段代码既麻烦又难记，HTML5对文档类型进行了简化，简单到15个字符就可以了，代码如下：

试读结束[说明：试读内容隐藏了图片]

下载完整电子书