电子工业出版社-网上书店

通过本书的学习，能快速上手网站前端开发。为了使HTML5语言能被读者更好地掌握和应用，同时作为“跟兄弟连学HTML5系列教程”的第一本入门级图书，本书对HTML语言的知识点进行了详细的阐述和分析，包括HTML5和CSS3的语法、各种页面布局方法、流行的前端框架Bootstrap等内容。不仅有通俗易懂的语法讲解，也用贴切的小案例实验，使读者能轻松掌握新知识，且可以快速上手前端技术操作。本书适合对前端技术开发感兴趣的初学者阅读，也可以作为从事前端技术工作的开发人员的参考书，或作为大学生学习HTML5的教材。同时，本书也为读者之后学习同系列其他图书奠定基础。

目录

第1章  介绍HTML5	1
1.1  了解HTML5的主流应用	1
1.1.1  表单的强大	2
1.1.2  响应式页面布局	2
1.1.3  与用户交互的特效	4
1.1.4  微网站的制作	5
1.1.5  基于HTML5的移动APP开发	6
1.1.6  HTML5游戏	7
1.1.7  多媒体的应用	7
1.2  什么是HTML5	8
1.2.1  HTML5和HTML的关系	8
1.2.2  HTML和CSS的关系	10
1.2.3  HTML5和CSS3的关系	11
1.2.4  HTML5和JavaScript的关系	11
1.3  HTML5的靠山	12
1.3.1  W3C是什么	12
1.3.2  IETF是什么	13
1.3.3  RFC是什么	14
1.3.4  WHATWG是什么	14
1.3.5  Web的新标准	14
1.4  HTML5的曲折发展过程	15
1.4.1  HTML5的诞生	15
1.4.2  浏览器之间的大战	16
1.4.3  HTML5技术的应用现状	18
1.4.4  HTML5平台的兴起	18
1.4.5  HTML5行业的发展预测	20
1.5  HTML5的学习线路图	21
1.5.1  第一阶段——学习网页制作	23
1.5.2  第二阶段——编写用户交互功能	24
1.5.3  第三阶段——成为前端工程师	25
本章小结	26
本章习题	26
第2章  HTML5的基本语法	28
2.1  课前准备	28
2.1.1  了解Web	29
2.1.2  了解HTML	30
2.1.3  了解HTML运行原理	30
2.1.4  如何选择开发工具	31
2.1.5  认识浏览器中的开发者工具	32
2.1.6  现在学习HTML5的方式	34
2.1.7  简单HTML实例制作	35
2.2  HTML语言的语法	36
2.2.1  HTML标签和元素	36
2.2.2  HTML语法不区分字母大小写	37
2.2.3  HTML标签属性	37
2.2.4  HTML颜色值的设置	37
2.2.5  HTML文档注释	38
2.2.6  HTML代码格式	38
2.2.7  HTML字符实体	38
2.3  HTML文档的主体结构	39
2.3.1  HTML文档类型的新定义方式	40
2.3.2  HTML文档的主体标签	41
2.4  HTML文档头部标签＜head＞	41
2.4.1  ＜title＞标签	42
2.4.2  ＜base＞标签	42
2.4.3  ＜link＞标签	43
2.4.4  ＜meta＞标签	43
2.5  HTML文档主体标签＜body＞	44
2.6  HTML5做到了与之前版本的兼容	45
2.6.1  可以省略标记的元素	45
2.6.2  具有boolean值的属性	46
2.6.3  引号的使用	46
2.7  设置IE 9以下版本浏览器支持HTML5	46
本章小结	47
本章习题	47
第3章  HTML5文字版面和编辑标签	49
3.1  HTML基础标签	49
3.1.1  标题标签＜h1＞～＜h6＞	50
3.1.2  换行标签
和段落标签＜p＞	51
3.1.3  水平分隔线标签＜hr＞	51
3.1.4  格式标签	51
3.1.5  文本标签	53
3.2  使用HTML表格	55
3.3  HTML框架结构	57
本章小结	60
本章习题	61
第4章  多媒体应用	62
4.1  创建图像和链接	62
4.1.1  URL概述	63
4.1.2  插入图片	63
4.1.3  建立锚点和超链接	64
4.2  HTML图像地图	66
4.2.1  什么是图像地图	66
4.2.2  图像地图如何制作	66
4.2.3  实现图像地图	67
4.3  新增多媒体播放元素	68
本章小结	71
本章习题	71
第5章  HTML5表单	74
5.1  HTML表单中的get和post方法	74
5.1.1  get方法	75
5.1.2  post方法	76
5.1.3  HTML表单中get和post的区别	76

