Web前端实用技术示例教程

部分 初级篇?????????????????????????????????????????????????????????????????????????????????????????????????????????????1

1.1 一个简单的HTML5页面代码是什么样子的？???????????????????????????????????????????????????????.2

1.2 ＜html＞、＜body＞、＜head＞标签真的可以省略吗？??????????????????????????????????????????????????.2

1.3 如何安装与使用Sublime Text? ?????????????????????????????????????????????????????????????????????????????????.4

1.3.1 安装步骤?????????????????????????????????????????????????????????????????????????????????????????????????????????.4

1.3.2 使用?????????????????????????????????????????????????????????????????????????????????????????????????????????????????.5

1.4 什么是tableless design页面布局？????????????????????????????????????????????????????????????????????????.11

1.4.1 table布局??????????????????????????????????????????????????????????????????????????????????????????????????????.11

1.4.2 DIV+CSS 布局??????????????????????????????????????????????????????????????????????????????????????????????.13

1.5 什么是行内元素与块级元素？???????????????????????????????????????????????????????????????????????????????.14

1.6 什么是元素套框结构？???????????????????????????????????????????????????????????????????????????????????????????.19

1.7 如何选择正确的列表标签？???????????????????????????????????????????????????????????????????????????????????.22

1.7.1 无序列表???????????????????????????????????????????????????????????????????????????????????????????????????????.22

1.7.2 有序列表???????????????????????????????????????????????????????????????????????????????????????????????????????.23

1.7.3 定义列表???????????????????????????????????????????????????????????????????????????????????????????????????????.24

1.8 什么是文档流？???????????????????????????????????????????????????????????????????????????????????????????????????????.25

1.9 什么是相对定位？如何相对定位？????????????????????????????????????????????????????????????????????????.26

1.10 什么是 定位？如何 定位？??????????????????????????????????????????????????????????????????????.28

1.11 如何让文本水平居中？?????????????????????????????????????????????????????????????????????????????????????????.30

1.12 如何让文本垂直居中？?????????????????????????????????????????????????????????????????????????????????????????.31

1.13 如何让元素显示在其他元素之上？??????????????????????????????????????????????????????????????????????.33

1.14 如何制作一面照片墙？?????????????????????????????????????????????????????????????????????????????????????????.35

1.15 input有多少种？????????????????????????????????????????????????????????????????????????????????????????????????????.37

1.15.1 传统的10个输入控件??????????????????????????????????????????????????????????????????????????????.37

1.15.2 新增的13个输入控件??????????????????????????????????????????????????????????????????????????????.39

1.16 如何组合使用＜select＞和＜option＞标签？??????????????????????????????????????????????????????????????.43

1.17 为什么＜datalist＞标签灵活又方便？??????????????????????????????????????????????????????????????????????.45

1.18 颜色有哪几种标识方式？?????????????????????????????????????????????????????????????????????????????????????.47

1.18.1 英文单词表示颜色????????????????????????????????????????????????????????????????????????????????????.47

1.18.2 十六进制表示颜色????????????????????????????????????????????????????????????????????????????????????.48

1.18.3 RGB表示颜色??????????????????????????????????????????????????????????????????????????????????????????.49

1.18.4 HSL表示颜色???????????????????????????????????????????????????????????????????????????????????????????.50

1.19 CSS的光标功能有哪些？?????????????????????????????????????????????????????????????????????????????????????.51

1.19.1 新的内建光标???????????????????????????????????????????????????????????????????????????????????????????.51

1.19.2 not-allowed光标???????????????????????????????????????????????????????????????????????????????????????.51

1.19.3 none隐藏光标???????????????????????????????????????????????????????????????????????????????????????????.52

1.20 如何使用多媒体标签？?????????????????????????????????????????????????????????????????????????????????????????.52

1.20.1 ＜embed＞标签????????????????????????????????????????????????????????????????????????????????????????????.52

1.20.2 ＜video＞标签??????????????????????????????????????????????????????????????????????????????????????????????.53

1.20.3 ＜audio＞标签??????????????????????????????????????????????????????????????????????????????????????????????.54

1.21 CSS属性在JavaScript中如何使用？???????????????????????????????????????????????????????????????????.54

