图文详情

HTML5应用开发与实践

买书，就上二手书海官方企业店，标题和图片不符下单前请联系客服确认，不确认只发单本! ps：下午三点之前的订单当天发货，之后明天发货，特殊情况除外。

彭纳新、支援编 / 人民邮电出版社 / 2014-06 / 平装

售价 0.39

品相 八五品品相描述

优惠

发货

承诺48小时内发货

运费

本店暂时无法向该地区发货

延迟发货说明

时间：

说明：

上书时间2025-07-15

数量: 库存13件

立即购买加入购物车收藏

卖家超过10天未登录

八年老店

二手书海官方企业店

店铺等级

拍卖等级

资质认证

90天平均

成功完成

93.79% (2058笔)

好评率

99.33%

发货时间

10.01小时

店主

bookersea

联系

在线交谈离线留言

地址

河南省鹤壁市浚县

电话

进店逛逛收藏店铺

商品详情
店铺评价

立即购买加入购物车收藏

手机购买

微信扫码访问

图书条目信息
图书 > 计算机与互联网
HTML5应用开发与实践
作者: 彭纳新编；支援编

出版社: 人民邮电出版社

出版时间: 2014-06

版次: 01

ISBN: 9787115352408

定价: 56.00

装帧: 平装

开本: 16开

纸张: 胶版纸

页数: 374页

字数: 632千字

正文语种: 简体中文

丛书: 普通高等学校计算机教育“十二五”规划教材
内容简介：

　　本书作为HTML5课程的教材，首先用较大篇幅详细讲解了HTML5技术，然后讲解CSS3技术，之后用一定篇幅介绍JavaScript技术，最后讲解三者的搭配应用，并通过大案例综合应用。全书共分18章，内容包括HTML5概述、HTML5的元素与属性、HTML5表单、文件与拖放、绘制图形、HTML5中的多媒体、HTML5的数据存储、离线Web应用和地理定位、CSS3基础、CSS3字体与文本相关属性、CSS3美化背景与边框、变形与动画相关属性、JavaScript概述、JavaScript语言基础、JavaScript内置对象、JavaScript对象编程与事件处理、HTML5、CSS3与JavaScript综合应用、课程设计——旅游信息网前台。全书每章内容都与实例紧密结合，有助于学生理解知识、应用知识，达到学以致用的目的。
　　本书附有配套DVD光盘，光盘提供与本书所有实例、综合实例和课程设计的源代码、制作精良的PPT电子课件及教学录像。其中，源代码全部经过精心测试，能够在Windows XP、Windows 2003、Windows 7、Windows 8系统下编译和运行。
　　本书可作为本科计算机专业、软件学院、高职软件专业及相关专业的教材，同时也适合网站开发爱好者和初、中级的HTML5网页开发人员参考使用。

目录：

目　录

