参考

  • 面试

https://blog.csdn.net/Alison_Z/article/details/79522438
https://blog.csdn.net/qq_45670012/article/details/101565605
https://blog.csdn.net/prototype_/article/details/77949939
https://segmentfault.com/a/1190000016533375
https://blog.csdn.net/tTU1EvLDeLFq5btqiK/article/details/104980617
https://www.cnblogs.com/JobsOfferings/p/my_tencent_fourth.html
https://www.cnblogs.com/Garven/articles/6908626.html
https://blog.csdn.net/xixi880928/article/details/78842689

设计Design

https://www.zhihu.com/question/19573039
https://www.zhihu.com/question/25395360
https://blog.csdn.net/qq_26445509/article/details/51442793

  • 整屏设计 上下 左右
  • https://www.dowebok.com/ dowebok

  • fullpagehttps://www.dowebok.com/demo/2014/77/

  • 库 cdnjs

  • XML可扩展标记语言ExtensibleMarkupLanguage

  • SGML标准通用标记语言StandardGeneralizedMarkuplanguage
  • XHTML可扩展超文本标记语言eXtensibleHyperTextMarkupLanguage
  • DTD文档类型定义DocumentTypeDefinition

HTML超文本标记语言HyperTextMarkupLanguage


- 版本html5
- 嵌套规则
- 转义字符
- 语义化
- 组成
- 开始标签（Opening tag）
- 结束标签（Closing tag）
- 内容（Content）
- 元素（Element）

标签Tag

属性property

|
- 字体浏览器chrome://settings/fonts
- 默认大小16px medium
- em element rem root element
- 默认背景色 透明的
- 浏览器是白色的
|
- 字体图标fontawesome
https://segmentfault.com/a/1190000016384564
从head找 link标签 粘贴进来 |
- 兼容属性
1、-moz-代表firefox浏览器私有属性
2、-ms-代表ie浏览器私有属性
3、-webkit-代表safari、chrome私有属性
4、-o-代表Opera | | —- | —- | —- | |
- 用户界面属性User-interface
- resize
- appearance
- 背景background
- display
- vertical-align
- user-modify
- 定位position
- clear属性
- 浮动float
- 文本
|
- opacity
- 会继承 rgba()
- 浏览器窗口颜色是白色white
| |

属性值类型

  • 数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
  • 长度
    • 绝对长度单位
    • 相对长度单位
    • 视口单位(Viewport units)vw vh vmin vmax
  • 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。
  • 颜色: 用于指定背景颜色，字体颜色等。
  • 坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。
  • 函数: 例如，用于指定背景图片或背景图片渐变。
  • 关键字none 常用 initial（初始）、inherit（继承）、unset（未设置）、revert（还原）normaltop left

    CSS模板

HTML+CSS


- column多列布局
- grid布局参考
- Flex布局
- 参考
- 文档流


- 自适应布局


- 字体https://blog.csdn.net/qq_36742720/article/details/83472288
- 居中

code

JavaScript

  • 严格模式
  • 箭头函数

  • 循环foreach for infor of

    数据类型

    AsynchronousJavascriptAndXML”(异步 JavaScript 和 XML)

  • fetch

  • XHR对象XMLHttpRequestXMLHttpResponse

    事件

  • 鼠标事件对象坐标属性参考https://blog.csdn.net/weixin_41342585/article/details/80659736

  • 事件模型
  • 事件流
  • 事件捕获事件处理事件冒泡

  • 事件委托和事件代理

    运行机制

    WebGL

  • GLSL EShttps://www.jianshu.com/p/75b1b4b701f7

    • Thing.js tree.js
    • 璇玑动画VIEWSPREAD
  • WebGL中文网

  • Canvashttps://blog.csdn.net/ff906317011/article/details/80415137

    WebSocket

  • http://www.websocket-test.com/

    异步编程async/await

  • promise

  • generator

    WebAPI

    |
    - 视口viewport
    |
    - DOM (Document Object Model) 文档对象模型
    - Document
    - element
    - attr
    - NodeList
    - CSSStyleDeclaration
    - HTMLCollection
    - 位置大小信息 画图学习
    前端Frontend - 图2
    https://www.jianshu.com/p/fca39563aec1
    https://blog.csdn.net/ahshow/article/details/1966159 |
    - BOM(borwser Object Model) 浏览器对象模型
    - window
    - navigator
    - screen
    - history
    - location
    - Browser对象
    - 事件对象
    - 定时器
    - setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
    - setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
    - 应用
    setInterval(function () {
    var current_video = document.getElementsByTagName(‘video’)[0]
    current_video.play()
    }, 1000) | | —- | —- | —- |

HTML+CSS+JS效果


- 可拖动元素
- 拖动交换位置

TypeScript

前端优化

Node.js


- Chrome v8
- 安装配置使用 文件目录作用
- 命令
- 框架
- eggjs
- koa
- 构建工具Grunt Gulp Webpack
- npm包管理工具pnpm cnpm yarn nvm npx
- 搜索https://www.npmjs.com/

浏览器扩展插件


- 其它
- 官方
- 个人

浏览器Browser

|
- 查看浏览器信息
- chrome://chrome-urls
- chrome://net-internals/#dns
- 浏览器缓存
- 应用缓存
- 浏览器解析渲染 重绘repaint reflow回流
- 浏览器存储
- 请求响应过程
- 跨域
- 安全
- CSFR跨站请求伪造(Cross—Site Request Forgery)
- SQL注入SQL Injection Attack
- XSS Cross Site Scripting跨站脚本攻击
- 抓包窃取cookie
- SSRF
|
- 地址栏
https://blog.csdn.net/ly_dengle/article/details/78543770 | | | —- | —- | —- |

内核

  • webkit
  • Chromium

    浏览器开发工具F12

  • Elements
    • 获取资源url 右键 copy link address
    • 颜色拾取
    • 操作html css
  • js控制台
  • Network
  • 参考

https://blog.csdn.net/xiaoyida11/article/details/52674792

Web测试

  • postman
  • apipost
  • JMeter

  • apizza

    大前端

  • electron

  • flutter
  • RNReact Native
  • weex

框架 MVVM

  • bootstrap
  • artdialog
  • Amzae
  • artDialog
  • jQuery
  • artDialog
  • Bootstrap
  • Amaze UI
  • Angular

  • Recat

  • element

  • ant design

  • ant v可视化

  • p5.js 图形

参考

JS类

框架

  • bulma

anti-aliasing反走样 Jaggies锯齿

参考