1.21.1 读写行内样式???????????????????????????????????????????????????????????????????????????????????????????.54

1.21.2 使用style对象??????????????????????????????????????????????????????????????????????????????????????????.55

1.21.3 编辑样式???????????????????????????????????????????????????????????????????????????????????????????????????.58

1.21.4 读取媒体查询???????????????????????????????????????????????????????????????????????????????????????????.58

1.21.5 使用CSS 事件??????????????????????????????????????????????????????????????????????????????????????????.59

1.22 JavaScript定位DOM元素的几种方式?????????????????????????????????????????????????????????????????.61

1.22.1 显示信息交互???????????????????????????????????????????????????????????????????????????????????????????.61

1.22.2 控制台监控???????????????????????????????????????????????????????????????????????????????????????????????.63

1.23 Document对象如何查找定位元素？????????????????????????????????????????????????????????????????????.64

1.23.1 getElementById( )定位??????????????????????????????????????????????????????????????????????????????.64

1.23.2 getElementsByClassName( )定位??????????????????????????????????????????????????????????????.64

1.23.3 getElementsByTagName( )定位?????????????????????????????????????????????????????????????????.65

1.23.4 querySelector( )定位??????????????????????????????????????????????????????????????????????????????????.67

1.24 JavaScript如何操纵DOM元素节点？?????????????????????????????????????????????????????????????????.67

1.24.1 节点创建 API ????????????????????????????????????????????????????????????????????????????????????????????68

1.24.2 页面修改API????????????????????????????????????????????????????????????????????????????????????????????.69

1.24.3 节点查询API????????????????????????????????????????????????????????????????????????????????????????????.70

1.25 JavaScript如何操纵DOM元素属性？?????????????????????????????????????????????????????????????????.72

1.26 JavaScript数组的创建方式有哪些？????????????????????????????????????????????????????????????????????.74

1.26.1 字面量表示法???????????????????????????????????????????????????????????????????????????????????????????.74

1.26.2 使用Array( )构造函数??????????????????????????????????????????????????????????????????????????????.74

1.26.3 使用Array(n)构造函数?????????????????????????????????????????????????????????????????????????????.74

1.27 JavaScript数组函数如何使用？????????????????????????????????????????????????????????????????????????????.75

1.27.1 pop( )和push( )???????????????????????????????????????????????????????????????????????????????????????????.75

1.27.2 shift( )和unshift( ) ??????????????????????????????????????????????????????????????????????????????????????.75

1.27.3 join( ) ??????????????????????????????????????????????????????????????????????????????????????????????????????????76

1.27.4 sort( ) ??????????????????????????????????????????????????????????????????????????????????????????????????????????76

1.27.5 reverse( ) ?????????????????????????????????????????????????????????????????????????????????????????????????????76

1.27.6 splice( ) ???????????????????????????????????????????????????????????????????????????????????????????????????????77

1.27.7 slice( ) ?????????????????????????????????????????????????????????????????????????????????????????????????????????77

1.27.8 concat( ) ??????????????????????????????????????????????????????????????????????????????????????????????????????78

1.27.9 indexOf( )和lastIndex( )?????????????????????????????????????????????????????????????????????????????.78

1.27.10 every( )和some( ) ?????????????????????????????????????????????????????????????????????????????????????.78

1.27.11 fill( ) ??????????????????????????????????????????????????????????????????????????????????????????????????????????79

1.27.12 filter( )???????????????????????????????????????????????????????????????????????????????????????????????????????79

1.27.13 find( )和findindex( )?????????????????????????????????????????????????????????????????????????????????.79

1.27.14 map( )????????????????????????????????????????????????????????????????????????????????????????????????????????80

1.27.15 toString( )??????????????????????????????????????????????????????????????????????????????????????????????????80

1.28 JavaScript 的Date对象如何使用？????????????????????????????????????????????????????????????????????????.80

1.28.1 定义Date对象???????????????????????????????????????????????????????????????????????????????????????????.80

1.28.2 获取Date对象的各个时间元素???????????????????????????????????????????????????????????????.80

1.29 JavaScript的Math对象如何使用？??????????????????????????????????????????????????????????????????????.82

