Web前端开发实例教程——HTML 5+JavaScript+jQuery PDF下载

编辑推荐

本书采用“模块化设计、任务驱动学习”的编写模式，在任务驱动学习的具体实施中，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，自始至终贯穿于本书之中。在实例的设计、制作过程中，把本章节的知识点融于实例之中，使读者能够快速掌握概念和操作方法。；

内容简介

本书面向学习网站开发与网页制作的读者，采用全新的Web标准，以HTML 5技术为基础，由浅入深、完整详细地介绍了如何使用HTML 5、JavaScript及jQuery进行Web前端的开发。本书共分为14章，主要内容包括： HTML 5概述、HTML 5语言基础、HTML 5页面的布局与交互、JavaScript语言基础、DOM对象及编程、使用JavaScript制作网页特效、HTML 5高级应用、jQuery基础、jQuery选择器、jQuery的基本操作、jQuery的事件处理、使用jQuery制作动画、jQuery UI插件的应用、综合案例——宇宙电子网站。本书内容紧扣国家对本科及高等职业院校培养高级应用型、复合型人才的技能水平和知识结构的要求，全书以一个完整的项目案例的开发思路为主线，采用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解及任务的具体实现，引导读者学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。本书适合作为本科及高等职业院校计算机及相关专业的教材，也可以作为培训班网站开发与网页制作的教材。

作者简介

暂无

Web前端开发实例教程——HTML 5+JavaScript+jQuery PDF下载

