您好,欢迎来到聚文网。 登录 免费注册
WEB前端设计从入门到实战:HTML5.CSS3.JAVASCRIPT项目案例开发(第2版)/张树明

WEB前端设计从入门到实战:HTML5.CSS3.JAVASCRIPT项目案例开发(第2版)/张树明

  • 字数: 748千字
  • 装帧: 平装
  • 出版社: 清华大学出版社
  • 作者: 张树明
  • 出版日期: 2019-04-01
  • 商品条码: 9787302516286
  • 版次: 2
  • 开本: 其他
  • 页数: 474
  • 出版年份: 2019
定价:¥79.5 销售价:登录后查看价格  ¥{{selectedSku?.salePrice}} 
库存: {{selectedSku?.stock}} 库存充足
{{item.title}}:
{{its.name}}
精选
编辑推荐
本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识,对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解。内容翔实,结构合理,语言精炼,表达简明,实用性强,易于自学。
内容简介
本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识,对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解,内容翔实,结构合理,语言精练,表达简明,实用性强,易于自学。     全书共分23章。第1章介绍了Web技术的基本概念、Web体系结构、超文本与标记语言、Web标准的组成和常用浏览器;第2~7章重点介绍了Web标准的结构推荐标准HTML5的常用元素的标签语句及应用;第8~13章介绍了Web标准的表现推荐标准CSS3的常用属性及应用;第14章介绍了网站制作流程与发布过程;第15~22章介绍了Web标准的行为标准ECMA-262的ECMAScript基础和JavaScript脚本语言;第23章介绍了JavaScript框架jQuery的入门知识。扫描每章提供的二维码可观看知识点的视频讲解及下载程序源码。     本书可作为高等院校计算机专业及相关专业的教材,也可作为相关培训机构的培训教材以及对Web前端设计技术感兴趣的人员的自学用书。
目录
第1章 Web技术概述 1 1.1Internet概述 1 1.1.1TCP/IP 1 1.1.2主机和IP地址 2 1.1.3域名和DNS 3 1.2Web概述 3 1.2.1Web历史 4 1.2.2Web体系结构 5 1.2.3基本Web技术 5 1.2.4Web服务器 9 1.3超文本与标记语言 9 1.3.1超文本与超媒体 10 1.3.2标记语言 10 1.4Web标准 12 1.4.1Web标准体系 13 1.4.2采用Web标准的优势 15 1.5浏览器 15 1.5.1浏览器的发展史 15 1.5.2浏览器的内核 16 1.5.3常用浏览器 16 1.5.4标准浏览器 17 1.6Web开发工具 18 1.6.1JetBrains WebStorm 19 1.6.2测试和调试环境 19 1.7小结 20 1.8习题 20 第2章 初识HTML5 21 2.1HTML5基础 21 2.1.1HTML5文档结构 21 2.1.2元素与标签 22 2.1.3属性 26 2.1.4语法规则 27 2.2WebStorm基础 27 2.2.1WebStorm的基本操作 28 2.2.2WebStorm的快捷键 29 2.3文档结构元素 30 2.3.1标签 31 2.3.2标签 31 2.3.3标签 31 2.4头部元素 31 2.4.1标签 31 2.4.2<meta>标签 32 2.5为叮叮书店首页添加元信息 35 2.6小结 36 2.7习题 36 第3章 HTML5内容结构与文本 37 3.1HTML5结构标签 37 3.1.1<header>标签 38 3.1.2<main>标签 38 3.1.3<nav>标签 38 3.1.4<article>标签 38 3.1.5<section>标签 38 3.1.6<aside>标签 39 3.1.7<footer>标签 39 3.1.8<details>标签和<summary>标签 39 3.1.9标签 39 3.1.10<span>标签 40 3.2HTML5基础标签 40 3.2.1标题 40 3.2.2段落 41 3.2.3换行符 41 3.2.4注释 41 3.3HTML5格式化标签 41 3.3.1文本格式化标签 41 3.3.2引用和术语定义标签 43 3.3.3HTML5新增格式标签 44 3.4HTML5列表 47 3.4.1无序列表 47 3.4.2有序列表 48 3.4.3定义列表 49 3.5叮叮书店首页内容结构的建立 49 3.5.1分析设计页面内容结构 50 3.5.2用HTML5结构标签确定页面内容结构 50 3.5.3添加文本内容 53 3.5.4在浏览器中预览 57 3.6小结 58 3.7习题 58 第4章 HTML5超链接 60 4.1<a>标签 60 4.1.1href属性 61 4.1.2target属性 61 4.1.3id属性 62 4.2HTML5字符集与颜色 63 4.2.1HTML5字符集 63 4.2.2HTML5字符实体 63 4.2.3HTML5颜色 64 4.2.4HTML5颜色名 64 4.3叮叮书店首页超链接的使用 65 4.4小结 67 4.5习题 67 第5章 HTML5多媒体 68 5.1HTML5图像 68 5.1.1标签 68 5.1.2<map>标签和<area>标签 70 5.1.3<figure>标签和<figcaption>标签 71 5.2HTML5音频/视频 71 5.2.1HTML5视频 71 5.2.2HTML5音频 74 5.3<embed>标签 76 5.4叮叮书店首页图像的使用 76 5.5小结 79 5.6习题 79 第6章 HTML5表格 80 6.1表格结构和表格标签 80 6.1.1表格结构 80 6.1.2表格标签 80 6.2常用表格标签 82 6.2.1<table>标签 82 6.2.2<tr>标签 83 6.2.3<td>标签 83 6.2.4<col>标签 84 6.2.5<thead>、<tbody>和<tfoot>标签 85 6.3叮叮书店“购物车”页面的建立 85 6.4小结 86 6.5习题 87 第7章 HTML5表单 88 7.1表单的基本知识 88 7.1.1什么是表单 88 7.1.2<form>标签 88 7.2表单域 90 7.2.1<input>标签 91 7.2.2<textarea>标签 98 7.2.3<label>标签 99 7.2.4<fieldset>标签 99 7.2.5<select>标签 100 7.2.6<option>标签 100 7.2.7<optgroup>标签 101 7.2.8<button>标签 101 7.2.9<datalist>标签 102 7.2.10<output>标签 103 7.3叮叮书店“联系我们”页面的建立 103 7.4为叮叮书店首页添加站内搜索 106 7.5小结 106 7.6习题 106 第8章 CSS基础 108 8.1CSS概述 108 8.2CSS语法 110 8.3CSS常用选择器 111 8.4CSS3选择器 114 8.5CSS属性 115 8.5.1CSS常用属性 115 8.5.2CSS属性值和单位 119 8.5.3CSS3属性值和单位 120 8.6使用CSS 127 8.7媒体查询 130 8.8层叠样式 132 8.9使用Chrome开发者工具检查编辑页面及样式 135 8.10小结 136 8.11习题 137 第9章 页面布局定位 139 9.1CSS盒模型 139 9.1.1CSS盒模型概述 139 9.1.2CSS内边距 141 9.1.3CSS边框 143 9.1.4CSS3边框 147 9.1.5CSS外边距 151 9.1.6CSS轮廓 153 9.2CSS布局 154 9.2.1盒模型显示类型 154 9.2.2CSS3伸缩盒布局 157 9.2.3CSS浮动 171 9.2.4可见与溢出 174 9.3CSS定位 176 9.3.1position属性 176 9.3.2z-index属性 181 9.4基本布局模板 181 9.4.1固定(液态)布局 182 9.4.2弹性伸缩布局(响应式Web设计) 184 9.5叮叮书店首页的布局样式设计 187 9.6小结 190 9.7习题 191 第10章 元素外观属性 193 10.1背景 193 10.1.1CSS背景 193 10.1.2CSS3背景 196 10.1.3CSS3透明度 198 10.2字体 199 10.2.1指定字体 199 10.2.2指定大小 200 10.2.3字体风格 200 10.2.4字体粗细 200 10.2.5CSS3服务器端字体 202 10.3文本与修饰 205 10.3.1文本 205 10.3.2修饰 211 10.4CSS3文本效果 212 10.4.1阴影 212 10.4.2换行 213 10.5CSS3多列 213 10.6列表 215 10.7尺寸 216 10.8表格 218 10.8.1表格的属性 218 10.8.2表格的边框控制 220 10.8.3改善表格的显示效果 222 10.8.4叮叮书店“购物车”页面的表格样式设计 223 10.9叮叮书店首页的外观样式设计 224 10.9.1文本 224 10.9.2背景 225 10.9.3栏目标题图标 226 10.9.4其他 227 10.10小结 228 10.11习题 228 第11章 伪类和伪元素 230 11.1CSS伪类 230 11.1.1超链接伪类 231 11.1.2结构性伪类 232 11.1.3子元素伪类 233 11.1.4UI元素状态伪类 236 11.2CSS伪元素 239 11.3CSS内容 240 11.4小结 243 11.5习题 243 第12章 CSS3变换、过渡和动画 245 12.1变换 245 12.2过渡 256 12.3动画 260 12.4叮叮书店首页的超链接、伪类和动画样式设计 263 12.5小结 267 12.6习题 267 第13章 默认样式和页面内容样式设计 269 13.1默认样式 269 13.1.1HTML默认样式 269 13.1.2浏览器默认样式 271 13.2页面内容样式设计 272 13.2.1导航菜单 272 13.2.2图文混排 274 13.3小结 276 13.4习题 276 第14章 网站制作流程与发布 277 14.1网站制作流程 277 14.2模板 279 14.3基于模板建立叮叮书店的其他页面 280 14.3.1书籍分类 280 14.3.2特刊降价 282 14.3.3联系我们 284 14.3.4关于我们 285 14.3.5详细内容 286 14.3.6购物车 289 14.4网站发布 289 14.4.1Tomcat服务器的安装与使用 289 14.4.2发布 292 14.5小结 292 14.6习题 292 第15章 JavaScript和ECMAScript基础 294 15.1JavaScript基础 294 15.1.1JavaScript的历史和主要功能 294 15.1.2JavaScript的组成 295 15.1.3JavaScript的使用 296 15.1.4JavaScript消息框 298 15.1.5开发者工具Console 299 15.2ECMAScript基础 300 15.2.1ECMAScript语法基础 300 15.2.2ECMAScript变量 301 15.2.3ECMAScript关键字和保留字 302 15.2.4ECMAScript基本数据类型 303 15.2.5ECMAScript类型转换 305 15.3ECMAScript运算符 307 15.3.1一元运算符 307 15.3.2算术运算符 308 15.3.3关系运算符 309 15.3.4逻辑运算符 311 15.3.5其他运算符 312 15.4小结 313 15.5习题 313 第16章 算法和ECMAScript语句 315 16.1算法 315 16.1.1算法的概念 315 16.1.2简单算法举例 316 16.1.3算法的特性 316 16.1.4算法与程序 316 16.2ECMAScript语句 317 16.2.1条件语句 317 16.2.2循环语句 320 16.2.3break和continue语句 322 16.3WebStorm和Chrome协作调试JavaScript脚本程序 323 16.4使用Sources调试JavaScript脚本程序 325 16.5小结 328 16.6习题 328 第17章 行为与对象 329 17.1行为 329 17.1.1ECMAScript函数 329 17.1.2ECMAScript闭包 332 17.1.3HTML事件 333 17.2ECMAScript对象 337 17.2.1对象和类 337 17.2.2创建和使用对象 338 17.2.3ECMAScript引用类型 339 17.2.4ECMAScript对象类型 345 17.3错误处理 346 17.4内置对象和本地对象 348 17.4.1Math对象 348 17.4.2全局对象 349 17.4.3Array对象 351 17.4.4Date对象 353 17.5叮叮书店首页显示日期和时间 354 17.6小结 356 17.7习题 356 第18章 DOM 358 18.1DOM概述 358 18.1.1DOM简介 358 18.1.2节点和节点树 359 18.2DOM对象 360 18.2.1Node对象 360 18.2.2HTMLElement对象 362 18.2.3HTMLDocument对象 362 18.2.4访问节点 363 18.3DOM与CSS 366 18.3.1Style对象 366 18.3.2CurrentStyle对象 370 18.3.3StyleSheet对象 371 18.4叮叮书店首页图片轮播广告的实现 373 18.5小结 376 18.6习题 376 第19章 HTML DOM对象和RegExp对象 378 19.1HTML DOM对象 378 19.1.1Document对象 379 19.1.2Image对象 381 19.1.3Anchor对象 382 19.1.4Event对象 383 19.1.5Checkbox和Radio对象 388 19.1.6FileUpload对象 390 19.1.7Text和Password对象 392 19.1.8Textarea对象 393 19.1.9Select和Option对象 393 19.1.10Submit、Reset和Button对象 396 19.1.11Form对象 397 19.1.12一个小游戏——剪子石头布 398 19.2RegExp对象 404 19.3叮叮书店“联系我们”页面的表单数据验证 406 19.4小结 408 19.5习题 408 第20章 HTML5 DOM 411 20.1Canvas对象 411 20.1.1Canvas基础 413 20.1.2使用路径 414 20.1.3绘制文本 417 20.1.4绘制图像 418 20.2HTML5拖放 420 20.3HTML5数据存储 423 20.3.1sessionStorage对象 423 20.3.2localStorage对象 424 20.4实现叮叮书店“书籍分类”页面拖放图书到购物车 428 20.5小结 430 20.6习题 431 第21章 BOM 432 21.1BOM对象 432 21.1.1Window对象 432 21.1.2Navigator对象 439 21.1.3Screen对象 441 21.1.4Location对象 441 21.1.5History对象 442 21.2元素的大小与位置 442 21.3叮叮书店首页的浮动广告 445 21.4小结 446 21.5习题 446 第22章 Ajax与JSON 448 22.1Ajax 448 22.2XMLHttpRequest对象 449 22.2.1创建XMLHttpRequest对象 449 22.2.2XMLHttpRequest请求 450 22.2.3XMLHttpRequest响应 451 22.3JSON 452 22.3.1JSON的语法 453 22.3.2JSON的使用 454 22.4小结 456 22.5习题 456 第23章 jQuery入门 457 23.1jQuery基础 457 23.1.1添加jQuery库 457 23.1.2jQuery的语法 458 23.2特效和动画 459 23.3HTML操作 462 23.4Ajax函数 463 23.5叮叮书店“试读”页面的建立 463 23.6小结 466 23.7习题 466 附录A实验 467 实验1HTML5内容结构和文本 467 实验2HTML5超链接和多媒体 468 实验3HTML5表格和表单 469 实验4CSS3布局与定位 470 实验5CSS3元素外观样式设计 471 实验6CSS3动画 471 实验7行为与对象及DOM 472 实验8HTML DOM表单数据验证 473 实验9HTML5 DOM 473 参考文献 474</div></div><div><div><span>摘要</span></div><div>    3.1 HTML5结构标签     HTML5结构标签用于搭建页面主体内容结构,形成不同的区块,完成整个页面的排版布局。表3.1列出了HTML5结构标签。 表3.1 HTML5结构标签 标 签 描 述     <article>     定义文章(HTML5新标签)     <aside>     定义页面内容之外的内容(HTML5新标签)     <details>     定义元素的细节(HTML5新标签)     <footer>     定义section或page的页脚(HTML5新标签)     <header>     定义section或page的页眉(HTML5新标签)     <main>     定义文档的主要内容(HTML5.2新标签) 续表 标 签 描 述     <nav>     定义导航链接(HTML5新标签)     <section>     定义section(HTML5新标签)     <summary>     为details元素定义可见的标题(HTML5新标签)          定义文档中的节     <span>     定义文档中的行内元素      3.1.1 <header>标签     <header>标签定义文档的页眉,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,比如在header里面放置logo图片、搜索表单等。          提示:在一个页面内并没有header的出现次数,也就是说可以在同一页面内不同的内容区块上分别加上一个header元素。          在HTML5中,一个header元素至少可以包含一个heading元素(h1~h6)。 3.1.2 <main>标签     <main>标签定义文档的主要内容。<main>标签中的内容对于文档来说应当是专享的,不包含在文档中重复出现的内容,例如边栏、导航栏、版权信息、站点标志等。          提示:在一个文档中不能出现一个以上的<main>标签。main元素不能是article、aside、footer、header或nav的子元素。 3.1.3 <nav>标签     <nav>标签定义导航链接的部分,主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。 3.1.4 <article>标签     <article>标签表示页面中的一块与上下文不相关的独立内容,比如一篇文章。这篇文章应有其自身的意义,应该有可能独立于站点的其他部分,例如论坛帖子、报纸文章、博客条目和用户评论等。 3.1.5 <section>标签     <section>标签定义文档中的节(区段),例如章节、页眉、页脚或文档中的其他部分。 3.1.6 <aside>标签     <aside>标签定义其所处内容之外的内容,这个内容应该与附近的内容相关,例如可用作文章的侧栏或边栏。 3.1.7 <footer>标签     <footer>标签定义文档或节的页脚,footer元素应当含有其包含元素的信息。页脚通常包含文档的建立日期、作者、版权信息、使用条款链接和联系信息等。用户可以在一个文档中使用多个<footer>标签。 3.1.8 <details>标签和<summary>标签     <details>标签用于描述文档或文档中某个部分的细节。details元素实际上是一种用于标识其内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型值的open属性,当open属性值为true时元素内部的子元素被展开显示,当open属性值为false时其内部的子元素被收缩起来不显示。open属性的默认值为false,当页面打开时其内部的子元素处于收缩状态。     <summary>标签可以为details元素定义标题,标题是可见的,用户单击标题时会展开显示details元素的内容,再次单击标题时details元素会收缩起来不显示。summary元素从属于details元素。     如果details元素内没有定义summary元素,浏览器会提供默认的文字显示,例如“详细信息”。          提示:IE和Edge不支持<details>标签。</div></div> </div> </div> </div> </div> </div> <script src="/static/js/lib/jquery/blowup.min.js" type="text/javascript"></script> <script type="application/javascript"> $(document).ready(function () { /** * 图片放大器 */ $("#img_zoom").blowup({ background : "#FCEBB6" }); }); </script> <!-- 添加到书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_to_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">添加到书单</h4> </div> <div class="modal-body"> <!-- 书单列表模板 --> <script id="tpl_my_list" type="text/template"> {@each records as i} <li class="list-group-item"> <label style="width:100%;cursor: pointer;"> <input type="radio" name="listId" value="@{i.id}" id="list@{i.id}"> @{i.name} </label> </li> {@/each} </script> <!-- 书单列表模板结束 --> <ul class="list-group" id="tbl_my_list"> <li class="list-group-item"> <label for="list2" >加载中...</label> </li> </ul> <div class="pager"></div> <a href="javascript:void(0);" id="a_add_list">点此新建书单</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btn_add_to_list_save">确定</button> </div> </div> </div> </div> <!-- 添加到书单弹出框结束 --> <!-- 新建书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form id="form_create_list"> <button type="reset" style="display:none;"></button> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">新建书单</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="recipient-name" class="control-label">标题:</label> <input type="text" class="form-control" name="name"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">简介:</label> <textarea style="height:200px" class="form-control" name="memo" placeholder="书单描述..."></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btn_create_list">保存</button> </div> </form> </div> </div> </div> <!-- 新建书单弹出框结束 --> </div> <div class="rollto" style="display: none;"><a href="javascript:;"></a></div> <div class="bottom clearfix"> <div class="wrap clearfix"> <div class="fn-left"> </div> <div class="fn-right infomt"> <div class="fn-right"> <div> </div> <div> </div> </div> </div> </div> <div class="linHight"></div> <div class="wrap wenzi"> <p> <a href="https://beian.miit.gov.cn" target="_blank" style="color: #b3b3b3;">蜀ICP备2024047804号</a> </p> <p> Copyright 版权所有 © jvwen.com 聚文网 </p> </div> </div> </body> </html>