编辑推荐

●货真料足:著名一线前端开发专家阮晓龙老师多年学习、研究、授课及实战经验的结晶

●一网打尽:一站式解决HTML5、CSS3、jQurery、AJAX的入门与实战

●深入浅出:理论实战无缝融合,彻底杜绝纸上谈兵;案例精彩贴近实战,商业化开发特色突出

●成就感十足:知识点清晰详细,每分钟一个知识点,每个知识点都能看到学习效果,每个效果都能扫二维码直接在手机观看

●全屏适配:支持移动Web开发,引入“浏览器支持”工程理念

●超值DVD:DVD包含了《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》学习所需用到的所有软件,如设计工具、浏览器、项目管理工具、开发工具、测试工具以及其它辅助工具;《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的所有案例及源码;多媒体教学课件。

内容简介

  《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》讲述了用HTML5+CSS3设计构建网站的必备知识,相对于专业指南、高级程序设计、开发指南等同类图书,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》是一本适合快速入手的自学教程。HYML5部分主要介绍了创建HTML5文档,实战HTML5表单,实战HTML5绘画,HTML5音频与视频,Web存储,离线应用,Workers多线程处理,Geolocation地理位置等技术;CSS3部分主要介绍了CSS3概述,CSS选择器,文本、字体与颜色,背景和边框,2D变形,设计动画,网页布局、用户界面以及CSS3的其他新特性。

  《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》适合想从事网站前端开发工作和正在从事网站前端开发工作的程序设计人员参考使用。

作者简介

阮晓龙:一线资深网络技术及Web技术专家。主要研究方向为数据中心运维管理、网络测量技术、Web技术,河南中医学院网络信息中心信息部主任。曾参与承建河南省教育科研网郑东新区节点建设及运行工作;曾参与多项大型门户网站的规划、设计与开发建设工作;曾参与并具体负责河南中医学院数字化校园示范工程建设项目。主持或参与厅级以上科研项目9项,厅级一等奖以上获奖7项,并荣获河南省教学标兵称号。

目录

作者的话

配套光盘使用说明

第1章概述1

1.1Web基础2

1.2Web是如何工作的9

1.3为什么学习Web前端开发14

第2章开发工具17

2.1开发工具综述18

2.2原型设计工具18

2.2.1什么是原型设计18

2.2.2原型设计工具—AxureRP19

2.2.3实训:使用AxureRP实现百度登录页原型设计20

2.3开发工具26

2.3.1开发工具的作用26

2.3.2网站开发工具—AdobeDreamweaver26

2.3.3网站开发工具—OracleNetBeans27

2.3.4网站开发工具—MicrosoftVisualStudio27

2.3.5实训:AdobeDreamweaverCS6的安装与基本使用28

2.3.6实训:MicrosoftVisualStudioCommunity2015的安装与基本使用36

2.4调试工具37

2.4.1什么是Web调试38

2.4.2网站调试工具—Firefox38

2.4.3网站调试工具—GoogleChrome38

2.4.4网站调试工具—InternetExplorer38

2.4.5实训:使用Firefox进行网页开发调试38

2.5代码托管工具44

2.5.1为什么要进行代码托管44

2.5.2代码托管的基本功能44

2.5.3代码托管工具—GitHub45

2.5.4代码托管工具—SVN45

2.5.5案例:使用GitHub开源平台实现网站代码托管46

2.6项目管理系统51

2.6.1什么是项目管理51

2.6.2项目管理的目的51

2.6.3项目管理系统—MicrosoftProject52

2.6.4项目管理系统—Collabtive52

第3章初识HTML553

3.1HTML概述54

3.1.1什么是HTML54

3.1.2HTML的发展历程54

3.1.3HTML5发展史54

3.1.4HTML5开发团队55

3.1.5HTML5官方资源55

3.2HTML5的优势55

3.2.1优势56

3.2.2新功能57

3.3HTML5的新特征60

3.3.1语法的改变60

3.3.2元素60

3.3.3属性65

3.3.4全局属性68

3.4HTML5文档结构69

3.4.1认识文档结构69

3.4.2案例:创建HTML5网页70

第4章HTML5结构与属性72

4.1结构之美:从HTML4到HTML573

4.1.1使用表格布局73

4.1.2使用区块布局73

4.1.3使用HTML5结构元素布局74

4.1.4语义Web74

4.2HTML5基础75

4.2.1HTML5语法75

4.2.2HTML5元素76

4.2.3HTML5属性82

4.2.4HTML5全局属性84

4.2.5案例:个人简历网页的实现85

4.3HTML5结构元素88

4.3.1HTML5主体结构元素88