5.2  HTML表单设计	77
5.2.1  表单标签＜form＞	77
5.2.2  文本域和密码域	78
5.2.3  提交、重置和普通按钮	78
5.2.4  单选按钮和复选框	79
5.2.5  隐藏域	79
5.2.6  多行文本域	79
5.2.7  菜单下拉列表域	79
5.2.8  综合实例	80
5.3  HTML5新增表单元素	82
5.3.1  ＜datalist＞元素	82
5.3.2  ＜keygen＞元素	83
5.3.3  ＜output＞元素	84
5.4  多样的输入类型	85
5.4.1  email	85
5.4.2  url	86
5.4.3  number	87
5.4.4  range	87
5.4.5  date picker	88
5.4.6  color	89
5.5  HTML占新增的表单属性	91
5.5.1  autocomplete属性	92
5.5.2  autofocus属性	93
5.5.3  form属性	94
5.5.4  form overrides表单重写属性	95
5.5.5  height和width属性	95
5.5.6  list属性	96
5.5.7  min、max和step属性	96
5.5.8  multiple属性	97
5.5.9  novalidate属性	97
5.5.10  pattern属性	98
5.5.11  placeholder属性	98
5.5.12  required属性	99
5.6  HTML5表单提交综合实例	100
本章小结	103
本章习题	103
第6章  CSS3揭秘	105
6.1  CSS简介	105
6.2  CSS规则的组成	107
6.2.1  CSS注释	108
6.2.2  长度单位	108
6.2.3  颜色单位和URL值	109
6.3  在HTML文档中放置CSS的几种方式	110
6.3.1  内联样式表	110
6.3.2  嵌入一张样式表	110
6.3.3  链接到一张外部的样式表	111
6.4  CSS普通选择器	111
6.4.1  HTML选择器	111
6.4.2  类选择器	112
6.4.3  id选择器	112
6.4.4  关联选择器	113
6.4.5  组合选择器	113
6.4.6  伪元素选择器	113
6.5  CSS常见的样式属性和值	114
6.5.1  字体属性	114
6.5.2  颜色属性	115
6.5.3  背景属性	115
6.5.4  文本属性	116
6.5.5  边框属性	117
6.5.6  鼠标光标属性	118
6.5.7  列表属性	119
6.5.8  CSS综合实例	120
6.6  CSS3概述	122
6.6.1  CSS3在选择器上的支持	122
6.6.2  CSS3在样式上的支持	122
6.6.3  CSS3对于动画的支持	123
6.6.4  在实际开发中该如何使用CSS3	123
6.7  CSS复杂选择器	123
6.7.1  基本选择器	123
6.7.2  多元素的组合选择器	124
6.7.3  属性选择器	124
6.7.4  结构性伪类选择器	125
6.8  CSS3属性	129
6.8.1  使用CSS3属性前的准备	130
6.8.2  边框属性	130
6.8.3  背景属性	132
6.8.4  文本属性	133
6.8.5  用户界面属性	133
6.8.6  动画属性	134
6.8.7  多列布局属性	134
6.8.8  渐变属性	135
6.8.9  透明属性	136
6.8.10  旋转属性	136
6.8.11  服务器端字体属性	136
本章小结	137
本章习题	137
第7章  CSS3属性特效	140
7.1  新增颜色模式	140
7.2  文字	142
7.2.1  文字阴影	143
7.2.2  文字描边	146
7.2.3  文字排版	150
7.2.4  定义省略文本的处理方式	152
7.3  自定义文字	153
7.4  弹性盒模型	156
7.5  盒模型阴影	164
7.6  倒影	167
7.7  CSS3分栏布局	173
7.7.1  列个数和列宽度	173
7.7.2  列之间的缝隙间隔宽度	175
7.7.3  分栏间隔符	176
7.8  圆角	177
7.8.1  border-radius属性	177
7.8.2  单个圆角的设置	180
7.9  边框	181
7.9.1  边框图片border-image	182
7.9.2  自适应的圆角效果	186
7.10  渐变	188
7.10.1  CSS3渐变介绍	188
7.10.2  线性渐变	189
7.10.3  线性渐变实例	189
7.10.4  径向渐变	194
7.10.5  径向渐变实例	194
7.11  CSS3背景	198
7.11.1  多背景	198
7.11.2  background-size	200
7.11.3  background-origin	202
7.11.4  background-clip	203
7.12  遮罩	204
7.13  transition过渡	206
7.14  2D变换	207
7.14.1  translate()方法	208
7.14.2  rotate()方法	209
7.14.3  scale()方法	212
7.14.4  skew()方法	213
7.15  3D变换	215
7.15.1  transform-style	216
7.15.2  perspective景深	216
7.15.3  perspective-origin景深基点	218
7.15.4  3D位移	219
7.15.5  3D旋转	222
7.15.6  3D缩放	223
7.15.7  3D盒子	225
7.16  animation动画	226
7.16.1  关键帧keyframes	227
7.16.2  animation动画属性	229
本章小结	229
本章习题	230
第8章  DIV+CSS网页标准化布局	232
8.1  DIV+CSS页面布局的优势	232
8.2 “无意义”的HTML标签＜div＞和＜span＞	233
8.3  W3C盒子模型	234
8.4  和页面布局有关的CSS属性	236
8.5  盒子区块框的定位	238
8.5.1  相对定位	238
8.5.2  绝对定位	239
8.6  使用盒子模型的浮动布局	240
8.6.1  设置浮动	240
8.6.2  行框和清理	242
8.7  DIV+CSS的兼容性问题	244
8.7.1  不同浏览器解释盒子模型的差异	245
8.7.2  设置浏览器去遵循W3C标准	246
8.8  使用盒子模型设计页面布局	247
8.8.1  居中设计	247
8.8.2  设置两列浮动的布局	248
8.8.3  设置三列浮动的布局	250
8.8.4  设置多列浮动的布局	251
8.9  DIV+CSS网站首页布局示例	252
8.9.1  HTML文件的设计	253
8.9.2  CSS文件的设计	254
本章小结	256
本章习题	256
第9章  响应式布局	259
9.1  响应式布局的优缺点	259
9.2  如何设计响应式布局	260
9.3  响应式布局实例	261
9.4  Media Queries模块的使用方法	263
9.4.1  语法结构及用法	264
9.4.2  可用的设备类型	265
9.4.3  可用的设备特性参数	266
9.5  在移动设备上设置原始大小显示	268
9.6  响应式网站的内容设计	268
9.6.1  响应式图片显示内容设计	269
9.6.2  响应式文字显示内容设计	269
9.7  响应式网站的设计流程	270
本章小结	271
本章习题	272
第10章  认识和使用Sass	273
10.1  初识Sass	273
10.1.1  Sass是什么	274
10.1.2  Sass的作用	274
10.1.3  Sass的安装	277
10.1.4  Sass的使用和编译	279
10.2  Sass基本语法与使用实例	283
10.2.1  Sass基本语法	283
10.2.2  Sass使用实例	288
本章小结	292
本章习题	292
第11章  栅格布局	294
11.1  栅格	294
11.2  盒子模型	296
11.3  栅格实例	297
11.4  Bootstrap框架	298
11.4.1  Bootstrap现状	299
11.4.2  栅格系统	299
本章小结	313
本章习题	313
第12章  Bootstrap的快速入门	315
12.1  Bootstrap的内容概述与整体理解	315
12.1.1  全局CSS样式	316
12.1.2  组件	317
12.1.3  JavaScript插件	319
12.2  Bootstrap搭建环境	320
12.3  Bootstrap全局CSS样式	321
12.3.1  全局CSS样式的栅格系统和响应式布局	322
12.3.2  全局CSS样式的表单	324
12.4  Bootstrap组件	324
12.5  Bootstrap的JavaScript插件	326
本章小结	328
本章习题	328

