HTML5+CSS3+JavaScript前端开发基础

更多详情

内容简介: 本书面向Web前端开发初学者,全面系统地讲解了HTML5、CSS3、JavaScript基础知识和编程技巧,为使用各种流行的前端框架打下牢固的基础。
本书分为25章,脚本内容包括JavaScript与ECMAScript基础;HTML5内容包括HTML基础、视频与音频、canvas、SVG、From、File、拖放与桌面通知、本地存储、Communication、Web Workers与Web SQL、WebSocket、地理位置、History等;CSS3内容包括CSS基础、选择器、插入内容、设置文本、设置图片与背景、设置表格与表单、超链接与鼠标样式、滤镜;*后一章为读者提供了两个实战案例。
本书适合Web 前端开发初学者及HTML5、CSS3、JavaScript初学者,也适合高等院校和培训学校相关专业的师生参考使用。

目录:     录
第1章  HTML5 CSS3学习准备    1
1.1  学习准备    1
1.1.1  选择合适的浏览器    1
1.1.2  选择合适的开发工具    2
1.2  认识HTML5    2
1.2.1  HTML5语法    2
1.2.2  新增与废除的元素和属性    3
1.2.3  全局属性    8
1.2.4  HTML5中新增的API    11
1.3  本章小结    11
第2章  HTML元素、属性与结构    12
2.1  HTML元素    12
2.1.1  HTML元素概述    12
2.1.2  HTML元素的语法    13
2.1.3  HTML元素的嵌套    13
2.2  HTML5属性    14
2.2.1  属性的基本使用方法    14
2.2.2  HTML5全局属性    15
2.3  新增的主体结构元素    20
2.3.1  article元素    20
2.3.2  section元素    21
2.3.3  nav元素    22
2.3.4  aside元素    22
2.3.5  time元素    24
2.4  新增的非主体结构元素    25
2.4.1  header元素    25
2.4.2  hgroup元素    25
2.4.3  footer元素    26
2.4.4  address元素    26
2.5  HTML5结构    27
2.5.1  文档结构大纲    27
2.5.2  内容区块的编排方式    27
2.5.3  标题分级    28
2.6  本章小结    28
第3章  JavaScript基础知识    29
3.1  JavaScript简介    29
3.1.1  什么是JavaScript    29
3.1.2  JavaScript的特点    29
3.1.3  JavaScript的组成    30
3.1.4  JavaScript基本结构    31
3.1.5  JavaScript执行原理    31
3.2  在网页中引入JavaScript的方式    31
3.2.1  使用标签    31
3.2.2  使用外部JavaScript文件    32
3.2.3  直接在HTML标签中使用    33
3.3  数据类型和变量    33
3.3.1  变量    33
3.3.2  Number    33
3.3.3  字符串    35
3.3.4  布尔值    36
3.3.5  比较运算符    36
3.3.6  数组    36
3.3.7  对象    37
3.4  条件判断    38
3.4.1  if语句    38
3.4.2  if...else语句    38
3.4.3  if...else if....else语句    39
3.4.4  switch语句    39
3.5  循环语句    40
3.5.1  for循环    40
3.5.2  for...in循环    41
3.5.3  while循环    41
3.5.4  do...while循环    42
3.6  函数定义和调用    43
3.6.1  定义函数    43
3.6.2  调用函数    43
3.7  本章小结    44
第4章  ES6基础知识    45
4.1  准备测试环境    45
4.2  声明变量let和const    48
4.2.1  let命令    48
4.2.2  块级作用域    49
4.2.3  先声明后使用    50
4.2.4  重复变量名    50
4.2.5  实例:面试题    51
4.3  模板字符串    52
4.3.1  字符串格式化    52
4.3.2  多行字符串    52
4.3.3  运算与函数调用    53
4.3.4  includes()、startsWith()和endsWith()    54
4.3.5  repeat()    55
4.4  箭头函数    55
4.5  解构赋值    56
4.5.1  对象解构赋值    57
4.5.2  数组解构赋值    57
4.5.3  字符串解构赋值    58
4.6  Set和Map数据结构    58
4.6.1  Set数据结构    58
4.6.2  Set的基本操作    59
4.6.3  扩展运算符    61
4.6.4  Map数据结构    62
4.6.5  Map遍历方法    63
4.7  Promise对象    64
4.7.1  Promise简介    64
4.7.2  创建Promise对象    65
4.7.3  then()    65
4.7.4  catch()    66
4.7.5  Promise.all()    66
4.7.6  Promise.race()    67
4.7.7  Promise.resolve()    67
4.7.8  Promise.reject()    68
4.8  for...of循环    68
4.9  Generator函数    69
4.10  async函数    70
4.11  class    71
4.12  实例:下馆子吃饭    72
4.13  本章小结    73
第5章  HTML5音频和视频    74
5.1  Web视频的标准与格式    74
5.2  video/audio元素概述    75
5.3  检测浏览器是否支持HTML5视频    75
5.4  实例:在HTML5中显示视频/音频    77
5.5  video元素与audio元素详解    78
5.5.1  video/audio属性    78
5.5.2  video/audio方法    79
5.5.3  video/audio事件    81
5.6  本章小结    83
第6章  HTML5 Canvas    84
6.1  canvas基础入门    84
6.1.1  什么是canvas    84
6.1.2  实例:在HTML5页面中添加canvas元素    84
6.1.3  实例:绘制一个蓝色矩形    85
6.2  绘制基本线条    86
6.2.1  实例:绘制直线    87
6.2.2  实例:绘制二次曲线    87
6.2.3  实例:绘制贝塞尔曲线    89
6.2.4  实例:绘制圆弧    89
6.3  绘制简单形状    90
6.3.1  实例:绘制圆形    90
6.3.2  实例:绘制三角形    91
6.3.3  实例:绘制圆角矩形    92
6.3.4  实例:绘制自定义图形    94
6.4  绘制渐变    95
6.4.1  实例:绘制线性渐变    95
6.4.2  实例:绘制径向渐变    96
6.5  图形组合    97
6.5.1  实例:绘制阴影    97
6.5.2  实例:透明效果    99
6.6  使用图像    100
6.6.1  实例:插入图像    100
6.6.2  实例:平铺图像    101
6.6.3  实例:裁剪图像    102
6.6.4  实例:像素级操作    103
6.7  绘制文字    104
6.7.1  实例:控制文本的字体、大小和样式    104
6.7.2  实例:控制文本的颜色    106
6.7.3  实例:描绘文本的边缘    107
6.7.4  实例:设置文本对齐方式    108
6.8  图像数据与URL    109
6.8.1  存储图像数据    109
6.8.2  将彩色转为灰度    110
6.8.3  图像数据URL    111
6.8.4  将绘制的图形保存为图像文件    111
6.9  用canvas实现动画效果    112
6.9.1  实例:清除canvas的内容    113
6.9.2  实例:创建动画    113
6.9.3  动画的开始与停止    115
6.10  实战演练    115
6.11  本章小结    120
第7章  HTML5 SVG    121
7.1  SVG简介    121
7.1.1  什么是SVG    121
7.1.2  SVG有哪些优势    121
7.2  HTML5中的SVG    122
7.2.1  实例:将SVG直接嵌入HTML5页面    122
7.2.2  实例:绘制简单的形状    123
7.2.3  实例:复用内容    124
7.2.4  实例:图形阴影    125
7.2.5  实例:图形渐变    126
7.2.6  实例:绘制自由路径    127
7.3  画布与SVG的比较    129
7.4  本章小结    129
第8章  Forms API    130
8.1  新增的Input输入类型    130
8.1.1  email类型    130
8.1.2  url类型    131
8.1.3  number类型    132
8.1.4  range类型    132
8.1.5  date pickers类型    133
8.1.6  search类型    134
8.1.7  color类型    134
8.2  新增的表单元素    135
8.2.1  datalist元素    135
8.2.2  keygen元素    136
8.2.3  output元素    137
8.3  新增的form属性    137
8.3.1  autocomplete属性    138
8.3.2  novalidate属性    138
8.4  新增的input属性    139
8.4.1  autocomplete属性    139
8.4.2  autofocus属性    139
8.4.3  form属性    139
8.4.4  form overrides属性    139
8.4.5  height 和 width属性    140
8.4.6  list属性    140
8.4.7  min、max和step属性    140
8.4.8  multiple属性    141
8.4.9  pattern属性    141
8.4.10  placeholder属性    141
8.4.11  required属性    141
8.5  本章小结    142
第9章  File API    143
9.1  Blob对象    143
9.2  File对象与Filelist对象    144
9.3  FileReader对象    145
9.3.1  FileReader对象的方法    145
9.3.2  FileReader对象的事件    146
9.3.3  实例:以二进制方式读取文件    146
9.3.4  实例:以文本方式读取文件    147
9.3.5  实例:以DataURL方式读取文件    148
9.4  FileSystem对象    149
9.4.1  FileSystem对象简介    150
9.4.2  请求文件系统    150
9.4.3  创建文件    152
9.4.4  写入文件    153
9.4.5  向文件中附加数据    154
9.4.6  复制选中的文件    155
9.4.7  删除文件    155
9.4.8  创建目录    156
9.4.9  读取目录内容    156
9.4.10  删除目录    157
9.4.11  复制文件或目录    158
9.4.12  移动文件或目录    159
9.4.13  filesystem:网址    159
9.5  本章小结    160
第10章  拖放API与桌面通知API    161
10.1  拖放API(Drag and Drop API)    161
10.1.1  实现拖放的步骤    161
10.1.2  使用DataTransfer对象    162
10.1.3  设置拖放时的视觉效果    162
10.1.4  自定义拖放图标    163
10.1.5  实例:选择图形    163
10.2  桌面通知API(Notification API)    166
10.2.1  桌面通知API的必要性    166
10.2.2  桌面通知生成流程    166
10.2.3  实例:桌面通知的两种实现方法    166
10.3  本章小结    168
第11章  本地存储与离线应用    169
11.1  认识Web Storage    169
11.1.1  客户端数据存储的历史与现状    169
11.1.2  Web Storage概述    170
11.1.3  示例:一个Web Storage的简单应用    170
11.2  使用Web Storage    172
11.2.1  检测浏览器的支持    172
11.2.2  存入与读取数据    173
11.2.3  清除数据    174
11.2.4  遍历操作    174
11.2.5  storage事件    174
11.3  离线应用    175
11.3.1  离线应用概述    175
11.3.2  离线资源缓存    175
11.3.3  Cache Mainfest基本用法    176
11.3.4  分析Cache Mainfest文件    177
11.3.5  在线状态监测    177
11.3.6  实例:创建离线应用    177
11.4  本章小结    181
第12章  Communication API    182
12.1  认识Communication API    182
12.1.1  Communication API简介    182
12.1.2  Communication API运行流程    182
12.1.3  Communication API的基本用法    183
12.2  跨文档消息通信详解    183
12.2.1  源安全简介    183
12.2.2  postMessage API基本用法    184
12.2.3  实例:使用postMessage API创建应用    184
12.3  XMLHttpRequest Level 2    186
12.3.1  跨源XMLHttpRequest    186
12.3.2  HTTP请求时限    186
12.3.3   FormData对象    187
12.3.4  上传文件    187
12.3.5  接收二进制数据    188
12.3.6  进度信息    189
12.3.7  实例:创建XMLHttpRequest应用    189
12.4  本章小结    193
第13章  Web Workers API与Web SQL API    194
13.1  Web Workers    194
13.1.1  Web Workers简介    194
13.1.2  实例:Web Workers简单应用    195
13.1.3  Web Workers嵌套    197
13.2  Web SQL    199
13.2.1  Web SQL基本使用    200
13.2.2  数据库的基本应用    200
13.2.3  实例:创建数据库并创建数据表    203
13.2.4  实例:插入数据与获取数据    204
13.3  本章小结    206
第14章  WebSocket API    207
14.1  WebSocket概述    207
14.2  WebSocket服务器    208
14.3  使用WebSocket API    208
14.3.1  浏览器支持情况检测    209
14.3.2  WebSocket API客户端的基本用法    209
14.4  实例:创建HTML5 WebSocket应用程序    210
14.4.1  编写客户端HTML文件    210
14.4.2  添加服务端WebSocket代码    211
14.4.3  添加WebSocket客户端代码    211
14.4.4  最终效果    213
14.5  本章小结    213
第15章  地理位置API    214
15.1  地理位置的定位原理    214
15.1.1  地理位置定位的方式及流程    214
15.1.2  HTML5中如何实现地理位置定位    214
15.2  Geolocation API    215
15.2.1  检测浏览器的支持    215
15.2.2  getCurrentPosition()方法    215
15.2.3  watchPosition()方法    218
15.2.4  clearPosition()方法    219
15.3  实例:在地图中显示地理位置    219
15.4  本章小结    221
第16章  History API    222
16.1  History API概述    222
16.2  为什么要用History API    222
16.3  如何使用History API    223
16.4  实例:浏览历史记录    223
16.5  实例:添加与修改历史记录    225
16.6  本章小结    228
第17章  CSS基础知识    229
17.1  CSS概述    229
17.1.1  CSS简介    229
17.1.2  CSS历史    229
17.1.3  CSS特点    230
17.1.4  CSS与浏览器的关系    230
17.1.5  CSS站点欣赏    230
17.2  基本CSS选择器    231
17.2.1  标记选择器    232
17.2.2  类别选择器    232
17.2.3  ID选择器    235
17.2.4  实例:应用基本选择器    236
17.3  复合选择器    238
17.3.1  “交集”选择器    238
17.3.2  “并集”选择器    239
17.3.3  后代选择器    240
17.3.4  实例:应用复合选择器    241
17.4  CSS继承特性    242
17.4.1  什么是继承    243
17.4.2  CSS属性继承    243
17.4.3  实例:正确使用CSS继承特性    243
17.5  CSS的层叠特性    244
17.6  CSS样式    245
17.6.1  行内样式    245
17.6.2  内部样式    246
17.6.3  外部样式    246
17.6.4  实例:CSS样式的实现方式    247
17.7  CSS优先级    248
17.7.1  id优先级高于class    248
17.7.2  后面的样式覆盖前面的样式    249
17.7.3  使用!important    250
17.7.4  指定的高于继承    250
17.7.5  行内样式高于内部或外部样式    251
17.7.6  实例:灵活运用CSS优先级    252
17.8  CSS盒子模型    254
17.8.1  盒子模型结构    254
17.8.2  边框(border)    255
17.8.3  内边距(padding)    258
17.8.4  外边距(margin)    259
17.8.5  盒子的浮动    260
17.8.6  盒子的定位    262
17.8.7  z-index空间位置    264
17.8.8  盒子的display属性    266
17.8.9  实例:用盒子模型创建网页布局    267
17.9  本章小结    270
第18章  CSS3选择器    271
18.1  属性选择器    271
18.1.1  E[att=“val”]    271
18.1.2  E[att^=“val”]    272
18.1.3  E[att
前言: 前    言
随着互联网技术的迅速发展,昔日Web 1.0和Web 2.0的时代已经离我们远去,一些互联网巨头纷纷用自己的实际行动迎接HTML5 CSS3技术的到来,所有主流的浏览器都已经开始支持HTML5和CSS3技术的很多特性,网页的代码变得越来越整洁,对搜索引擎的支持也越来越好,甚至在移动设备端,浏览器对HTML5也提供了很好的支持。
本书共分为25个章节,前两章主要介绍HTML5的一些基础知识,包括HMTL网页的构成、各种HTML元素的使用方法等;第3章主要介绍JavaScript的基础知识,JavaScript是现代网页编程中不可或缺的重要元素;第4章着重对ES6相关内容进行讲解,本章是对JavaScript内容的重要补充;第5~9章主要介绍HTML5中音/视频、文件操作的一些基本方法,它们可以使网页内容更加丰富;第10~16章主要介绍一些API相关的内容,包括拖放、桌面通知、Communication、Web Workers、Web SQL、Web Sockets、地理位置、History等,灵活使用这些API,可以使我们的网站功能更加强大;第17~ 23章集中介绍了CSS样式的使用方法,包括CSS基础知识、CSS3中各种选择器的灵活使用以及各种表格和背景样式的设置方法;第24章主要介绍CSS中各种滤镜的使用方法;第25章通过两个项目实战案例综合本书介绍的所有内容,实战演练HTML5和CSS3的使用方法。
本书示例下载
读者可以扫描二维码下载本书的示例源代码。
   希望自己动手制作Web网站的初学者
   有志于从事Web前端开发的专业人士
   高校和培训机构相关专业的师生
                                                                          编  者
                                                                      2019年1月