第1章　HTML5概述　1
1．1　HTML5简介　1
1．1．1　HTML发展历程　1
1．1．2　HTML开发组织　2
1．1．3　HTML5的新特性　2
1．2　HTML的标签构成　3
1．2．1　HTML标签概述　3
1．2．2　开始标签　4
1．2．3　头部标签　4
1．2．4　标题标签　5<br>1．2．5　主体标签<body>　5<br>1．2．6　编写时注意事项　5<br>1．3　HTML文件的编写方法　6<br>1．3．1　手工编写页面　6<br>1．3．2　使用可视化软件制作页面　7<br>1．3．3　使用浏览器浏览HTML文件　10<br>1．4　综合实例——在浏览器中输出“你好”　11<br>知识点提炼　11<br>习题　11<br><br>第2章　HTML5的元素与属性　12<br>2．1　HTML5的语法变化　12<br>2．1．1　HTML5中的标记方法　12<br>2．1．2　HTML5与之前版本的不同　13<br>2．2　新增的元素和废除的元素　14<br>2．2．1　新增的结构元素　14<br>2．2．2　新增的行内(inline)语义元素　15<br>2．2．3　新增的块级(block)语义元素　15<br>2．2．4　新增的input元素的类型　16<br>2．2．5　新增的多媒体元素与交互性元素　16<br>2．2．6　废除的元素　17<br>2．3　新增的属性和废除的属性　18<br>2．3．1　新增的属性　18<br>2．3．2　废除的属性　20<br>2．4　全局属性　22<br>2．4．1　designMode属性　22<br>2．4．2　hidden属性　22<br>2．4．3　contentEditable属性　22<br>2．4．4　tabindex属性　23<br>2．4．5　spellcheck属性　23<br>2．5　综合实例——检查单词的拼写情况　24<br>知识点提炼　24<br>习题　24<br><br>第3章　HTML5表单　25<br>3．1　表单概述　25<br>3．2　表单的基本元素　26<br>3．2．1　表单标记及其属性　26<br>3．2．2　表单基本元素　29<br>3．3　表单新增元素　40<br>3．3．1　新增表单元素与属性　40<br>3．3．2　验证表单　46<br>3．3．3　新增和改良的页面元素　48<br>3．4　综合实例——search搜索类型的input元素　55<br>知识点提炼　56<br>习题　56<br><br>第4章　文件与拖放　58<br>4．1　选择文件　58<br>4．1．1　FileList对象与file对象　58<br>4．1．2　Blob对象的属性　59<br>4．1．3　通过类型过滤文件　60<br>4．2　使用FileReader对象读取文件　62<br>4．2．1　检测浏览器对FileReader对象的支持　62<br>4．2．2　FileReader对象的方法　62<br>4．2．3　实现图片的预览　62<br>4．2．4　文本文件的读取　64<br>4．2．5　FileReader对象中的事件　65<br>4．3　拖放API的使用　66<br>4．3．1　实现拖放的步骤　66<br>4．3．2　拖放实例　67<br>4．4　dataTransfer对象　69<br>4．4．1　设置拖放效果　69<br>4．4．2　设置拖放图标　70<br>4．5　综合实例——使用拖放API将商品拖入购物车　71<br>知识点提炼　73<br>习题　73<br><br>第5章　绘制图形　74<br>5．1　canvas基础　74<br>5．1．1　canvas元素简介　74<br>5．1．2　插入canvas元素　74<br>5．1．3　绘制矩形实例　76<br>5．2　使用路径绘制圆形　77<br>5．2．1　绘制圆形　77<br>5．2．2　绘制火柴人　78<br>5．2．3　绘制贝塞尔曲线　80<br>5．3　运用样式与颜色　82<br>5．3．1　fillStyle 和 strokeStyle属性　82<br>5．3．2　globalAlpha属性　84<br>5．3．3　线型Line styles　85<br>5．4　实现图形的变形　87<br>5．4．1　坐标的变换　87<br>5．4．2　矩阵变换　88<br>5．5　绘制渐变图形　91<br>5．5．1　绘制线性渐变　91<br>5．5．2　绘制径向渐变　92<br>5．6　绘制阴影和组合图形　93<br>5．6．1　绘制阴影　93<br>5．6．2　绘制组合图形　94<br>5．7　绘制文字　96<br>5．8　应用图像　97<br>5．8．1　绘制图像　97<br>5．8．2　图像的局部放大　99<br>5．8．3　图像平铺　100<br>5．8．4　图像裁剪　102<br>5．8．5　处理像素　102<br>5．9　保存与恢复状态　103<br>5．10　文件的保存　104<br>5．11　使用画布绘制动画　104<br>5．12　综合实例——绘制桌面时钟　105<br>知识点提炼　108<br>习题　108<br><br>第6章　HTML5中的多媒体　109<br>6．1　HTML5页面中的多媒体　109<br>6．2　多媒体元素的属性　110<br>6．3　多媒体元素的方法　114<br>6．3．1　媒体播放时的方法　114<br>6．3．2　canPlayType方法　115<br>6．4　多媒体元素的事件　116<br>6．4．1　事件处理　116<br>6．4．2　事件介绍　116<br>6．5　综合实例——用timeupdate事件动态显示媒体文件播放时间　117<br>知识点提炼　119<br>习题　119<br><br>第7章　HTML5的数据存储　120<br>7．1　Web Storage　120<br>7．1．1　Web Storage简介　120<br>7．1．2　WebStorage的API　121<br>7．1．3　两种不同存储类型的实例——计数器　122<br>7．1．4　JSON对象的存储实例——用户信息卡　124<br>7．2　Web SQL数据库　126<br>7．2．1　Web SQL数据库简介　126<br>7．2．2　Web SQL Database API的使用　126<br>7．3　跨文档消息通信　128<br>7．3．1　postMessageAPI的使用　128<br>7．3．2　跨文档消息传输　128<br>7．4　综合实例——简单的Web留言本　130<br>知识点提炼　132<br>习题　132<br><br>第8章　离线Web应用和地理定位　133<br>8．1　HTML5离线Web应用　133<br>8．1．1　HTML5离线Web应用概述　133<br>8．1．2　创建HTML5离线应用　135<br>8．1．3　浏览器与服务器的交互　137<br>8．1．4　applicationCache对象　138<br>8．2　获取地理位置　142<br>8．2．1　Geolocation API概述　142<br>8．2．2　position对象　144<br>8．3　综合实例——在页面上使用google地图　146<br>知识点提炼　147<br>习题　148<br><br>第9章　CSS3基础　149<br>9．1　CSS3概述　149<br>9．2　CSS3新特性　150<br>9．3　CSS3选择器　151<br>9．3．1　选择器概述　151<br>9．3．2　属性选择器　152<br>9．3．3　结构性伪类选择器　154<br>9．3．4　UI元素状态伪类选择器　161<br>9．3．5　通用兄弟元素选择器　166<br>9．4　综合实例——生动的列表导航　167<br>知识点提炼　170<br>习题　171<br><br>第10章　CSS字体与文本相关属性　172<br>10．1　给文字添加阴影——text-shadow属性　172<br>10．1．1　text-shadow属性的使用方法　172<br>10．1．2　指定多个阴影　174<br>10．2　文本相关属性　174<br>10．2．1　文本自动换行：word-break　174<br>10．2．2　长单词和URL地址换行　175<br>10．3　CSS 3新增的服务器字体　176<br>10．3．1　使用服务器字体　176<br>10．3．2　定义粗体、斜体字　177<br>10．3．3　优先使用客户端字体　179<br>10．4　使用font-size-adjust属性微调字体大小　180<br>10．4．1　字体不同导致文字大小的不同　180<br>10．4．2　font-size-adjust属性的使用方法　181<br>10．4．3　font-size-adjust属性的使用示例　181<br>10．5　综合实例——设计立体文本　182<br>知识点提炼　183<br>习题　183<br><br>第11章　CSS3美化背景与边框　184<br>11．1　设置背景　184<br>11．1．1　设置背景颜色　184<br>11．1．2　设置背景图片　186<br>11．1．3　CSS 3新增的与背景相关的属性　189<br>11．2　边框设置　193<br>11．2．1　设置边框的线宽　193<br>11．2．2　设置边框的样式　195<br>11．2．3　设置边框的颜色　196<br>11．2．4　边框综合属性　197<br>11．2．5　CSS 3新增的与边框相关的属性　198<br>11．3　内外边距的相关属性　201<br>11．3．1　设置内边距　201<br>11．3．2　设置外边距　202<br>11．4　综合实例——设计企业门户网站首页　203<br>知识点提炼　205<br>习题　205<br><br>第12章　变形与动画相关属性　206<br>12．1　CSS变形(Transformation)　206<br>12．1．1　变形基础——transform属性　206<br>12．1．2　旋转动画——rotate()函数　207<br>12．1．3　缩放动画——scale()函数　208<br>12．1．4　移动动画——translate()函数　210<br>12．1．5　倾斜动画——skew()函数　211<br>12．1．6　变形原点——transform-origin属性　213<br>12．2　CSS过渡——transition属性　214<br>12．2．1　设置过渡的CSS属性——transition-property属性　214<br>12．2．2　设置过渡的时间——transition-duration属性　216<br>12．2．3　设置过渡延迟时间——transition-delay属性　217<br>12．2．4　设置过渡效果——transition-timing-function属性　218<br>12．3　CSS动画——animation属性　220<br>12．4　综合实例——模拟进度条效果　223<br>知识点提炼　224<br>习题　225<br><br>第13章　JavaScript概述　226<br>13．1　JavaScript概貌　226<br>13．1．1　JavaScript的历史起源　226<br>13．1．2　JavaScript的主要特点　227<br>13．1．3　JavaScript成功案例　227<br>13．2　搭建JavaScript开发环境　229<br>13．2．1　硬件要求　229<br>13．2．2　软件要求　229<br>13．2．3　浏览器对JavaScript的支持　230<br>13．3　编写JavaScript的工具　231<br>13．3．1　Adobe Dreamweaver　231<br>13．3．2　Microsoft FrontPage　232<br>13．4　JavaScript在HTML中的使用　232<br>13．4．1　在页面中直接嵌入JavaScript　232<br>13．4．2　链接外部JavaScript　233<br>13．5　综合实例——用JS输出中文字符串　233<br>知识点提炼　234<br>习题　234<br><br>第14章　JavaScript语言基础　235<br>14．1　JavaScript数据结构　235<br>14．1．1　标识符　235<br>14．1．2　关键字　236<br>14．1．3　常量　236<br>14．1．4　变量　236<br>14．2　数据类型　238<br>14．2．1　数字型数据　238<br>14．2．2　字符串型数据　239<br>14．2．3　布尔型数据　240<br>14．2．4　特殊数据类型　240<br>14．2．5　数据类型的转换规则　241<br>14．3　运算符与表达式　242<br>14．3．1　算术运算符　243<br>14．3．2　比较运算符　243<br>14．3．3　赋值运算符　244<br>14．3．4　字符串运算符　245<br>14．3．5　布尔运算符　245<br>14．3．6　条件运算符　245<br>14．3．7　其他运算符　246<br>14．3．8　运算符优先级　247<br>14．3．9　表达式　248<br>14．4　流程控制语句　248<br>14．4．1　条件控制语句　248<br>14．4．2　循环控制语句　255<br>14．4．3　跳转语句　257<br>14．5　函数　259<br>14．5．1　函数的定义　259<br>14．5．2　函数的调用　260<br>14．5．3　几种特殊的函数　263<br>14．6　综合实例——将长数字分位显示　268<br>知识点提炼　269<br>习题　269<br><br>第15章　JavaScript内置对象　271<br>15．1　字符串对象String　271<br>15．1．1　search方法　271<br>15．1．2　match方法　272<br>15．1．3　split方法　272<br>15．1．4　replace方法　273<br>15．2　常用的数值处理对象　273<br>15．2．1　Math对象　273<br>15．2．2　Number对象　275<br>15．2．3　Boolean对象　279<br>15．2．4　Date对象　280<br>15．3　数组对象　283<br>15．3．1　数组对象Array　283<br>15．3．2　常用的数组操作方法　286<br>15．3．3　获取数组中的某段数组元素　289<br>15．3．4　将数组转换成字符串　290<br>15．4　综合实例——使用数组存储商品信息　291<br>知识点提炼　291<br>习题　292<br><br>第16章　JavaScript对象编程与事件处理　293<br>16．1　文档(document)对象　293<br>16．1．1　文档对象的常用属性、方法与事件　294<br>16．1．2　Document对象的应用　296<br>16．2　窗口(window)对象　302<br>16．2．1　窗口对象的常用属性与方法　302<br>16．2．2　控制窗口　304<br>16．2．3　窗口事件　311<br>16．3　DOM对象　312<br>16．3．1　DOM概述　312<br>16．3．2　DOM对象节点属性　313<br>16．3．3　操作节点　318<br>16．3．4　获取文档中的指定元素　324<br>16．4　事件处理　325<br>16．4．1　事件与事件处理概述　325<br>16．4．2　DOM事件模型　328<br>16．4．3　表单相关事件　331<br>16．4．4　鼠标键盘事件　335<br>16．4．5　页面事件　339<br>16．5　综合实例——动态设置网页的标题栏　341<br>知识点提炼　342<br>习题　343<br><br>第17章　HTML5、CSS3与JavaScript综合应用　344<br>17．1　综合实例 1——文字升降特效　344<br>17．2　综合实例 2——闪烁的图片　345<br>17．3　综合实例 3——左右移动的图片　346<br>17．4　综合实例 4——自动隐藏菜单　348<br>17．5　综合实例 5——树状导航菜单　351<br>17．6　综合实例 6——颜色选择器　353<br><br>第18章　课程设计——旅游信息网前台　357<br>18．1　需求分析　357<br>18．2　系统设计　357<br>18．2．1　系统目标　357<br>18．2．2　网站预览　357<br>18．3　开发及运行环境　359<br>18．4　关键技术　360<br>18．4．1　网站主题结构设计　360<br>18．4．2　HTML5结构元素的使用　360<br>18．5　网站公共部分设计　361<br>18．5．1　设计网站公共header　361<br>18．5．2　设计网站公共footer　367<br>18．6　网站主页设计　367<br>18．6．1　显示网站介绍及相关图片　368<br>18．6．2　主页左侧导航的实现　369<br>18．7　“留下足迹”页面设计　371<br>18．7．1　播放音乐　372<br>18．7．2　添加留言功能的实现　372<br>18．8　课程设计总结　374</p> </dd> </dl> </div> </div>  <p class="open-more">展开全部</p> </div>    <div class="book-itemSn"> <dl class="book-itemSn-desc"> <dt>货号：</dt> <dd> <span>wk-021119</span> </dd> </dl> </div>    <div class="book-describe"> <dl class="book-quality-desc"> <dt>品相描述：八五品</dt> <dd> 正版二手，几十万种图书无法都提供实拍图，但均为7-9成新，无缺页、会有瑕疵或者少许磨损、或多或少都会有划线、笔记、涂写等，不影响使用。均不保证有光盘、卡片等，辅导习题类笔记较多；书籍有多封面的新老封面随机发货，内容一致，不影响使用，介意勿拍！图片孔网自动匹配，图片与标题不符时以及图片为套装，与标题不符时的下单前请咨询客服，望周知！ </dd> </dl> </div>      <div class="dispatch-instruct"> <p class="dispatch-title">配送说明</p> <p class="dispatch-text"> ... </p> </div>     <div class="other_special"></div>  <div class="special-intro resemble_goods"> <div class="book_list_box"> <p class="book_list_title">相似商品</p> <ul class="clearfix"> </ul> </div> </div>  <div class="special-intro recommend_goods"> <div class="book_list_box"> <p class="book_list_title">为你推荐</p> <ul class="clearfix"> </ul> </div> </div> </li> <li class="shop-remark-page" style="display: none">  <div class="shop-reviews-wrap" id="shop-reviews"></div> </li> </ul> <div class="shelter-block"></div> </div>  <div class="left-block"> <div id="shortNotice"> </div> <script id="shortNotice-tpl" type="text/x-dot-template"> {{? it.content}} <div class="temporary_box"> <div class="temporary_title i_title clearfix"> <span class="pull-left">临时通知</span> </div> <div class="temporary_content"> <p> {{=it.content || ''}} </p> <div class="temporary_time"> {{=it.modifyTime || it.createTime || ''}} </div> <div class="btn-box up clearfix" style="display: none;"> <div class="open-btn btn pull-right"><span>展开全部</span><i class="iconfont icon-xiala"></i></div> <div class="close-btn btn pull-right"><span>收起</span><i class="iconfont icon-shangshou"></i></div> </div> </div> </div> {{?}} </script> <script type="application/javascript"> window.shortNoticeData = {"shopId":"240018"} || {}; </script>   <div class="CategoryBar_box"> <div class="CategoryBar_title i_title">孔网分类</div> <div class="CategoryBar_content"> <div class="CategoryBar_content_title">孔网特色</div> <ul> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_6/" target="_blank">外文古旧书<i>(3)</i></a></li> </ul> <div class="CategoryBar_content_title">图书</div> <ul> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_32/" target="_blank">教材教辅考试<i>(66809)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_1/" target="_blank">文学<i>(9561)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_27/" target="_blank">童书<i>(7761)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_31/" target="_blank">计算机与互联网<i>(7728)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_11/" target="_blank">工程技术<i>(6643)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_44/" target="_blank">哲学心理学<i>(6017)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_13/" target="_blank">语言文字<i>(5898)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_4/" target="_blank">艺术<i>(5330)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_43/" target="_blank">小说<i>(4726)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_25/" target="_blank">管理<i>(4251)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_14/" target="_blank">经济<i>(4208)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_26/" target="_blank">生活<i>(4120)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_15/" target="_blank">自然科学<i>(3221)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_7/" target="_blank">社会文化<i>(3076)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_12/" target="_blank">国学古籍<i>(1996)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_3/" target="_blank">历史<i>(1922)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_17/" target="_blank">医药卫生<i>(1417)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_28/" target="_blank">教育<i>(1403)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_5/" target="_blank">法律<i>(1238)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_18/" target="_blank">政治<i>(1051)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_20/" target="_blank">综合性图书<i>(605)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_19/" target="_blank">体育<i>(376)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_24/" target="_blank">军事<i>(160)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_29/" target="_blank">宗教<i>(74)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_59/" target="_blank">收藏与鉴赏<i>(67)</i></a></li> <li class="special_item"><a href="https://shop.kongfz.com/240018/cat_23/" target="_blank">地理<i>(36)</i></a></li> </ul> </div> </div> </div> </div> </div> </div>  <div class="foot-help-wrapper"></div> <div class="footer-box"> <div class="footer-wrap clearfix"> <div class="copyright-info-box">© 2002-2025 Kongfz.com 孔夫子旧书网版权所有</div> <div class="link-box"> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/aboutus.php">关于孔网</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/lianxi.html">联系我们</a> <a class="item" target="_blank" rel="nofollow" href="https://help.kongfz.com/">帮助中心</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/copyright.php">版权隐私</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/guanggao.php">广告业务</a> <a class="item" target="_blank" rel="nofollow" href="https://www.kongfz.com/help/zhaopin.php">工作机会</a> <a class="item" target="_blank" href="https://m.kongfz.com/">移动版</a> <a class="item" target="_blank" href="https://book.kongfz.com/">图书目录</a> <a class="item" target="_blank" href="https://bq.kongfz.com/">图书标签</a> <a class="item" target="_blank" href="https://www.kongfz.com/topic/">热搜书籍</a> <a class="item" target="_blank" href="https://www.kongfz.com/writer/">作家大全</a> </div> </div> </div>  <div class="liveroom-entry-window">  <div class="preview-entry"> <img src="../../../../img/live/close-icon.png" class="close-icon"> <img src="" class="poster" id="prepare-poster" onerror="this.src='../../../../img/live/error_image.jpg'"> <div class="info"> <h6 class="live-name">孔网啦啦啦啦啦纺织女工火锅店第三课</h6> <p class="start-time-line">开播时间：<span class="start-time">09月02日 10:30</span></p> </div> <div class="tip">即将开播，去预约</div> </div>  <div class="running-entry"> <img src="../../../../img/live/close-icon.png" class="close-icon"> <div class="video-wrap"> <video id="live-video" src="" muted loop autoplay="true"></video> <img src="" class="poster" id="running-poster" onerror="this.src='../../../../img/live/error_image.jpg'"/> </div> <div class="tip"><img src="../../../../img/live/living.gif" class="live-icon"> 直播中，去观看</div> </div> </div>  <div class="liveroom-entry-window-mini" style="bottom:260px;"> <div class="icon-wrap"> <img src="../../../../img/live/living.gif" class="live-icon"> <img src="../../../../img/live/living-static.png" class="live-icon-static"> </div> <span class="liveroom-entry-txt"></span> </div>  <script type="text/x-dot-template" id="layout-content"> {{~it.tiaojian:value:index}} <dl> <dt><i class="small-block"></i> {{? value.neirong}} {{= value.neirong}} {{?}} {{? value.delivery}} ({{= value.delivery}}) {{?}} </dt> <dt>包邮地区：</dt> <dd>{{= value.area}}</dd> </dl> {{~}} {{? it.startTime&&it.realEndTime&&it.stateText}} <p class="cross-line"></p> {{?}} {{? it.startTime&&it.realEndTime}} <dl style="margin-top: 10px"> <dt>活动时间：</dt> <dd>从{{=it.startTime}}开始,到{{=it.realEndTime}}结束</dd> </dl> {{?}} {{? it.stateText}} <dl> <dt>活动说明：</dt> <dd>{{=it.stateText}}</dd> </dl> {{?}} </script> <div id="layout-content-text" style="display: none"> </div>  <script id="exp-group" type="text/x-dot-template"> <span class="express-result"> <span class="express-val"></span> <span class="iconfont"> <i class="icon-xiala"></i> <i class="icon-shangshou"></i> </span> </span> <ul class="express-layout"> {{~it.feeInfo:value:index}} {{? index != it.key}} {{? value.shippingId == 'noLogistics' || value.shippingId == 'negotiable'}} <li index="{{= index}}">{{= value.shippingName }}</li> {{?? value.shippingId == 'group'}} <li index="{{= index}}">{{= value.shippingName }} {{= value.initialFee}}</li> {{??}} <li index="{{= index}}">{{= value.shippingName }} ￥{{= value.initialFee}}</li> {{?}} {{?}} {{~}} </ul> </script>  <script id="express-group" type="text/x-dot-template"> {{? it.other.isShowExpress}} <span class="express-box">{{= it.other.expressInfo['shippingName'] + " " + '￥' + it.other.expressInfo['initialFee'] }}</span> {{?}} {{? it.other.isShowRegisterPost}} <span class="registerPost-box">{{= it.other.registerPostInfo['shippingName'] + " " + '￥' + it.other.registerPostInfo['initialFee'] }}</span> {{?}} {{? it.other.otherInfo.length == 1}} <div class="express-result-outbox"> <span class="express-result one"> <span class="express-val"></span> </span> </div> {{?}} {{? it.other.otherInfo.length > 1}} <div class="express-result-outbox"> <span class="express-result"> <span class="express-val"></span> <span class="iconfont"> <i class="icon-xiala"></i> <i class="icon-shangshou"></i> </span> </span> <ul class="express-layout"> {{~it.other.otherInfo:value:index}} {{? index != it.key}} {{? value.shippingId == 'noLogistics' || value.shippingId == 'negotiable'}} <li index="{{= index}}">{{= value.shippingName }}</li> {{?? value.shippingId == 'group'}} <li index="{{= index}}">{{= value.shippingName }} {{= value.initialFee}}</li> {{??}} <li index="{{= index}}">{{= value.shippingName }} ￥{{= value.initialFee}}</li> {{?}} {{?}} {{~}} </ul> </div> {{?}} </script>  <script id="add-cart-layout" type="text/template"> <div class="cart-text"><p><i class="iconfont icon-gouwuche2"></i>成功加入购物车</p></div> <div class="cart-link clearfix"><a>去购物车结算</a></div>', </script>  <script id="template_notice_item" type="text/template"> <div class="win_content" id="product_change"> <ul class="bt clearfix"> <li class="part_left pull-left">商品</li> <li class="part_right pull-right">提示信息</li> </ul> <div id='book_content_box' class="book_content_box" style="height: <%= function(){ var count = 0; for (var property in item) { if (Object.prototype.hasOwnProperty.call(item, property)) { count++; } } return 66*count; }() %>px"> <% $.each(item, function(i, book){ %> <ul class="clearfix <%= ( !KFZ.itemAllFail && book.detail != 'noticeItem') ? 'bg_gray':'' %>"> <li class="part_left pull-left"> <div class="shop_name"><a><%= book.itemName %></a></div> <div class="number"> <span class="<%= book.detail == 'noticeItem' ? 'del':'' %> m_r10"> <% if(book.detail == 'noticeItem' || book.detail == 'invalidItem'){ %> ¥<%= (+book.originPrice).toFixed(2) %> ×<%= book.originStock %> <% }else{ %> ¥<%= (+book.price).toFixed(2) %> ×<%= book.numbers %> <% } %> </span> <% if(book.detail == 'noticeItem'){ %> <% if(book.currentPrice){ %> <span class="red">¥<%= (+book.currentPrice).toFixed(2) %> ×<%= book.currentStock || book.originStock %></span> <% }else{ %> <span class="red">¥<%= (+book.originPrice).toFixed(2) %> ×<%= book.currentStock || book.originStock %></span> <% } %> <% } %> </div> </li> <li class="part_right pull-right"><%= book.desc %></li> </ul> <% }); %> </div> </script>  <script id="shop-reviews-nav" type="text/x-dot-template"> <div class="shop-reviews"> <div class="shop-reviews-label clear-fix"> <div class="shop-reviews-rate"> <div class="shop-reviews-rate-text">好评率</div> <div class="shop-reviews-rate-socre"><span class="shop-reviews-rate-nu">{{=it.goodReviewRate}}</span><span class="shop-reviews-rate-perc">%</span></div> </div> <div class="shop-reviews-label-itemW"> <div class="shop-reviews-label-wrapper"> {{ for(var prop in it.reviewCusTag) { }} <span class="shop-reviews-label-item" data-rate="{{= it.reviewCusTag[prop].rating}}">{{= it.reviewCusTag[prop].tagName }}({{= it.reviewCusTag[prop].num}})</span> {{ } }} <div class="shop-reviews-emptyLabel">此店铺暂时还没有买家印象哦~</div> </div> </div> </div> <div class="filter-area clear-fix"> <ul class="review-filter clear-fix"> <li class="selected" data-lev="{{=it.reviewPlainTag[0].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[0].tagName}} <span class="total-count">{{=it.reviewPlainTag[0].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[1].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[1].tagName}} <span class="good-count">{{=it.reviewPlainTag[1].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[2].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[2].tagName}} <span class="good-count">{{=it.reviewPlainTag[2].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[3].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[3].tagName}} <span class="common-count">{{=it.reviewPlainTag[3].num}}</span> </li> <li class="" data-lev="{{=it.reviewPlainTag[4].rating}}"> <div class="iconfont-box"> <i class="iconfont icon-yuanxuankuang"></i> <i class="iconfont icon-yuangouxuan"></i> </div> {{=it.reviewPlainTag[4].tagName}} <span class="bad-count">{{=it.reviewPlainTag[4].num}}</span> </li> </ul> {{? it.onlyItem != 0}} <div class="filter-current"> <div class="iconfont-box"> <i class="iconfont icon-fangxuankuang"></i> <i class="iconfont icon-fanggouxuan"></i> </div> <span>只看当前商品评价</span> </div> {{?}} </div> <div class="shop-reviews-container"> <div class="review-container-inner"> </div> </div> <div class="review-hide-content"> <div class="review-hide-content-auto"></div> <div class="review-hide-content-noHelp">已折叠对您购买参考帮助不大的评价 <span class="review-hide-content-click">查看</span></div> </div> <div class="pager-wrapper clearfix"> </div> </div> </script> <script id="shop-reviews-content" type="text/x-dot-template"> {{~it:reviewItem:reviewIndex}} <div class="review-content clear-fix"> <div class="review-user-pic"><img src="{{=reviewItem.userPic || '/img/pc/default_avator.jpg'}}" onerror="javascript:this.src='/img/pc/default_avator.jpg';" alt=""></div> <div class="review-content-block"> <div class="review-content-userInfo"> <span class="review-content-userName">{{=reviewItem.appraiserNickname}}</span> <span class="marker-rank rank-style-{{=reviewItem.buyerClass}}"></span> </div> <div class="review-content-shopName">{{=reviewItem.itemName}}</div> <div class="review-content-mainTxt">{{=reviewItem.content}}</div> {{if (reviewItem["reviewPic"].length > 0) {}} <div class="review-content-imageWrapper"> <div class="review-content-imageWrapper-small clear-fix"> {{~reviewItem.reviewPic:picItem:reviewImgIndex}} <div class="review-content-imageItem" data-index="{{= reviewIndex}}-{{= reviewImgIndex}}"><img src="{{= picItem.small.imgUrl}}" alt=""> {{? reviewItem.contentType == 1}} {{? picItem.big.width > picItem.big.height}} <img class="hover-big-img" style="width: 209px;height: {{= picItem.big.height * 209 / picItem.big.width + 'px' }}" src="{{= picItem.big.imgUrl}}" alt=""> {{??}} <img class="hover-big-img" style="height: 228px;width: {{= picItem.big.width * 228 / picItem.big.height + 'px' }}" src="{{= picItem.big.imgUrl}}" alt=""> {{?}} {{?}} </div> {{~}} </div> <div class="review-content-bigImg empty_height" id="bigImg{{=reviewIndex}}"> <div class="review-content-bigImg-close"><img src="/img/pc/icon/close.png" alt=""></div> <div class="review-content-bigImg-slideLeft"><img class="slideImg" src="/img/pc/slide-left.png" alt=""></div> <img src="" alt=""> <div class="review-content-bigImg-slideRight"><img class="slideImg" src="/img/pc/slide-right.png" alt=""></div> </div> </div> {{ } }} {{? reviewItem.reviewTag.length > 0 }} <div class="review-item-tagWrapper clear-fix"> {{~reviewItem.reviewTag:value}} <span class="review-item-tagWrapper-span">{{=value.tagName}}</span> {{~}} </div> {{?}} {{? reviewItem.recontent}} <div class="review-owner-reply"><span class="review-owner-reply-label">店主回复：</span><span class="review-owner-reply-content">{{= reviewItem.recontent}}</span></div> {{?}} <div class="review-content-time">{{=reviewItem.reviewTime}}</div> </div> {{? reviewIndex + 1 < it.length}} <div class="review-review-divid"></div> {{?}} </div> {{~}} </script>  <script id="other_special" type="text/x-dot-template"> {{?it.specialThemeExist==='true'}} <div class="other_special_title">本店其他专题</div> {{??}} <div class="other_special_title">本店专题</div> {{?}} <ul class="other_special_list clearfix"> {{~it.otherThemeList:value:index}} <li><a href="{{=value.specialHref}}" target="_blank">{{=value.specialName}}</a></li> {{~}} </ul> </script> <script type="text/javascript"> window.DETAIL || (window.DETAIL = {}); DETAIL.shopInfo = {}; DETAIL.itemInfo = {}; DETAIL.shopId = 240018; DETAIL.shopKeeperId = 7397902; DETAIL.isShopKeepper = 0; DETAIL.isAdmin = 0; DETAIL.shopInfo = {"shopId":240018,"shopName":"\u4e8c\u624b\u4e66\u6d77\u5b98\u65b9\u4f01\u4e1a\u5e97","nickname":"bookersea","userId":7397902}; DETAIL.itemInfo = {"itemId":8086103625,"bizType":1,"catId":31000000000000000,"itemName":"HTML5\u5e94\u7528\u5f00\u53d1\u4e0e\u5b9e\u8df5","price":0.39,"number":13,"oriPrice":56,"booklibId":506411,"bearShipping":"buyer","isUseMould":1,"mouldId":970826,"weight":0,"weightPiece":0,"productAreaAddress":{"provId":"13000000000","provName":"\u6cb3\u5357\u7701","cityId":"13006000000","cityName":"\u9e64\u58c1\u5e02","areaId":13006004000,"areaName":"\u6d5a\u53bf"},"shippingMould":[]}; DETAIL.isbn = "9787115352408"; </script> <script src="//res2.kongfz.com/mobile/js/track.js?2019070314"></script> <script> var status = 1; window.onload=function () { var id= DETAIL.shopInfo.shopId; var itemname= DETAIL.itemInfo.itemName; var itemid= DETAIL.itemInfo.itemId; var shopid= DETAIL.shopInfo.shopId; var quality="八五品"; track.send('v_bkdetail',{shopid: parseInt(id),shopname:DETAIL.shopInfo.shopName,itemid:itemid,itemname:itemname,shopid:shopid,quality:quality,status:status,isbn:DETAIL.isbn,catnum:DETAIL.itemInfo.catId}); } </script> <script type="text/javascript"> if (!Array.prototype.filter) { Array.prototype.filter = function (fun /*, thisArg */) { "use strict"; if (this === void 0 || this === null) throw new TypeError(); var t = Object(this); var len = t.length >>> 0; if (typeof fun !== "function") throw new TypeError(); var res = []; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; for (var i = 0; i < len; i++) { if (i in t) { var val = t[i]; if (fun.call(thisArg, val, i, t)) res.push(val); } } return res; }; } function openBigImg(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); e.stopPropagation(); } else { e.cancelBubble = true; e.returnValue = false; } var target = e.currentTarget || e.srcElement; if (target.tagName.toLowerCase() !== 'a') { target = target.parentNode } var index = target.getAttribute('data-index'), pathArr = location.pathname.split("/").filter(function (item) { return item !== "" }), shopId = pathArr[0], itemId = pathArr[1]; window.open(KFZ.site.book + "item_pic.do?shopId=" + shopId + "&itemId=" + itemId + "&imgId=" + index, "_blank"); return false } if (typeof JSON !== 'object') { JSON = {}; } (function () { 'use strict'; function f(n) { // Format integers to have at least two digits. return n < 10 ? '0' + n : n; } if (typeof Date.prototype.toJSON !== 'function') { Date.prototype.toJSON = function () { return isFinite(this.valueOf()) ? this.getUTCFullYear() + '-' + f(this.getUTCMonth() + 1) + '-' + f(this.getUTCDate()) + 'T' + f(this.getUTCHours()) + ':' + f(this.getUTCMinutes()) + ':' + f(this.getUTCSeconds()) + 'Z' : null; }; String.prototype.toJSON = Number.prototype.toJSON = Boolean.prototype.toJSON = function () { return this.valueOf(); }; } var cx, escapable, gap, indent, meta, rep; function quote(string) { escapable.lastIndex = 0; return escapable.test(string) ? '"' + string.replace(escapable, function (a) { var c = meta[a]; return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); }) + '"' : '"' + string + '"'; } function str(key, holder) { var i, // The loop counter. k, // The member key. v, // The member value. length, mind = gap, partial, value = holder[key]; if (value && typeof value === 'object' && typeof value.toJSON === 'function') { value = value.toJSON(key); } if (typeof rep === 'function') { value = rep.call(holder, key, value); } switch (typeof value) { case 'string': return quote(value); case 'number': return isFinite(value) ? String(value) : 'null'; case 'boolean': case 'null': return String(value); case 'object': if (!value) { return 'null'; } gap += indent; partial = []; if (Object.prototype.toString.apply(value) === '[object Array]') { length = value.length; for (i = 0; i < length; i += 1) { partial[i] = str(i, value) || 'null'; } v = partial.length === 0 ? '[]' : gap ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' : '[' + partial.join(',') + ']'; gap = mind; return v; } if (rep && typeof rep === 'object') { length = rep.length; for (i = 0; i < length; i += 1) { if (typeof rep[i] === 'string') { k = rep[i]; v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ': ' : ':') + v); } } } } else { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ': ' : ':') + v); } } } } v = partial.length === 0 ? '{}' : gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' : '{' + partial.join(',') + '}'; gap = mind; return v; } } if (typeof JSON.stringify !== 'function') { escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; meta = { // table of character substitutions '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"': '\\"', '\\': '\\\\' }; JSON.stringify = function (value, replacer, space) { var i; gap = ''; indent = ''; if (typeof space === 'number') { for (i = 0; i < space; i += 1) { indent += ' '; } } else if (typeof space === 'string') { indent = space; } rep = replacer; if (replacer && typeof replacer !== 'function' && (typeof replacer !== 'object' || typeof replacer.length !== 'number')) { throw new Error('JSON.stringify'); } return str('', {'': value}); }; } if (typeof JSON.parse !== 'function') { cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; JSON.parse = function (text, reviver) { var j; function walk(holder, key) { var k, v, value = holder[key]; if (value && typeof value === 'object') { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = walk(value, k); if (v !== undefined) { value[k] = v; } else { delete value[k]; } } } } return reviver.call(holder, key, value); } text = String(text); cx.lastIndex = 0; if (cx.test(text)) { text = text.replace(cx, function (a) { return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); }); } if (/^[\],:{}\s]*$/ .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@') .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']') .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { j = eval('(' + text + ')'); return typeof reviver === 'function' ? walk({'': j}, '') : j; } throw new SyntaxError('JSON.parse'); }; } }()); </script> <script src="/js/Pc_detail_index_page-526aee37a2.js"></script>  <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>  <link rel="stylesheet" href="//res2.kongfz.com/libs/viewerjs/detail-viewer.css?v=8" > <script src="//res2.kongfz.com/libs/viewerjs/detail-viewer.js?v=9"></script>  <link rel="stylesheet" href="//res2.kongfz.com/libs/image-viewer/index.css?v=2@2" > <script src="//res2.kongfz.com/libs/image-viewer/index.js?v=2@2"></script> <link href="//res2.kongfz.com/libs/tcplayer/tcplayer.min.css?v=1" rel="stylesheet" /> <script src="//res2.kongfz.com/libs/tcplayer/flv.min.js"></script> <script src="//res2.kongfz.com/libs/tcplayer/hls.min.js"></script> <script src="//res2.kongfz.com/libs/tcplayer/tcplayer.min.js"></script> <script> var __pageName = 'detail'; </script> <script type="text/javascript" src="//res.kongfz.com/browserCollect/browserCollect.js?v=1.0.2"></script> </body> </html>

特色

图书

HTML5应用开发与实践