第13章  Bootstrap的实战	330
13.1  实战概述	330
13.2  实战需求	330
13.3  实战准备	333
13.3.1  Sass配置	334
13.3.2  HTML的基本模块	335
13.4  顶部工具栏	336
13.4.1  Bootstrap的字体图标组件	336
13.4.2  Bootstrap的下拉菜单组件	337
13.4.3  Bootstrap的输入框组组件	339
13.4.4  Bootstrap的导航组件	341
13.4.5  顶部工具栏PC端内容填充	342
13.4.6  顶部工具栏PC端样式优化	345
13.4.7  实战顶部工具栏移动端	352
13.5  页面导航条	353
13.5.1  Bootstrap的导航条组件	354
13.5.2  实战页面导航条——内容填充	356
13.5.3  实战页面导航条——样式优化	358
13.6  banner区	360
13.6.1  Bootstrap的JavaScript轮播图插件	360
13.6.2  实战banner区	362
13.7  推荐位	364
13.7.1  Bootstrap的缩略图组件	364
13.7.2  Bootstrap的面板组件	365
13.7.3  实战第一种风格的推荐位——内容填充	366
13.7.4  实战第一种风格的推荐位——样式优化	369
13.7.5  实战第二种风格的推荐位——内容填充	372
13.7.6  实战第二种风格的推荐位——样式优化	375
13.8  脚部	379
13.9  用户登录	380
13.9.1  Bootstrap的表单全局CSS样式	380
13.9.2  Bootstrap的模态框JavaScript插件	382
13.9.3  实战用户登录	384
本章小结	386
本章习题	387
附录A	388