第1章HTML 5概述1
1.1Web简介1
1.1.1WWW和浏览器的基本概念1
1.1.2URL2
1.1.3超文本3
1.1.4超文本标记语言4
1.1.5超文本传输协议5
1.1.6搜索引擎5
1.2Web标准6
1.2.1什么是Web标准6
1.2.2建立Web标准的优点7
1.2.3理解表现和结构相分离8
1.3HTML简介9
1.3.1Web技术发展历程9
1.3.2HTML 5的特性9
1.3.3HTML 5元素10
1.4HTML 5的基本结构11
1.4.1HTML 5语法结构11
1.4.2HTML 5编写规范12
1.4.3HTML 5文档结构12
1.5网页文件的创建过程14
1.6搭建支持HTML 5的浏览器环境15
习题16
第2章HTML 5语言基础17
2.1HEAD元素17
2.1.1标签17<；/p>；<；p>；2.1.2<；meta>；标签182.1.3<；link>；标签19<；/p>；<；p>；2.1.4<；script>；标签19<；/p>；<；p>；2.2文本元素19<；/p>；<；p>；2.2.1标题文字标签20<；/p>；<；p>；2.2.2字体标签20<；/p>；<；p>；2.2.3特殊符号21<；/p>；<；p>；2.3文本层次语义元素22<；/p>；<；p>；2.3.1<；time>；标签22<；/p>；<；p>；2.3.2<；mark>；标签23<；/p>；<；p>；2.3.3<；cite>；标签24<；/p>；<；p>；2.4文档结构元素24<；/p>；<；p>；2.4.1段落标签25<；/p>；<；p>；2.4.2换行标签25<；/p>；<；p>；2.4.3缩排标签26<；/p>；<；p>；2.4.4水平线标签27<；/p>；<；p>；2.4.5案例——制作宇宙电子业务简介页面28<；/p>；<；p>；2.5列表29<；/p>；<；p>；2.5.1无序列表29<；/p>；<；p>；2.5.2有序列表30<；/p>；<；p>；2.5.3定义列表31<；/p>；<；p>；2.5.4嵌套列表32<；/p>；<；p>2.6图像33</p><p>2.6.1网页图像的格式及使用要点33</p><p>2.6.2图像标签34</p><p>2.6.3设置网页背景图像36</p><p>2.6.4图文混排37</p><p>2.6.5案例——制作宇宙电子经营模式图文简介页面38</p><p>2.7超链接39</p><p>2.7.1超链接概述39</p><p>2.7.2超链接的应用40</p><p>2.7.3案例——制作宇宙电子下载专区页面43</p><p>2.8<div>标签45</p><p>2.9<span>标签45</p><p>2.9.1基本语法45</p><p>2.9.2<span>与<div>的区别46</p><p>2.9.3使用<div>标签和<span>标签布局网页内容46</p><p>习题48</p><p>第3章HTML 5页面的布局与交互51</p><p>3.1使用结构元素构建网页布局51</p><p>3.1.1<section>标签52</p><p>3.1.2<nav>标签52</p><p>3.1.3<header>标签52</p><p>3.1.4<footer>标签53</p><p>3.1.5<article>标签53</p><p>3.1.6<aside>标签56</p><p>3.1.7分组元素57</p><p>3.1.8案例——制作宇宙电子新品发布页面58</p><p>3.2页面交互元素60</p><p>3.2.1details元素和summary元素60</p><p>3.2.2progress元素61</p><p>3.3表格62</p><p>3.3.1表格的结构62</p><p>3.3.2表格的基本语法62</p><p>3.3.3表格的属性63</p><p>3.3.4跨行跨列表格66</p><p>3.3.5表格数据的分组67</p><p>3.3.6案例——使用表格布局宇宙电子产品展示页面69</p><p>3.4表单70</p><p>3.4.1表单的基本概念70</p><p>3.4.2表单标签71</p><p>3.4.3表单元素71</p><p>3.4.4案例——制作宇宙电子会员注册表单75</p><p>3.4.5表单分组78</p><p>3.4.6使用表格布局表单79</p><p>3.4.7表单的高级用法81</p><p>习题82</p><p>第4章JavaScript语言基础85</p><p>4.1JavaScript简介85</p><p>4.2在网页中插入JavaScript的方法86</p><p>4.2.1在HTML文档中嵌入脚本程序86</p><p>4.2.2链接脚本文件87</p><p>4.2.3在HTML标签内添加脚本88</p><p>4.2.4多脚本网页89</p><p>4.3JavaScript的基本数据类型和表达式90</p><p>4.3.1基本数据类型90</p><p>4.3.2常量90</p><p>4.3.3变量91</p><p>4.3.4运算符和表达式92</p><p>4.4JavaScript的程序结构93</p><p>4.4.1简单语句94</p><p>4.4.2程序控制流程96</p><p>4.5函数103</p><p>4.5.1函数的定义103</p><p>4.5.2函数的调用105</p><p>4.5.3全局变量与局部变量107</p><p>4.5.4JavaScript内置的函数108</p><p>4.6基于对象的JavaScript语言109</p><p>4.6.1对象110</p><p>4.6.2对象的属性112</p><p>4.6.3对象的事件113</p><p>4.6.4对象的方法113</p><p>4.7JavaScript的内置对象114</p><p>4.7.1数组对象114</p><p>4.7.2字符串对象117</p><p>4.7.3日期对象119</p><p>4.7.4数学对象120</p><p>4.8自定义对象122</p><p>习题123</p><p>第5章DOM对象及编程125</p><p>5.1DOM模型125</p><p>5.2window对象126</p><p>5.2.1window对象的属性126</p><p>5.2.2window对象的方法128</p><p>5.3document对象132</p><p>5.3.1document对象的属性132</p><p>5.3.2document对象的方法134</p><p>5.4location对象137</p><p>5.4.1location对象的属性137</p><p>5.4.2location对象的方法137</p><p>5.5history对象138</p><p>5.6form对象139</p><p>5.6.1form对象的属性139</p><p>5.6.2form对象的方法139</p><p>5.7JavaScript的对象事件处理程序140</p><p>5.7.1对象的事件140</p><p>5.7.2常用的事件及处理141</p><p>5.7.3错误处理148</p><p>5.7.4表单对象与交互性149</p><p>5.7.5案例——使用form对象实现Web页面信息交互153</p><p>习题155</p><p>第6章使用JavaScript制作网页特效157</p><p>6.1文字特效157</p><p>6.1.1打字效果157</p><p>6.1.2文字爬楼滚动效果159</p><p>6.2菜单与选项卡特效160</p><p>6.2.1制作二级纵向列表模式的导航菜单160</p><p>6.2.2制作Tab选项卡切换效果163</p><p>6.3图片特效166</p><p>6.3.1制作循环滚动的图文字幕166</p><p>6.3.2制作幻灯片切换广告170</p><p>习题172</p><p>第7章HTML 5高级应用174</p><p>7.1HTML 5拖放API174</p><p>7.1.1draggable属性174</p><p>7.1.2拖放触发的事件和数据传递175</p><p>7.2多媒体播放178</p><p>7.2.1HTML 5的多媒体支持178</p><p>7.2.2音频标签179</p><p>7.2.3视频标签181</p><p>7.2.4HTML 5多媒体API182</p><p>7.3Canvas绘图185</p><p>7.3.1创建<canvas>元素185</p><p>7.3.2构建绘图环境185</p><p>7.3.3通过JavaScript绘制图形186</p><p>7.4HTML 5地理定位API195</p><p>7.4.1Geolocation基础196</p><p>7.4.2Geolocation API实现地理定位196</p><p>7.5HTML 5的发展前景201</p><p>习题202</p><p>第8章jQuery基础204</p><p>8.1jQuery概述204</p><p>8.1.1什么是jQuery204</p><p>8.1.2jQuery的特点204</p><p>8.2编写jQuery程序205</p><p>8.2.1下载与配置jQuery205</p><p>8.2.2编写一个简单的jQuery程序206</p><p>8.3jQuery对象和DOM对象207</p><p>8.3.1jQuery对象和DOM对象简介207</p><p>8.3.2jQuery对象和DOM对象的相互转换208</p><p>8.4jQuery的插件212</p><p>8.4.1引用jQuery插件的方法212</p><p>8.4.2常用的插件简介212</p><p>习题215</p><p>第9章jQuery选择器216</p><p>9.1jQuery选择器简介216</p><p>9.1.1jQuery的工厂函数216</p><p>9.1.2什么是jQuery选择器216</p><p>9.1.3jQuery选择器的优势217</p><p>9.2基础选择器218</p><p>9.2.1ID选择器218</p><p>9.2.2元素选择器220</p><p>9.2.3类名选择器222</p><p>9.2.4复合选择器223</p><p>9.2.5通配符选择器224</p><p>9.3层次选择器225</p><p>9.3.1ancestor descendant(祖先后代)选择器225</p><p>9.3.2parent>child(父>子)选择器225</p><p>9.3.3prev next(前 后)选择器226</p><p>9.3.4prev～siblings(前～兄弟)选择器226</p><p>9.4过滤选择器228</p><p>9.4.1简单过滤器228</p><p>9.4.2内容过滤器230</p><p>9.4.3可见性过滤器231</p><p>9.4.4子元素过滤器232</p><p>9.4.5表单对象的属性过滤器233</p><p>9.5属性选择器235</p><p>9.6表单选择器236</p><p>习题238</p><p>第10章jQuery的基本操作240</p><p>10.1元素属性的操作240</p><p>10.1.1获取或设置元素属性240</p><p>10.1.2删除元素属性241</p><p>10.2元素样式的操作243</p><p>10.2.1修改CSS类243</p><p>10.2.2设置CSS属性245</p><p>10.3元素内容和值的操作246</p><p>10.3.1操作元素内容246</p><p>10.3.2操作元素的值250</p><p>10.4操作DOM节点251</p><p>10.4.1创建节点251</p><p>10.4.2插入节点252</p><p>10.4.3复制节点255</p><p>10.4.4删除节点257</p><p>10.4.5替换节点260</p><p>10.4.6查找节点262</p><p>10.5操作表单元素264</p><p>10.5.1操作文本框264</p><p>10.5.2操作文本域265</p><p>10.5.3操作单选按钮和复选框267</p><p>10.5.4操作下拉框269</p><p>10.5.5表单验证271</p><p>习题273</p><p>第11章jQuery的事件处理275</p><p>11.1jQuery中的事件处理机制275</p><p>11.2页面加载响应事件277</p><p>11.3jQuery中的事件绑定278</p><p>11.3.1bind()方法绑定事件279</p><p>11.3.2one()方法绑定事件280</p><p>11.3.3delegate()方法绑定事件282</p><p>11.3.4on()方法绑定事件283</p><p>11.4移除事件绑定284</p><p>11.5模拟用户操作286</p><p>11.5.1模拟用户的操作触发事件286</p><p>11.5.2模拟悬停事件289</p><p>11.5.3模拟鼠标连续单击事件290</p><p>11.6事件对象291</p><p>11.6.1事件对象的属性291</p><p>11.6.2事件对象的方法293</p><p>11.7jQuery事件方法296</p><p>11.7.1键盘事件296</p><p>11.7.2鼠标事件298</p><p>11.7.3浏览器事件300</p><p>习题301</p><p>第12章使用jQuery制作动画304</p><p>12.1jQuery的动画方法简介304</p><p>12.2显示与隐藏效果305</p><p>12.2.1隐藏元素的方法305</p><p>12.2.2显示元素的方法305</p><p>12.2.3切换元素的显示状态308</p><p>12.3淡入淡出效果309</p><p>12.3.1淡入效果309</p><p>12.3.2淡出效果309</p><p>12.3.3元素的不透明效果311</p><p>12.3.4交替淡入淡出效果311</p><p>12.4滑动效果313</p><p>12.4.1向下展开效果313</p><p>12.4.2向上收缩效果313</p><p>12.4.3交替伸缩效果314</p><p>12.5自定义动画效果315</p><p>12.5.1创建自定义动画316</p><p>12.5.2动画队列318</p><p>12.5.3动画的延时和停止322</p><p>12.6综合案例324</p><p>12.6.1制作折叠式导航菜单324</p><p>12.6.2图片轮播效果327</p><p>习题331</p><p>第13章jQuery UI插件的应用333</p><p>13.1jQuery UI概述333</p><p>13.1.1jQuery UI简介333</p><p>13.1.2jQuery UI的下载334</p><p>13.1.3jQuery UI的使用335</p><p>13.1.4jQuery UI的工作原理336</p><p>13.2jQuery UI的常用插件339</p><p>13.2.1按钮插件339</p><p>13.2.2自动完成插件341</p><p>13.2.3进度条插件344</p><p>13.2.4滑块插件346</p><p>13.2.5旋转器插件348</p><p>13.2.6日期选择器插件350</p><p>13.2.7折叠面板插件352</p><p>13.2.8标签页插件355</p><p>习题357</p><p>第14章综合案例——宇宙电子网站359</p><p>14.1网站的开发流程和组织结构359</p><p>14.1.1网站的开发流程359</p><p>14.1.2创建站点目录360</p><p>14.1.3网站页面的组成361</p><p>14.2网站技术分析361</p><p>14.3制作首页362</p><p>14.4制作关于公司页370</p><p>14.5制作联系我们页373</p><p>14.6网站的整合377</p><p>习题377</p><p>参考文献379</p>

