- 博客(22)
- 收藏
- 关注
RSS订阅原创 浅谈对window.requestAnimationframe的初步使用理解
浅谈对window.requestAnimationframe的初步使用理解
2022-05-19 20:12:49
949
原创 文档声明Doctype和Doctype html有何作用， 严格模式与混杂模式如何区分，它们有何意义
文档声明Doctype和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?
2022-05-19 20:02:58
140
原创 HTML5中script标签中defer和async的区别
script标签中defer和async的区别如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。下图（稀土掘进社区）可以直观的看出三者之间的区别:其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下： 执行顺序： 多个带async属性的标签...
2022-05-19 19:56:35
203
原创 怎么去理解回流跟重绘？什么场景下会触发？
一、回流跟重绘是什么在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行
2022-05-19 19:54:04
490
原创 键盘点击事件（坦克大战）
通过点击键盘方向键移动坦克位置HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
2022-03-13 23:15:59
101
原创 网页版拼图小游戏
德玛西亚万岁!!!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
2022-02-10 15:40:40
3163
原创 星星评分模块实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <...
2022-02-09 18:10:46
86
原创 图片放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&...
2022-02-09 18:08:38
176
原创 轮播图点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...
2022-02-09 18:03:28
478
原创 列表的增删功能实现
删除列表功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...
2022-02-09 18:01:15
61
原创 库存变更器的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...
2022-02-09 17:58:13
64
原创 选择框转移功能实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...
2022-02-09 17:56:00
56
原创 复选框下拉菜单功能实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { margin: 0; list-style: none; padding: 0; } ...
2022-02-09 17:53:59
461
原创 点击标题栏更换页面内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>变更栏目框</title> <style> *{ margin: 0; padding: 0; } .container{ width...
2022-02-09 17:52:08
328
原创 实现点击鼠标更换图片
点击屏幕按钮，更换对应的图片功能实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #buttons button { margin-right: 20px; } img {
2022-02-09 17:48:49
1254
原创 HTML基础标签 零基础入门笔记内容
本博客是本人跟着百里半培训机构的老师对前端初步学习HTML标签的总结笔记，我尽量写的全面一点，属于完全零基础的小伙伴们部分参考的对象。
2021-12-18 15:22:03
624
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人