1.29.1 Math.random( ) ???????????????????????????????????????????????????????????????????????????????????????????82

1.29.2 Math.abs( ) ??????????????????????????????????????????????????????????????????????????????????????????????????83

1.29.3 Math.max( )和Math.min( )????????????????????????????????????????????????????????????????????????.83

1.29.4 取整函数???????????????????????????????????????????????????????????????????????????????????????????????????.83

1.29.5 Math.sqrt( ) ?????????????????????????????????????????????????????????????????????????????????????????????????84

1.29.6 对数、指数、幂函数????????????????????????????????????????????????????????????????????????????????.84

1.29.7 其他Math函数?????????????????????????????????????????????????????????????????????????????????????????.84

第二部分 进阶篇???????????????????????????????????????????????????????????????????????????????????????????????????????????85

2.1 如何使用background-clip属性设置半透明边框？????????????????????????????????????????????????.86

2.2 如何实现多重边框的效果？???????????????????????????????????????????????????????????????????????????????????.87

2.2.1 box-shadow?????????????????????????????????????????????????????????????????????????????????????????????????????87

2.2.2 outline?????????????????????????????????????????????????????????????????????????????????????????????????????????????87

2.3 如何改变背景图的定位？???????????????????????????????????????????????????????????????????????????????????????.88

2.4 如何设置边框内圆角效果？???????????????????????????????????????????????????????????????????????????????????.89

2.5 如何设置多样式背景？???????????????????????????????????????????????????????????????????????????????????????????.92

2.5.1 生成条纹背景???????????????????????????????????????????????????????????????????????????????????????????????.92

2.5.2 修改背景大小???????????????????????????????????????????????????????????????????????????????????????????????.93

2.5.3 生成垂直条纹???????????????????????????????????????????????????????????????????????????????????????????????.94

2.5.4 生成斜向条纹???????????????????????????????????????????????????????????????????????????????????????????????.94

2.5.5 实现 多角度的渐变条纹????????????????????????????????????????????????????????????????????????????.95

2.5.6 使用一种颜色实现同色系条纹????????????????????????????????????????????????????????????????????.96

2.6 如何设置CSS渐变效果？??????????????????????????????????????????????????????????????????????????????????????.97

2.6.1 设置网格图案???????????????????????????????????????????????????????????????????????????????????????????????.97

2.6.2 设置波点图案???????????????????????????????????????????????????????????????????????????????????????????????.97

2.6.3 设置棋盘图案???????????????????????????????????????????????????????????????????????????????????????????????.98

2.7 如何实现背景的随机效果？??????????????????????????????????????????????????????????????????????????????????100

2.8 如何设置装饰性的图片边框？??????????????????????????????????????????????????????????????????????????????102

2.9 如何设置灵活的椭圆？??????????????????????????????????????????????????????????????????????????????????????????103

2.9.1 设置自适应椭圆??????????????????????????????????????????????????????????????????????????????????????????104

2.9.2 设置自适应半椭圆???????????????????????????????????????????????????????????????????????????????????????105

2.9.3 设置四分之一椭圆???????????????????????????????????????????????????????????????????????????????????????106

2.10 什么是伪类？????????????????????????????????????????????????????????????????????????????????????????????????????????107

2.10.1 :hover 伪类???????????????????????????????????????????????????????????????????????????????????????????????107

2.10.2 :nth-child(n)伪类??????????????????????????????????????????????????????????????????????????????????????107

2.10.3 :nth-of-type(n)伪类???????????????????????????????????????????????????????????????????????????????????108

2.11 什么是伪元素？????????????????????????????????????????????????????????????????????????????????????????????????????108

2.11.1 ::first-line伪元素??????????????????????????????????????????????????????????????????????????????????????109

2.11.2 ::first-letter伪元素????????????????????????????????????????????????????????????????????????????????????109

2.11.3 ::before和::after伪元素???????????????????????????????????????????????????????????????????????????109

2.12 如何根据子元素的数量来设置样式？????????????????????????????????????????????????????????????????.110

2.13 如何将矩形框修改为平行四边形框？????????????????????????????????????????????????????????????????.113