4.3.2HTML5非主体结构元素93

4.3.3案例:使用结构元素进行网页布局(新闻列表+新闻列表内容呈现)96

4.4超链接100

4.4.1绝对路径与相对路径100

4.4.2超链接元素101

4.4.3超链接属性101

4.4.4案例:网址导航页面的实现102

第5章表单104

5.1表单基础105

5.1.1表单105

5.1.2input元素106

5.1.3label元素107

5.1.4button元素108

5.1.5select元素108

5.1.6textarea元素110

5.2使用form元素111

5.2.1新增form元素111

5.2.2form属性总览112

5.2.3新增form属性113

5.3使用input元素113

5.3.1input类型总览113

5.3.2新增input类型114

5.3.3input属性总览122

5.3.4新增的input属性124

5.4案例:高考改革方案调查问卷网页的实现130

5.5案例:智能表单(用户注册)134

第6章多媒体139

6.1多媒体基础140

6.1.1什么是多媒体140

6.1.2音频编码与音频格式140

6.1.3视频编码与视频格式140

6.1.4在Web上能够使用的音频和视频格式141

6.1.5如何在Web上播放视频142

6.2HTML5音频与视频143

6.2.1Audio元素143

6.2.2Video元素144

6.2.3Audio和Video的属性145

6.2.4Audio和Video的方法149

6.2.5Audio和Video的事件149

6.2.6案例:在网页上使用背景音乐151

6.2.7案例:在网页上播放视频151

6.3播放控制152

6.3.1预加载媒体文件152

6.3.2视频封面图153

6.3.3自动播放153

6.3.4循环播放153

6.3.5添加变量153

6.3.6播放153

6.3.7暂停155

6.3.8快放、慢放、慢动作155

6.3.9快进、快退156

6.3.10进度拖动157

6.3.11音量控制159

6.3.12全屏播放160

6.3.13播放器容错处理162

6.4解决兼容问题163

6.4.1浏览器对多媒体的兼容性支持163

6.4.2使用多种媒体格式提升兼容性165

6.4.3使用Flash提升兼容性165

6.5字幕166

6.5.1标记时间的文本轨道167

6.5.2视频字幕170

6.6案例:使用播放器插件实现视频播放171

第7章初识CSS3173

7.1CSS3概述174

7.1.1什么是CSS174

7.1.2CSS发展史174

7.1.3CSS3新特征174

7.1.4主流浏览器对CSS3的支持176

7.1.5谁在使用CSS3178

7.1.6CSS3的未来178

7.2CSS3功能178

7.2.1CSS3模块178

7.2.2使用CSS3的优势180

7.3在HTML中使用CSS181

7.3.1内联样式181

7.3.2嵌入样式181

7.3.3外部样式182

7.3.4网站CSS文件的规划183

7.4案例:基于终端设备选择不同样式184

7.5案例:基于浏览器选择不同样式185

第8章选择器186

8.1认识CSS选择器187

8.2基础选择器187

8.2.1语法187

8.2.2通配符选择器188

8.2.3元素选择器189

8.2.4类选择器190

8.2.5ID选择器192

8.2.6选择器兼容性193

8.3层次选择器194

8.3.1语法194

8.3.2后代选择器194

8.3.3子选择器195

8.3.4相邻兄弟选择器196

8.3.5通用兄弟选择器197

8.3.6选择器组合198

8.3.7选择器兼容性199

8.4伪类选择器199

8.4.1语法199

8.4.2动态伪类选择器200

8.4.3目标伪类选择器201

8.4.4语言伪类选择器202

8.4.5UI元素状态伪类选择器203

8.4.6结构伪类选择器205

8.4.7否定伪类选择器212

8.4.8伪元素214

8.5属性选择器217

8.5.1语法217

8.5.2使用方法218

8.5.3浏览器兼容性221

第9章文字样式222

9.1文本样式223

9.2字体样式232

9.3文本效果236

9.4使用服务器端字体240

9.5案例:诗歌排版241

9.6案例:使用服务器端字体实现网站图标242

第10章盒模型244

10.1盒子245

10.2盒子类型255

10.3盒子的属性269

10.4浏览器的盒子调试279

盒子调试283

第11章背景与边框284

11.1背景属性285

11.2边框属性293

11.3案例:图片轮转的实现315

11.4案例:网页课程表的实现316

第12章布局322

12.1定位与布局的基本属性323

12.2多列布局337

12.3盒布局341

12.4案例:网页布局356

第13章CSS动画368

13.1Web动画369

13.2使用变形属性370

13.3使用过渡属性388

13.4使用动画属性401

13.5案例:引人入胜的动态照片墙414