前言

随着HTML5标准化逐渐成熟，以及互联网的飞速发展和移动端的应用不断创新，再加上微信公众号、小程序的应用飙升，原生APP向Web APP和混合APP的转变，用户对视觉效果和操作体验的要求越来越高，HTML5成为移动互联网的主要技术，也是目前的主流技术之一。HTML5是超文本标记语言（HTML）的第5次修订，是近年来Web标准的巨大飞跃。Web是一个内涵极为丰富的平台，和以前版本不同的是，HTML5并非仅仅用来表示Web内容，在这个平台上还能非常方便地加入视频、音频、图像、动画，以及与计算机的交互。HTML5的意义在于它带来了一个无缝的网络，无论是PC、平板电脑，还是智能手机，都能非常方便地浏览基于HTML5的各类网站。对用户来说，手机上的APP会越来越少，用HTML5实现的一些应用不需要下载安装，就能立即在手机界面中生成一个APP图标，使用手机中的浏览器来运行，新增的导航标签也能更好地帮助小屏幕设备和视力障碍人士使用。HTML5拥有服务器推送技术，给用户带来了更便捷的实时聊天功能和更快的网游体验。 
HTML5对于开发者来说更是福音。HTML5本身是由W3C推荐的，也就意味着每一个浏览器或每一个平台都可以实现，这样可以节省开发者花在浏览器页面展现兼容性上的时间。另外，HTML5是Web前端技术的一个代名词，其核心技术点还是JavaScript。如HTML5的服务器推送技术，再结合JavaScript编程，能够帮助我们实现服务器将数据“推送”到客户端的功能，客户端与服务器之间的数据传输将更加高效。基于SVG、Canvas、WebGL及CSS3的3D功能，会让用户惊叹在浏览器中所呈现的各种炫酷的视觉效果。以往在iPhone iPad上不支持的Flash将来都有可能通过HTML5华丽地呈现在用户的iOS设备上。