2.14 如何将图片裁剪成菱形？???????????????????????????????????????????????????????????????????????????????????.115

2.15 如何实现文本的连字符断行？???????????????????????????????????????????????????????????????????????????.118

2.16 如何插入换行？???????????????????????????????????????????????????????????????????????????????????????????????????.118

2.17 如何实现文本行条纹背景？????????????????????????????????????????????????????????????????????????????????121

2.18 如何调整Tab的宽度？????????????????????????????????????????????????????????????????????????????????????????122

2.19 如何扩大区域范围？????????????????????????????????????????????????????????????????????????????????????????????123

2.20 如何设置CSS元素宽度自适应内部元素？????????????????????????????????????????????????????????124

2.21 如何 控制表格列宽？????????????????????????????????????????????????????????????????????????????????????127

2.22 如何设置连字的字形？????????????????????????????????????????????????????????????????????????????????????????129

2.23 什么是图标字体？????????????????????????????????????????????????????????????????????????????????????????????????130

2.24 如何对＆字符进行美化？?????????????????????????????????????????????????????????????????????????????????????132

2.25 如何自定义文本下画线？????????????????????????????????????????????????????????????????????????????????????133

2.26 如何实现多种文字效果？????????????????????????????????????????????????????????????????????????????????????135

2.26.1 凸起效果??????????????????????????????????????????????????????????????????????????????????????????????????135

2.26.2 描边效果??????????????????????????????????????????????????????????????????????????????????????????????????136

2.26.3 发光效果??????????????????????????????????????????????????????????????????????????????????????????????????137

2.26.4 3D效果????????????????????????????????????????????????????????????????????????????????????????????????????138

2.27 什么是JavaScript的顺序结构？??????????????????????????????????????????????????????????????????????????139

2.28 什么是JavaScript的分支结构？??????????????????????????????????????????????????????????????????????????139

2.28.1 if语句???????????????????????????????????????????????????????????????????????????????????????????????????????139

2.28.2 if…else语句?????????????????????????????????????????????????????????????????????????????????????????????140

2.28.3 多重if…else语句????????????????????????????????????????????????????????????????????????????????????140

2.28.4 嵌套if…else语句????????????????????????????????????????????????????????????????????????????????????141

2.28.5 switch case语句???????????????????????????????????????????????????????????????????????????????????????141

2.29 什么是Java Script的循环结构？?????????????????????????????????????????????????????????????????????????142

2.29.1 for循环?????????????????????????????????????????????????????????????????????????????????????????????????????143

2.29.2 while循环????????????????????????????????????????????????????????????????????????????????????????????????143

2.29.3 do…while循环?????????????????????????????????????????????????????????????????????????????????????????143

2.29.4 for…in循环??????????????????????????????????????????????????????????????????????????????????????????????144

2.29.5 break和continue??????????????????????????????????????????????????????????????????????????????????????144

2.30 什么是定时器？????????????????????????????????????????????????????????????????????????????????????????????????????145

2.30.1 setTimeout (Expression , DelayTime ) ?????????????????????????????????????????????????????.145

2.30.2 setInterval ( Expression,DelayTime ) ???????????????????????????????????????????????????????.145

2.30.3 clearTimeout (对象) ??????????????????????????????????????????????????????????????????????????????????146

2.30.4 clearInteval (对象) ????????????????????????????????????????????????????????????????????????????????????146

2.31 canvas绘图技术有哪些？????????????????????????????????????????????????????????????????????????????????????147

2.31.1 ＜canvas＞标签的基本绘图步骤????????????????????????????????????????????????????????????????147

2.31.2 canvas 绘图中的基本方法???????????????????????????????????????????????????????????????????????148

2.31.3 线型相关属性??????????????????????????????????????????????????????????????????????????????????????????148

2.31.4 运用canvas绘图??????????????????????????????????????????????????????????????????????????????????????149

2.32 canvas图像技术有哪些？????????????????????????????????????????????????????????????????????????????????????153

2.32.1 drawImage ( )????????????????????????????????????????????????????????????????????????????????????????????153

2.32.2 getImageData ( )和putImageData ( ) ?????????????????????????????????????????????????????????156

第三部分 篇?????????????????????????????????????????????????????????????????????????????????????????????????????????157