第14章初识JavaScript416

14.1JavaScript概述417

14.2语法418

14.3DOM431

14.4案例:使用JavaScript进行表单验证435

14.5案例:使用JavaScript实现规定时间内

答题效果439

14.5.1功能439

14.5.2实现效果439

14.5.3代码440

第15章jQuery编程442

15.1jQuery概述443

15.2jQuery基础应用446

15.3jQuery中的DOM操作473

15.4jQuery插件488

15.5案例:使用jQuery插件实现表单验证499

15.6案例:使用JQueryMobile快速开发手机网站501

第16章AJAX504

16.1概述505

16.2基础知识506

16.3AJAX实现508

16.4使用jQuery实现AJAX513

16.5案例:实时表单验证528

第17章文件536

17.1文件存储537

17.2处理用户文件537

17.3文件操作546

17.4文件内容操作558

17.5案例:用户本地资源管理564

第18章绘图572

18.1Canvas基础知识573

18.1.1Canvas573

18.2图形绘制577

18.3图形变换与控制598

18.4案例:用Canvas绘制统计报表611

第19章本地存储615

19.1本地存储616

19.1.1本地存储简介616

19.1.2本地存储类型616

19.2WebStorage618

19.3IndexedDB623

19.4Cookie630

19.5案例:使用本地数据提升服务器性能635

第20章Web测试641

20.1概述642

20.1.1什么是Web测试642

20.1.2测试内容642

20.1.3测试目的643

20.2用户界面测试643

20.2.1导航测试643

20.2.2图形测试644

20.2.3内容测试644

20.2.4整体界面测试644

20.3兼容性测试645

20.3.1平台兼容性测试645

20.3.2浏览器兼容性测试646

20.3.3分辨率兼容性测试648

20.4功能测试648

20.5性能测试651

20.5.1连接速度测试652

20.5.2压力测试656

参考文献665

前言/序言

1.为什么要学习Web前端开发?

在世界日益互联网化的今天,Web技术已经成为一门广泛应用的技术。除了日常的网站访问和信息浏览,Web已成为各种设备的有机组成部分。例如交换机、路由器、服务器等硬件设备都可以通过Web方式进行管理,并且这种方式得到了越来越多的应用,各种信息技术都在不断Web化。

不仅如此,学习Web前端开发技术,具有以下优势。

●Web前端开发入门门槛低,但市场需求量大,尤其是有经验的前端开发人员。

●Web前端开发可在短期内积累足够的经验,而后端开发想要积累同等程度的经验则需要更长的时间。

●Web前端开发技术发展越来越成熟,且适用范围更广。比如HTML5可以替代原生APP,JavaScript能够用于数据库操作(MongoDB等非SQL技术支持JS语法),Node.js能够让JavaScript在服务器端运行等。

2.为什么要选择这《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》?

●涵盖Web前端开发的全体系内容。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的内容安排遵循Web开发流程及人类由浅入深的认知规律,首先介绍Web的基本概念及Web开发工具,然后讲解Web前端开发的三大核心内容HTML5、CSS3、JavaScript,接着进一步介绍HTML5新增的文件接口、绘图元素和本地存储功能,最后讲解Web测试方法及工具。通过这《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》,读者可以掌握Web前端开发的全体系内容。

●引入“浏览器支持”的工程理念。

Web前端开发的结果要通过浏览器进行展示。《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》在讲解HTML5和CSS3的各种元素、属性时,明确说明了各种浏览器对这些元素的支持;《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》中所有的案例都进行了主流浏览器兼容性测试,并对测试结果进行了说明,从而使读者尤其是初学者,在学习之初就能树立起“浏览器支持”这一Web前端开发中的重要工程理念。

●书中案例具有较高的工程度和成熟度。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》包含大量的案例,既有针对一个元素的小案例,也有综合性的大案例。所有案例都经过了精心设计,案例代码的成熟度和工程应用程度较高,许多案例达到了企业级应用水平。读者在学习《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》时可以通过案例更好地理解知识和掌握应用,同时这些案例也能成为读者积累的代码库中的一部分,在进行实际项目开发时直接引用,真正起到“拿来就用”,有效降低读者从学习到项目开发的成本。

●明确体现商业化开发的特点。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》作者以及案例设计团队具有多年的商业化Web前端开发经验,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》在内容组织、案例设计、编写形式上明确体现了商业化开发的特点,从而有助于读者更好地实现从学习到应用的转变。

●全屏幕适配,支持移动Web开发。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的内容不仅考虑了面向PC的Web开发,也考虑了面向移动终端的Web开发,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的讲解重新考虑“全终端适配”的概念,让读者能够更加全面地理解Web前端开发的应用范围,充分适应移动互联网的时代特征。