本套图书介绍
为了让前端初学者少走弯路，快速而轻松地学习HTML5和JavaScript编程，我们结合新技术和兄弟连多年的教学经验积累，再通过对企业实际应用的调研，编写了一整套HTML5系列图书，共5本，包括《细说网页制作》、《细说JavaScript》、《细说DOM编程》、《细说AJAX与jQuery》和《细说HTML5高级API》，每一本书都是不同层次的完整内容，不仅给初学者安排了循序渐进的学习过程，也便于不同层次的读者选择；既适合没有编程基础的前端初学者作为入门教程，也适合正在从事前端开发的人员作为技术提升参考资料。本套图书编写的初衷是为了紧跟新技术和兄弟连IT教育HTML5学科的教学发展，作为本校培训教程使用，也可作为大、中专院校和其他培训学校的教材使用。同时，对于前端开发爱好者，本书也有较高的参考价值。
《细说网页制作》
作为“跟兄弟连学HTML5系列教程”的第一本书，主要带领HTML5初学者一步步完成精美的页面制作。本书内容包括HTML应用、CSS应用、HTML5的新技术、各种主流的页面布局方法和一整套页面开发实战技能，让读者可以使用多种方法完成PC端的页面制作、移动端的页面制作，以及响应式布局页面的制作，不仅能做出页面，还能掌握如何做好页面。
《细说JavaScript》
这是“跟兄弟连学HTML5系列教程”的第二本书，在学习本书之前需要简单了解一下第一本书中的HTML和CSS内容。本书内容是纯JavaScript语言部分，和浏览器无关，包括JavaScript基本语法、数据类型、流程控制、函数、对象、数组和内置对象，所有知识点都是为了学习DOM编程、Node.js、JS框架等JavaScript高级部分做准备。本书虽然是JavaScript的基础部分，但全书内容都需要牢牢掌握，才能更好地晋级学习。
《细说DOM编程》
这是“跟兄弟连学HTML5系列教程”的第三本书，全书内容都和浏览器相关，在学习本书之前需要掌握前两本书的技术。本书内容包括BOM和DOM两个关键技术点，并且全部以PC端和移动端的Web特效为主线，以实例贯穿全部知识点进行讲解。学完本书的内容，不仅可以用JavaScript原生的语法完成页面的特效编写，也为学习后面的JavaScript框架课程做好了准备。本书内容是Web前端课程的核心，需要读者按书中的实例多加练习，能熟练地进行浏览器中各种特效程序的开发。
《细说AJAX与jQuery》
这是“跟兄弟连学HTML5系列教程”的第四本书，其内容是建立在第三本书之上的，包括服务器端开发语言Node.js、异步传输AJAX和jQuery框架三部分。其中，Node.js部分是为了配合AJAX完成客户端向服务器端的异步请求；jQuery是目前主流的前端开发框架，其目的是让开发者用尽量少的代码完成尽可能多的功能。AJAX和jQuery是目前前端开发的必备技术，本书从基本应用开始学起，用实例分解方式讲解技术点，让读者完全掌握这些必备的技能。
《细说HTML5高级API》
这是“跟兄弟连学HTML5系列教程”的第五本书，是前端开发的应用部分，主要讲解HTML5高级API的相关内容，包括画布、Web存储、应用缓存、服务器发送事件等，可以用来开发移动端的Web APP项目。本书重点讲解了Cordova技术，它提供了一组与设备相关的API，通过这组API，移动应用就能够通过JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及与这些类库所用的设备相关的原生后台代码。通过编写HTML5程序，再用Cordova打包出混合APP的项目，可以安装在Android和iOS等设备上。