3.1 如何实现环形文字效果？??????????????????????????????????????????????????????????????????????????????????????158

3.2 如何实现切角效果？??????????????????????????????????????????????????????????????????????????????????????????????159

3.2.1 CSS渐变方式??????????????????????????????????????????????????????????????????????????????????????????????159

3.2.2 CSS裁剪路径方式??????????????????????????????????????????????????????????????????????????????????????161

3.3 如何实现梯形标签页的效果？??????????????????????????????????????????????????????????????????????????????161

3.4 如何实现简单饼图效果？??????????????????????????????????????????????????????????????????????????????????????162

3.4.1 transform???????????????????????????????????????????????????????????????????????????????????????????????????????163

3.4.2 SVG??????????????????????????????????????????????????????????????????????????????????????????????????????????????167

3.5 如何添加多样式背景投影？??????????????????????????????????????????????????????????????????????????????????170

3.5.1 背景的单侧投影??????????????????????????????????????????????????????????????????????????????????????????170

3.5.2 背景的邻边投影??????????????????????????????????????????????????????????????????????????????????????????171

3.5.3 背景的双侧投影??????????????????????????????????????????????????????????????????????????????????????????171

3.6 如何给不规则图形设置阴影？??????????????????????????????????????????????????????????????????????????????172

3.7 如何给图片添加染色效果？??????????????????????????????????????????????????????????????????????????????????173

3.7.1 滤镜（filter）???????????????????????????????????????????????????????????????????????????????????????????????173

3.7.2 混合模式??????????????????????????????????????????????????????????????????????????????????????????????????????174

3.8 如何实现毛玻璃效果？??????????????????????????????????????????????????????????????????????????????????????????175

3.9 如何实现模拟折角效果？??????????????????????????????????????????????????????????????????????????????????????179

3.9.1 45°折角????????????????????????????????????????????????????????????????????????????????????????????????????????179

3.9.2 其他角度折角??????????????????????????????????????????????????????????????????????????????????????????????180

3.10 如何实现自定义复选框？????????????????????????????????????????????????????????????????????????????????????183

3.10.1 自定义复选框??????????????????????????????????????????????????????????????????????????????????????????183

3.10.2 开关按钮??????????????????????????????????????????????????????????????????????????????????????????????????185

3.11 如何实现轮播图？????????????????????????????????????????????????????????????????????????????????????????????????186

3.12 如何设置背景的遮罩效果？????????????????????????????????????????????????????????????????????????????????190

3.12.1 伪元素??????????????????????????????????????????????????????????????????????????????????????????????????????190

3.12.2 box-shadow???????????????????????????????????????????????????????????????????????????????????????????????191

3.12.3 backdrop ???????????????????????????????????????????????????????????????????????????????????????????????????191

3.13 如何实现背景的弱化？????????????????????????????????????????????????????????????????????????????????????????192

3.14 什么是固定定位？????????????????????????????????????????????????????????????????????????????????????????????????194

3.15 如何设置背景图集（一图多用）？?????????????????????????????????????????????????????????????????????195

3.16 如何实现页面滚动提示？????????????????????????????????????????????????????????????????????????????????????197

3.17 如何利用CSS实现图片对比？???????????????????????????????????????????????????????????????????????????199

3.18 如何实现背景覆盖和内容定宽？?????????????????????????????????????????????????????????????????????????202

3.19 如何实现元素垂直居中？????????????????????????????????????????????????????????????????????????????????????204

3.20 如何设置页面页脚？????????????????????????????????????????????????????????????????????????????????????????????206

3.21 如何实现动画的缓动效果？????????????????????????????????????????????????????????????????????????????????209

3.21.1 实现弹跳动画的缓动效果???????????????????????????????????????????????????????????????????????209

3.21.2 实现弹性过渡效果???????????????????????????????????????????????????????????????????????????????????210

3.22 如何设置图片逐帧显示？????????????????????????????????????????????????????????????????????????????????????212

3.23 如何设置文字的闪烁效果？????????????????????????????????????????????????????????????????????????????????214

3.23.1 CSS 动画实现??????????????????????????????????????????????????????????????????????????????????????????214