3.《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的读者对象

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》适用于以下三类读者。

一是从事Web前端开发工作的专业技术人员,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》可帮助他们进行深入、系统的深造学习,从而更好理解Web知识体系、提高工作成效;

二是准备从事Web前端开发工作的入门者,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》可帮助他们全面理解并掌握Web前端开发的技术框架,为系统学习Web前端开发指引方向,为后续工作学习打下扎实基础;

三是高等院校中计算机相关专业、特别是计算机科学与技术、软件技术类专业的在校学生,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》可帮助学生从零开始学习Web技术,不断加深对Web前端开发技术的理解,并且通过大量案例提升实践操作的综合能力,做到“学以致用”。

4.《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》包含哪些内容?

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》共20章,从内容组织上看,包括Web基础、HTML5、CSS3、JavaScript、Web前端开发高级应用、Web测试六个部分。

第1~2章属于Web基础部分。主要介绍Web的基本概念、工作原理、Web前端开发的含义,重点讲解Web前端开发的每个阶段中所使用的开发工具,帮助读者为后续学习打下基础。

第3~6章属于HTML5部分。主要介绍HTML5的发展、优势、功能、新特征以及各种元素、属性的用法、重点讲解在HTML5中表单和多媒体的应用。

第7~13章属于CSS3部分。主要介绍CSS3的发展、功能、新特征,重点讲解CSS3中选择器、文字样式、盒模型、背景与边框、布局、动画的应用。

第14~16章属于JavaScript部分。主要介绍JavaScript的发展、功能、基本语法,重点讲解jQuery编程、AJAX的应用。

第17~19章属于Web前端开发高级应用部分。主要讲解HTML5新增的文件接口、绘图元素和本地存储功能。

第20章属于Web测试部分。主要介绍Web测试的基本内容和目的、Web测试的常用方法和常见测试软件,帮助Web开发者通过测试提升Web性能和安全性。

5.配套光盘使用说明(1)为什么为《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》配备光盘?

为《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》添加配套光盘,是从以下几方面考虑的。

●《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的体系结构完整,为《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》配备光盘主要是总结、提炼书籍内容,并以多媒体课件的形式形象地展示出来,方便读者了解《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的知识架构与体系,对书籍内容有一个更为宏观的认识。

●提供《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》使用的软件资源,方便读者随时进行实验验证与学习,更为直观地了解、学习和掌握书中的知识点。部分软件资源较大,在网络环境有限或者没有网络环境的情况下,通过光盘依然可以获得相关软件资源,以快速方便地开展学习。

●提供《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的案例集成网站,方便读者在阅读《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》代码时,可以更直观准确地查看案例中代码的显示情况,了解书中代码的含义,帮助读者更容易地理解和接受那些代码。特别需要说明的是,《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》中的一些大型案例,在印刷时将部分重复度较高的代码省略了,以提高图书的印刷质量,通过案例集成网站将全部代码统一提供,帮助读者阅读学习。

(2)配套光盘有什么?

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》配套光盘的内容由三部分组成,具体内容为。

●《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》配套使用的多媒体教学课件,包含MicrosoftPowerPoint(.pptx)和PDF两种格式,方便读者在不同环境下浏览使用。

●《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》内容所涉及的部分软件资源,所提供的软件主要为试用版、开源版、免费版的开发软件、浏览器工具软件、Web测试和调试工具软件等,方便读者方便快捷地开展对《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》内容,特别是《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》案例的学习。

●《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》所有案例集成后的案例网站。将《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》中各章节的案例集中整理、归档后,将案例内容开发为独立的案例网站,方便读者在阅读时随时调试、查看案例的效果,促进学以致用。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》能顺利撰写完毕,感谢冯顺磊的全程工作,他参与了《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》整体规划和《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》内容、案例的审核、校对;感谢刘明哲、杜宇飞、李朋楠、刘海滨、于冠军、孟烨、姚伟在《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》章节规划、资料整理、文字撰写、案例设计方面的工作;感谢杨明、路景鑫对《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》案例进行了全面系统的整理和测试。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》内容较多,撰写工作持续周期较长,在此期间我的父母、妻子给予了巨大的支持和理解,更要感谢孩子的亲吻所给予我的信念和力量。

Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》编写完成后,中国水利水电出版社万水分社的周春元副总经理对于《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》的出版给予了中肯的指导和积极的帮助,在此表示深深的谢意!

由于我们的水平有限,疏漏及不足之处在所难免,敬请广大读者朋友批评指正。


其他推荐