<p align="center"> <img width="200" src="./assets/images/logo.svg" alt="logo"> </p> <h1 align="center">前端刻意练习<small style="font-size:50%">(原:前端晚练课)</small></h1> <p align="center"> <img src="https://img.shields.io/badge/project-%E5%89%8D%E7%AB%AF%E5%88%BB%E6%84%8F%E7%BB%83%E4%B9%A0-%7B.svg"> <img src="https://badgen.net/github/stars/fezaoduke/fe-practice-hard"> <img src="https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7-%E5%89%8D%E7%AB%AF%E6%97%A9%E8%AF%BB%E8%AF%BE-brightgreen.svg"> </p> <p align="center">每天一个前端知识点,苦练前端真功夫</p> > 很多时候,我们在看书或网上的教程时“一学就会”,可真正解决实际问题时往往“一写就跪”,看似“学会”的知识其实并没有掌握,我们缺乏相对应的必要练习。 ## 本期练习传送门 - [第 129 期(W3C标准-CSS-动画):跳动的心 for 10.24程序员节](https://github.com/fezaoduke/fe-practice-hard/issues/132) <!-- - [前端刻意练习-周末小测-2](https://exam.kaoshixing.com/exam/exam_skip_login/292991/136969) > 开考日期:2019-07-19 至 2019-07-21 <br> > 考试时长:8 分钟 <br> > 人数限制:25 人(用的第三方考试系统,免费版限制 25 人) <br> > 及格分数:4 分(满分 6 分),考完自动核算成绩 <br> --> <!-- ## 榜单 - [参与者排行榜(第1-100期)](https://fezaoduke.github.io/fe-practice-hard/ranking-list/index.html?session=1) (前三有奖励哦) - [名人堂](https://fezaoduke.github.io/fe-practice-hard/honor-wall/) --> ## 知识体系 ### 基本功 ![](./assets/images/dumbbell.png) - #### W3C标准 - HTML/HTML5 - [第 17 期(W3C标准-HTML):ol标签计数器](https://github.com/fezaoduke/fe-practice-hard/issues/20) - [第 18 期(W3C标准-HTML):a 标签](https://github.com/fezaoduke/fe-practice-hard/issues/21) - [第 19 期(W3C标准-HTML):换行](https://github.com/fezaoduke/fe-practice-hard/issues/22) - [第 20 期(W3C标准-HTML):meta标签](https://github.com/fezaoduke/fe-practice-hard/issues/23) - [第 33 期(W3C标准-HTML):汉语拼音](https://github.com/fezaoduke/fe-practice-hard/issues/36) - [第 43 期(W3C标准-HTML):快捷键](https://github.com/fezaoduke/fe-practice-hard/issues/46) - [第 66 期(W3C标准-HTML):特殊实体字符HTML、CSS、JS对照表](https://github.com/fezaoduke/fe-practice-hard/issues/69) - [第 67 期(W3C标准-HTML):form 特性](https://github.com/fezaoduke/fe-practice-hard/issues/70) - [第 96 期(W3C标准-HTML):output 元素](https://github.com/fezaoduke/fe-practice-hard/issues/99) - [第 105 期(W3C标准-HTML):表单验证](https://github.com/fezaoduke/fe-practice-hard/issues/108) - [第 106 期(W3C标准-HTML):原生HTML实现输入框下拉补全提示](https://github.com/fezaoduke/fe-practice-hard/issues/109) - [第 112 期(W3C 标准-HTML):table的colgroup和col](https://github.com/fezaoduke/fe-practice-hard/issues/115) - CSS/CSS3 - 语法 - [第 53 期(W3C标准-CSS-语法):样式的顺序](https://github.com/fezaoduke/fe-practice-hard/issues/56) - [第 32 期(W3C标准-CSS-语法):两种盒模型的区别](https://github.com/fezaoduke/fe-practice-hard/issues/35) - [第 115 期(W3C标准-CSS-语法):CSS 单位](https://github.com/fezaoduke/fe-practice-hard/issues/118) - 伪类/伪元素 - [第 114 期(W3C标准-CSS-伪类&伪元素):focus-within 伪类](https://github.com/fezaoduke/fe-practice-hard/issues/117) - [第 123 期(W3C标准-CSS-伪类&伪元素):表单验证伪类](https://github.com/fezaoduke/fe-practice-hard/issues/126) - 布局排版 - [第 35 期(W3C标准-CSS-布局排版):图片等比缩放匹配父容器尺寸](https://github.com/fezaoduke/fe-practice-hard/issues/38) - [第 54 期(W3C标准-CSS-布局排版):word-break与word-wrap](https://github.com/fezaoduke/fe-practice-hard/issues/57) - [第 70 期(W3C标准-CSS-布局排版):不定高垂直居中](https://github.com/fezaoduke/fe-practice-hard/issues/73) - [第 97 期(W3C 标准-CSS-布局排版):首字下沉效果](https://github.com/fezaoduke/fe-practice-hard/issues/100) - [第 98 期(W3C 标准-CSS-布局排版):首行文字自定义](https://github.com/fezaoduke/fe-practice-hard/issues/101) - [第 100 期(W3C 标准-CSS-布局排版):两端对齐](https://github.com/fezaoduke/fe-practice-hard/issues/103) - 绘制 - [第 4 期(W3C标准-CSS-绘制):CSS 菱形剪切](https://github.com/fezaoduke/fe-practice-hard/issues/6) - [第 92 期(W3C 标准-CSS-绘制):background-origin 背景图片绘制参照点](https://github.com/fezaoduke/fe-practice-hard/issues/95) - [第 107 期(W3C标准-CSS-绘制):占位区块效果](https://github.com/fezaoduke/fe-practice-hard/issues/110) - [第 127 期(W3C标准-CSS-绘制):border-radius](https://github.com/fezaoduke/fe-practice-hard/issues/130) - 响应式布局 - [第 39 期(W3C标准-CSS-响应式布局):基于Grid的响应式布局](https://github.com/fezaoduke/fe-practice-hard/issues/42) - 动画 - [第 46 期(W3C标准-CSS-动画):按钮loading动画效果](https://github.com/fezaoduke/fe-practice-hard/issues/49) - [第 109 期(W3C标准-CSS-动画):翻转缩放动画](https://github.com/fezaoduke/fe-practice-hard/issues/112) - [第 129 期(W3C标准-CSS-动画):跳动的心 for 10.24程序员节](https://github.com/fezaoduke/fe-practice-hard/issues/132) - JavaScript - [第 64 期(W3C标准-JavaScript):JavaScript中常用的转义字符](https://github.com/fezaoduke/fe-practice-hard/issues/67) - [第 94 期(W3C 标准-JavaScript):toFixed 方法](https://github.com/fezaoduke/fe-practice-hard/issues/97) - [第 116 期(W3C 标准-JavaScript):atob & btoa —— base64 的解码编码](https://github.com/fezaoduke/fe-practice-hard/issues/119) - [第 124 期(W3C 标准-JavaScript):unicode码互转](https://github.com/fezaoduke/fe-practice-hard/issues/127) - [第 126 期(W3C 标准-JavaScript):iframe父子通信](https://github.com/fezaoduke/fe-practice-hard/issues/129) - DOM - [第 24 期(W3C标准-JavaScript-DOM):复选框的全选反选](https://github.com/fezaoduke/fe-practice-hard/issues/27) - [第 41 期(W3C标准-JavaScript-DOM):点击空白处检测](https://github.com/fezaoduke/fe-practice-hard/issues/44) - [第 71 期(W3C标准-JavaScript-DOM):复选框的半选](https://github.com/fezaoduke/fe-practice-hard/issues/74) - [第 84 期(W3C 标准-JavaScript-DOM):client、offset和scroll](https://github.com/fezaoduke/fe-practice-hard/issues/87) - [第 90 期(W3C 标准-JavaScript-DOM):获取DOM的样式](https://github.com/fezaoduke/fe-practice-hard/issues/93) - [第 117 期(W3C 标准-JavaScript-DOM):监听页面DOM元素的插入](https://github.com/fezaoduke/fe-practice-hard/issues/120) - [第 119 期(W3C 标准-JavaScript-DOM):DocumentFragment - 文档片段](https://github.com/fezaoduke/fe-practice-hard/issues/122) - [第 121 期(W3C 标准-JavaScript-DOM):dataset](https://github.com/fezaoduke/fe-practice-hard/issues/124) - BOM - [第 59 期(W3C标准-JavaScript-BOM):location 位置操作](https://github.com/fezaoduke/fe-practice-hard/issues/62) - 事件 - [第 38 期(W3C标准-JavaScript-事件):事件的绑定与移除](https://github.com/fezaoduke/fe-practice-hard/issues/41) - [第 51 期(W3C标准-JavaScript-事件):复合事件](https://github.com/fezaoduke/fe-practice-hard/issues/54) - [第 55 期(W3C标准-JavaScript-事件):页面卸载事件 beforeunload](https://github.com/fezaoduke/fe-practice-hard/issues/58) - [第 80 期(W3C标准-JavaScript-事件):InputEvent.inputType](https://github.com/fezaoduke/fe-practice-hard/issues/83) - [第 120 期(W3C 标准-JavaScript-事件):pagehide 和 pageshow](https://github.com/fezaoduke/fe-practice-hard/issues/123) - 存储 - [第 58 期(W3C标准-JavaScript-存储):保存文本域的内容刷新不丢失](https://github.com/fezaoduke/fe-practice-hard/issues/61) - 异步 - [第 36 期(W3C标准-JavaScript-异步):实现一个Promise方法](https://github.com/fezaoduke/fe-practice-hard/issues/39) - [第 65 期(W3C标准-JavaScript-异步):手写实现AJAX](https://github.com/fezaoduke/fe-practice-hard/issues/68) - [第 113 期(W3C 标准-JavaScript-异步):async 和 await](https://github.com/fezaoduke/fe-practice-hard/issues/116) - Math - [第 5 期(2019-05-12):数组最大数最小数](https://github.com/fezaoduke/fe-practice-hard/issues/7) - [第 7 期(2019-05-14):n以内的随机数](https://github.com/fezaoduke/fe-practice-hard/issues/9) - Date - [第 6 期(2019-05-13):获取过去n天的日期](https://github.com/fezaoduke/fe-practice-hard/issues/8) - [第 93 期(W3C 标准-JavaScript-Date):获取指定月份有多少天](https://github.com/fezaoduke/fe-practice-hard/issues/96) - [第 111 期(W3C 标准-JavaScript-Date):五种获取指定日期毫秒数的方法](https://github.com/fezaoduke/fe-practice-hard/issues/114) - WCAG - JSON - [第 10 期(2019-05-17):JSON.parse方法polyfill](https://github.com/fezaoduke/fe-practice-hard/issues/12) - [第 21 期(W3C标准-JSON):JSON.stringify](https://github.com/fezaoduke/fe-practice-hard/issues/24) - XML - SVG - [第 28 期(W3C标准-SVG):用SVG画西瓜](https://github.com/fezaoduke/fe-practice-hard/issues/31) - [第 104 期(W3C 标准-SVG):SVG优雅降级显示](https://github.com/fezaoduke/fe-practice-hard/issues/107) - canvas - [第 83 期(W3C标准-canvas):canvas 画布尺寸](https://github.com/fezaoduke/fe-practice-hard/issues/86) - [第 108 期(W3C标准-canvas):碎屑特效](https://github.com/fezaoduke/fe-practice-hard/issues/111) - URL - [第 79 期(W3C标准-URL):URLSearchParams](https://github.com/fezaoduke/fe-practice-hard/issues/82) - #### ECMAScript - 语法 - [第 13 期(2019-05-20):无返回值的语句](https://github.com/fezaoduke/fe-practice-hard/issues/15) - [第 14 期(ECMAScript-语法):类型判断](https://github.com/fezaoduke/fe-practice-hard/issues/16) - [第 16 期(ECMAScript-语法):浅克隆](https://github.com/fezaoduke/fe-practice-hard/issues/18) - [第 23 期(ECMAScript-语法):字符串对象HTML格式替代方法](https://github.com/fezaoduke/fe-practice-hard/issues/26) - [第 34 期(ECMAScript-语法):js 对象深拷贝](https://github.com/fezaoduke/fe-practice-hard/issues/37) - [第 57 期(ECMAScript-语法):setTimeout的其他参数](https://github.com/fezaoduke/fe-practice-hard/issues/60) - [第 72 期(ECMAScript-语法):判断整数](https://github.com/fezaoduke/fe-practice-hard/issues/75) - [第 73 期(ECMAScript-语法):Unicode字符与编码互转](https://github.com/fezaoduke/fe-practice-hard/issues/76) - [第 76 期(ECMAScript-语法):如何判断空对象](https://github.com/fezaoduke/fe-practice-hard/issues/79) - 上下文环境 - [第 12 期(2019-05-19):同名函数的执行](https://github.com/fezaoduke/fe-practice-hard/issues/14) - [第 52 期(WECMAScript-上下文环境):模拟call方法](https://github.com/fezaoduke/fe-practice-hard/issues/55) - [第 56 期(WECMAScript-上下文环境):模拟apply方法](https://github.com/fezaoduke/fe-practice-hard/issues/59) - 原型链 继承 - [第 22 期(ECMAScript-原型链 继承):实现 Array map](https://github.com/fezaoduke/fe-practice-hard/issues/25) - [第 26 期(ECMAScript-原型链 继承):实现 Array reduce](https://github.com/fezaoduke/fe-practice-hard/issues/29) - [第 37 期(ECMAScript-原型链 继承):原型链的尽头](https://github.com/fezaoduke/fe-practice-hard/issues/40) - 作用域 闭包 - [第 2 期(ECMAScript-作用域 闭包):定时输出数字](https://github.com/fezaoduke/fe-practice-hard/issues/3) - [第 31 期(ECMAScript-作用域 闭包):模拟ES6 Generator](https://github.com/fezaoduke/fe-practice-hard/issues/34) - 正则表达式 - [第 9 期(ECMAScript-正则表达式):CSS兼容性验证](https://github.com/fezaoduke/fe-practice-hard/issues/11) - [第 27 期(ECMAScript-正则表达式):金额数值格式化](https://github.com/fezaoduke/fe-practice-hard/issues/30) - 严格模式 - [第 11 期(ECMAScript-严格模式):arguments与'use strict'](https://github.com/fezaoduke/fe-practice-hard/issues/13) - #### HTTP 标准 - 请求过程 - [第 40 期(HTTP规范-请求过程):HTTP的方法](https://github.com/fezaoduke/fe-practice-hard/issues/43) - 状态码 - [第 77 期(HTTP 标准-状态码):HTTP状态码和请求阶段码](https://github.com/fezaoduke/fe-practice-hard/issues/80) - 头部信息 - HTTPS ### 内功 ![](./assets/images/strength.png) - #### 设计模式 - #### 算法 - 搜索 - [第 3 期(2019-05-10):无重复字符的最长子串](https://github.com/fezaoduke/fe-practice-hard/issues/4) - [第 30 期(算法-搜索):二分搜索算法](https://github.com/fezaoduke/fe-practice-hard/issues/33) - [第 42 期(算法-搜索):获取多层嵌套对象的目标属性值](https://github.com/fezaoduke/fe-practice-hard/issues/45) - 排序 - [第 1 期(算法-排序):多重排序](https://github.com/fezaoduke/fe-practice-hard/issues/2) - [第 86 期(算法-排序):经典排序算法之冒泡排序](https://github.com/fezaoduke/fe-practice-hard/issues/89) - [第 87 期(算法-排序):经典排序算法之选择排序](https://github.com/fezaoduke/fe-practice-hard/issues/90) - [第 88 期(算法-排序):经典排序算法之插入排序](https://github.com/fezaoduke/fe-practice-hard/issues/91) - [第 89 期(算法-排序):经典排序算法之计数排序](https://github.com/fezaoduke/fe-practice-hard/issues/92) - [第 91 期(算法-排序):经典排序算法之快速排序](https://github.com/fezaoduke/fe-practice-hard/issues/94) - [第 101 期(算法-排序):根据内容排序数组](https://github.com/fezaoduke/fe-practice-hard/issues/104) - [第 118 期(算法-排序):数组乱序](https://github.com/fezaoduke/fe-practice-hard/issues/121) - 递归 - [第 25 期(算法-递归):汉诺塔(河内塔)](https://github.com/fezaoduke/fe-practice-hard/issues/28) - [第 125 期(算法-递归):统计子类目数量](https://github.com/fezaoduke/fe-practice-hard/issues/128) - 数学 - [第 8 期(算法-数学):求斐波那契数前N项](https://github.com/fezaoduke/fe-practice-hard/issues/10) - [第 29 期(算法-数学):抽奖概率算法](https://github.com/fezaoduke/fe-practice-hard/issues/32) - [第 82 期(算法-数学):如何将一张图片完全显示在容器里](https://github.com/fezaoduke/fe-practice-hard/issues/85) - [第 85 期(算法-数学):判断一个数是否为素数(质数)](https://github.com/fezaoduke/fe-practice-hard/issues/88) - #### 数据结构 - 队列 - [第 62 期(数据结构-队列):队列和队列的模拟](https://github.com/fezaoduke/fe-practice-hard/issues/65) - [第 63 期(数据结构-队列):队列的应用](https://github.com/fezaoduke/fe-practice-hard/issues/66) - 栈 - [第 60 期(数据结构-栈):栈和栈的模拟](https://github.com/fezaoduke/fe-practice-hard/issues/63) - [第 61 期(数据结构-栈):栈的应用](https://github.com/fezaoduke/fe-practice-hard/issues/64) - 树 - 链表 - [第 74 期(数据结构-链表):什么是链表](https://github.com/fezaoduke/fe-practice-hard/issues/77) - [第 75 期(数据结构-链表):单链表的实现](https://github.com/fezaoduke/fe-practice-hard/issues/78) - 哈希 - [第 122 期(数据结构-哈希):哈希表](https://github.com/fezaoduke/fe-practice-hard/issues/125) - 数组 - [第 15 期(数据结构-数组):数组去重](https://github.com/fezaoduke/fe-practice-hard/issues/17) - [第 48 期(数据结构-数组):获取字母表](https://github.com/fezaoduke/fe-practice-hard/issues/51) - [第 81 期(数据结构-数组):数组项的互换和移动](https://github.com/fezaoduke/fe-practice-hard/issues/84) - [第 95 期(数据结构-数组):伪数组](https://github.com/fezaoduke/fe-practice-hard/issues/98) - [第 110 期(数据结构-数组):清空数组](https://github.com/fezaoduke/fe-practice-hard/issues/113) - #### 性能 - [第 102 期(内功-性能):节流](https://github.com/fezaoduke/fe-practice-hard/issues/105) - [第 103 期(内功-性能):防抖](https://github.com/fezaoduke/fe-practice-hard/issues/106) ### 招术 ![](./assets/images/boxing.png) - 主流框架 - React - [第 49 期(主流框架-React):生命周期函数](https://github.com/fezaoduke/fe-practice-hard/issues/52) - 技巧 - [第 47 期(技巧):图片加载器](https://github.com/fezaoduke/fe-practice-hard/issues/50) - [第 50 期(技巧):npm和yarn的命令行](https://github.com/fezaoduke/fe-practice-hard/issues/53) - [第 68 期(技巧):git 时光机(一)](https://github.com/fezaoduke/fe-practice-hard/issues/71) - [第 69 期(技巧):git 时光机(二)](https://github.com/fezaoduke/fe-practice-hard/issues/72) - [第 78 期(技巧):如何优化SPA首屏加载](https://github.com/fezaoduke/fe-practice-hard/issues/81) - [第 99 期(技巧):前端工程师容易犯的一些低级错误](https://github.com/fezaoduke/fe-practice-hard/issues/102) - [第 128 期(技巧):关于logo显示的SEO小技巧](https://github.com/fezaoduke/fe-practice-hard/issues/131) > 参考资料:[《前端工程师的知识体系》](https://www.cnblogs.com/yoshirogu/p/4174463.html)、[《WEB前端知识体系脑图》](https://www.jianshu.com/p/00baf1e65322)、[《自己总结的web前端知识体系大全》](https://www.cnblogs.com/wangfupeng1988/p/4649709.html) ## 友情赞助商:前端早读课 `前端早读课` 是由知名互联网公司大牛情封(4399 UED/高级主管)开设的前端学习公众号,每天清晨发布前端技术文章,与七万+同行相伴成长。欢迎扫码关注: ![](./screenshot/official-public-accounts.jpg)