3.23.2 普通的闪烁效果???????????????????????????????????????????????????????????????????????????????????????215

3.24 如何实现文本内容逐个显示？????????????????????????????????????????????????????????????????????????????216

3.25 如何实现平滑的动画效果？????????????????????????????????????????????????????????????????????????????????217

3.26 如何实现沿环形路径平移的动画效果？?????????????????????????????????????????????????????????????219

3.27 什么是CSS变量？???????????????????????????????????????????????????????????????????????????????????????????????222

3.27.1 CSS 中声明一个变量???????????????????????????????????????????????????????????????????????????????222

3.27.2 使用JavaScript操作CSS变量???????????????????????????????????????????????????????????????223

3.28 如何编辑展示后的页面？????????????????????????????????????????????????????????????????????????????????????225

3.29 如何利用CSS Grid实现响应式布局？???????????????????????????????????????????????????????????????226

第四部分 框架篇?????????????????????????????????????????????????????????????????????????????????????????????????????????231

4.1 ES6框架??????????????????????????????????????????????????????????????????????????????????????????????????????????????????232

4.1.1 ECMAScript是什么？它与JavaScript有什么关系？???????????????????????????????232

4.1.2 ES6中的let、const关键字有什么区别，如何使用它们？??????????????????????232

4.1.3 ES6用什么 简单的方法处理字符串？????????????????????????????????????????????????????234

4.1.4 Set和Map是什么？有什么作用？????????????????????????????????????????????????????????????236

4.1.5 ES6对Object类型做了哪些升级优化？???????????????????????????????????????????????????241

4.1.6 ES6对函数有哪些扩展？???????????????????????????????????????????????????????????????????????????243

4.1.7 解构赋值的规则是什么？有哪些用途？????????????????????????????????????????????????????246

4.1.8 数组如何扩展？??????????????????????????????????????????????????????????????????????????????????????????248

4.1.9 什么是Number？????????????????????????????????????????????????????????????????????????????????????????252

4.1.10 JavaScript中如何声明一个 “类”？??????????????????????????????????????????????????????????254

4.1.11 如何优雅地处理异步操作？?????????????????????????????????????????????????????????????????????257

4.1.12 ES6中的Proxy有什么作用？??????????????????????????????????????????????????????????????????263

4.1.13 什么是JavaScript Generator？???????????????????????????????????????????????????????????????????266

4.2 Bootstrap框架?????????????????????????????????????????????????????????????????????????????????????????????????????????270

4.2.1 Bootstrap是什么？为什么使用它？???????????????????????????????????????????????????????????270

4.2.2 如何开始使用Bootstrap??????????????????????????????????????????????????????????????????????????????271

4.2.3 如何运用Bootstrap进行自适应？??????????????????????????????????????????????????????????????273

4.2.4 如何使用Bootstrap的组件？??????????????????????????????????????????????????????????????????????276

4.2.5 如何使用Bootstrap工具类？??????????????????????????????????????????????????????????????????????289

4.3 React 框架??????????????????????????????????????????????????????????????????????????????????????????????????????????????292

4.3.1 为什么要使用React？?????????????????????????????????????????????????????????????????????????????????292

4.3.2 什么是JSX语法？??????????????????????????????????????????????????????????????????????????????????????293

4.3.3 如何创建React项目？????????????????????????????????????????????????????????????????????????????????294

4.3.4 React如何渲染元素????????????????????????????????????????????????????????????????????????????????????296

4.3.5 什么是React组件？如何定义一个组件????????????????????????????????????????????????????297

4.3.6 如何给React组件添加样式？????????????????????????????????????????????????????????????????????299

4.3.7 state与props有何区别？????????????????????????????????????????????????????????????????????????????301

4.3.8 React生命周期有哪些？?????????????????????????????????????????????????????????????????????????????302

4.3.9 React元素的事件处理有何不同？?????????????????????????????????????????????????????????????305

4.3.10 React条件渲染如何实现？???????????????????????????????????????????????????????????????????????307

4.3.11 key的作用是什么？??????????????????????????????????????????????????????????????????????????????????309

4.3.12 受控组件与非受控组件有何区别？?????????????????????????????????????????????????????????310