本套图书的特点
1．内容丰富，由浅入深
本套图书在内容组织上本着“起点低，重点高”的原则，内容几乎涵盖前端开发的所有核心技能，对于某一方面的介绍再从多角度进行延伸。为了让读者更加方便地学习本套图书的内容，在每本书的每个章节中都提供了一些实际的项目案例，便于读者在实践中学习。
2．结构清晰，讲解到位
每个章节都环环相扣，为了让初学者更快地上手，本套图书精心设计了学习方式。对于概念的讲解，都是先用准确的语言总结概括，再用直观的图示演示过程，接着以详细的注释解释代码，最后用形象的比喻帮助记忆。对于框架部分，先提取核心功能快速掌握框架的应用，再用多个对应的实例分别讲解每个模块，最后逐一讲解框架的每个功能。对于代码部分， 先演示程序效果，再根据需求总结出涉及的知识点逐一讲解，然后组合成实例，最后总结分析重点功能的逻辑实现。
3．完整案例，代码实用
为了便于读者学习，本套图书的全部案例都可以在商业项目中直接运用，丰富的案例几乎涵盖前端应用的各个方面。所有的案例都可以通过对应的二维码扫描，直接在手机上查看运行结果，读者可以通过仔细研究其效果，最大限度地掌握开发技术。另外，扫描每个章节中的资源下载二维码，可以获得下载链接，点击链接即可获取所有案例的完整源代码。
4．视频精致，立体学习
字不如表，表不如图，图不如视频，每本书都配有详细讲解的教学视频，由兄弟连名师精心录制，不仅能覆盖书中的全部知识点，而且远远超出书中的内容。通过参考本套图书，再结合教学视频学习，可以加快对知识点的掌握，加快学习进度。读者可以扫描每个章节中提供的教学视频二维码，获取视频列表直接在手机上观看，也可以直接登录“猿代码（www.ydma.cn）”平台在PC端观看，逐步掌握每个技术点。
5．电子教案，学教通用
每本书都提供了和章节配套的电子教案（PPT）。对于学生来说，可以作为学习笔记使用，是知识点的浓缩和重点内容的记录。由于本套图书可以作为高校相关课程的教材或课外辅导书，所以可以方便教师教学使用。读者可以通过扫描对应章节的二维码，下载或在线观看电子教案。本书也为部分章节提供了一些扩展文章，也可以通过扫描二维码的方式下载或在线观看。
6．实时测试，寓学于练
每章最后都提供了专门的测试习题，供读者检验所学知识是否牢固掌握。通过扫描测试习题对应的二维码，可以查看答案和详细的讲解。
7．技术支持，服务到位
为了帮助读者学到更多的HTML5技术，在兄弟连论坛（bbs.itxdl.cn）中还可以下载常用的技术手册和所需的软件。笔者及兄弟连IT教育（新三板上市公司，股票代码：839467）的全体讲师和技术人员也会及时回答读者的提问，与读者进行在线技术交流，并为读者提供各类技术文章，帮助读者提高开发水平，解决读者在开发中遇到的疑难问题。

本套图书的读者群
有审美，喜欢编程，并且怀揣梦想的有志青年。
打算进入前端编程大门的新手，阶梯递进，由浅入深。
专业培训机构前端课程授课教材，有体系地掌握全部前端技能。
各大院校的在校学生和相关的授课老师，课件、试题、代码丰富实用。
前端页面、Web APP、网页游戏、微信公众号等开发的前沿程序员，是专业人员的开发工具。
其他方向的编程爱好者，需要前端技术配合，或转向前端开发的程序员。

高洛峰 
2017年2月

计算机-网页制作

兄弟连IT教育，成立于2006年，中国程序员培训领导者。__eol__兄弟连以“优秀的教学、严格的管理、职业素质课贯穿始终”而闻名，现已开设PHP、UI、HTML5、Java/Android、iOS、Linux等众多课程，分别在北京、上海、广州、沈阳、扬州、苏州、郑州、济南设立校区，今后会陆续在成都、西安、武汉等地建设校区，每年有数十万名学员受益于兄弟连的职业培训、教学视频、网络公开课、院校讲座、出版书籍。__eol__我们相信，我们不仅仅是老师，更是学员的梦想守护者与职场引路人。

本书配套资源下载

对不起，暂无音视频资源！