前沿

前言随着HTML 5规范的日臻完善和普及，Web前端开发技术也越来越引人注目，如何开发Web应用程序，设计精美、独特的网页已经成为当前的热门技术之一。为适应现代技术的飞速发展，培养出技术能力强、能快速适应网站开发行业需求的高级技能型人才，帮助众多喜爱网站开发的人员提高网站的设计及编码水平，编者结合自己多年从事教学工作和Web应用开发的实践经验，按照教学规律精心编写了本书。在Web应用程序中，大多数网页是由HTML语言设计的。在HTML语言中可以嵌入JavaScript语言，为HTML网页添加动态交互功能。而jQuery是一套轻量级的JavaScript脚本库，它是目前最热门的Web前端开发技术之一。jQuery的语法很简单，它的核心理念是“write less, do more（少写多做）”。与其他语言相比，实现同样的功能时，使用jQuery需要编写的代码更少。目前，很多高校的计算机专业和IT培训班都将HTML 5 jQuery作为教学内容之一，这对培养学生的计算机应用能力具有非常重要的意义。本书采用“模块化设计、任务驱动学习”的编写模式，在任务驱动学习的具体实施中，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，自始至终贯穿于本书中。在实例的设计、制作过程中，把对应章节的知识点融于实例中，使读者能够快速掌握概念和操作方法。本书以宇宙电子案例网站的设计与制作为讲解主线，围绕网站栏目的设计，全面系统地介绍了网页制作、设计、规划的基本知识以及网站开发的完整流程。考虑到网页制作具有较强的实践性，本书配备大量的页面例题和丰富的运行效果图，能够有效地帮助读者理解所学的理论知识，系统全面地掌握网页制作技术。本书所有案例均采用案例驱动的讲述方式，以便深入浅出、循序渐进地引导读者学习。本书在每章之后附有大量的实践操作习题，并在教学课件中给出习题答案，供读者巩固所学的内容。本书由刘瑞新、张兵义主编，罗东华担任副主编。具体编写分工为：刘瑞新编写第1、9、10章，张兵义编写第2、11、12章，吕振雷编写第3、13章，殷莺编写第4章，罗东华编写第5、14章，李颖编写第7章，第6章由李建彬、刘大学、陈周、骆秋容、刘克纯、缪丽丽、刘大莲共同编写完成并进行教学资源的制作，第8章由彭守旺、庄建新、彭春芳、崔瑛瑛、翟丽娟、韩建敏、庄恒、徐维维、徐云林、马春锋、孙洪玲、杨丽香、杨占银共同编写完成并进行资料的整理、代码的测试。参加编写的大部分人员都是具有多年计算机教学与培训以及网站制作经验的教师。由于编写水平有限，书中难免有不足之处，恳请读者提出宝贵的意见和建议。
编者2018年2月

免费在线读

第3章HTML 5页面的布局与交互第3章HTML 5页面的布局与交互网页的布局是指对网页上元素的位置进行合理的安排，一个具有好的布局的网页，往往给浏览者带来赏心悦目的感受。表单是网站管理者与访问者之间进行信息交流的桥梁，利用表单可以收集用户意见，做出科学决策。前面讲解了网页的基本排版方法，并未涉及元素的布局与页面交互，本章将重点讲解使用HTML标签布局页面及实现页面交互的方法。3.1使用结构元素构建网页布局HTML 5可以使用结构元素构建网页布局，使Web设计和开发变得容易起来。HTML 5提供了各种切割和划分页面的手段，允许用户创建的切割组件不仅能用来逻辑地组织站点，而且能够赋予网站聚合的能力。HTML 5是“信息到网站设计的映射方法”，因为它体现了信息映射的本质，划分信息，并给信息加上标签，使其变得容易使用和理解。在HTML 5中，为了使文档的结构更加清晰明确，使用文档结构元素构建网页布局。HTML 5中的主要文档结构元素如下。

标签：代表文档中的一段或者一节。

标签：用于构建导航。

标签：页面的页眉。