前端学习——从入门到放弃

最近跟着官方文档和 ChatGPT 糊了一个前端项目之后,基本理清了前端用的一些知识,开一篇博客进行梳理,随着学习深入会不断更新这篇入坑贴。

我的新书《LangChain编程从入门到实践》 已经开售!推荐正在学习AI应用开发的朋友购买阅读!
LangChain编程从入门到实践

基础

HTML(HTML5标准)

常见控件

表单控件

  • <input type="text"> 文本框
  • <input type="password"> 密码框
  • <input type="email"> 邮箱框
  • <input type="number"> 数字框
  • <input type="tel"> 电话号码框
  • <input type="url"> 网址框
  • <input type="search"> 搜索框
  • <input type="date"> 日期选择器
  • <input type="time"> 时间选择器
  • <input type="week"> 周选择器
  • <input type="month"> 月份选择器
  • <input type="datetime-local"> 本地日期时间选择器
  • <input type="color"> 颜色选择器
  • <input type="range"> 滑块
  • <input type="radio"> 单选框
  • <input type="checkbox"> 复选框
  • <select> 下拉框
  • <option> 下拉框选项
  • <textarea> 多行文本框
  • <button> 按钮
  • <label> 表单标签
  • <fieldset> 表单分组
  • <legend> 表单分组标题
  • <datalist> 列表框
  • <output> 表单输出

多媒体控件

  • <audio> 音频播放器
  • <video> 视频播放器
  • <source> 媒体资源
  • <picture> 响应式图片
  • <canvas> 画布

语义化标签

  • <header> 页面头部
  • <nav> 导航
  • <main> 主要内容
  • <section> 区块
  • <article> 文章
  • <aside> 侧边栏
  • <footer> 页面底部

其他控件

  • <a> 超链接
  • <img> 图片
  • <div> 容器
  • <span> 行内容器
  • <ul> 无序列表
  • <ol> 有序列表
  • <li> 列表项
  • <table> 表格
  • <tr> 表格行
  • <td> 表格列
  • <th> 表格标题列
  • <form> 表单
  • <iframe> 内嵌网页
  • <progress> 进度条
  • <meter> 测量条
  • <details> 折叠面板
  • <summary> 折叠面板标题
  • <blockquote> 引用块
  • <cite> 引用来源
  • <abbr> 缩写
  • <address> 地址
  • <time> 时间
  • <mark> 高亮
  • <hr> 水平线
  • <br> 换行符
  • <small> 小字体
  • <strong> 粗体
  • <em> 强调
  • <sub> 下标
  • <sup> 上标
  • <code> 代码

多媒体场景 API

MediaStream API

  • getUserMedia() 获取音视频流
  • MediaStream 音视频流对象
  • MediaStreamTrack 音视频流轨道对象
  • RTCPeerConnection WebRTC 连接对象

Web Audio API

  • AudioContext 音频上下文对象
  • OscillatorNode 振荡器节点
  • GainNode 增益节点
  • AnalyserNode 音频分析节点
  • AudioBuffer 音频缓冲区对象

Media Source Extensions API

  • MediaSource 媒体源对象
  • SourceBuffer 媒体源缓冲区对象
  • appendBuffer() 向缓冲区添加数据

Fullscreen API

  • requestFullscreen() 进入全屏模式
  • exitFullscreen() 退出全屏模式
  • fullscreenElement 当前全屏元素

Picture-in-Picture API

  • pictureInPictureEnabled 是否支持画中画
  • requestPictureInPicture() 进入画中画模式
  • exitPictureInPicture() 退出画中画模式

图形绘制Canvas 和 SVG

Canvas

Canvas 是基于像素的绘图技术,它可以让开发者使用 JavaScript 在画布上绘制二维和三维图形。Canvas 的优势在于可以精确地控制每个像素的颜色、位置和透明度等属性,因此适用于创建复杂的动态图像和动画效果,例如游戏、数据可视化等。

SVG

SVG 是一种基于 XML 的矢量图形格式,它可以让开发者创建可缩放的图像和动画效果。SVG 的优势在于可以轻松地控制每个图形对象的属性和样式,可以在不失真的情况下对图像进行缩放和旋转等变换操作,因此适用于创建图标、图表、地图等需要可缩放性的静态图像和动画效果。SVG 的绘图过程是基于对象的,因此开发者可以使用标记语言来描述图形对象,而不需要手动编写 JavaScript 代码。这使得开发者可以更轻松地创建和编辑图形,并且可以使用各种图形编辑软件来创建和编辑 SVG 图像。

Web 存储机制

  • LocalStorage
  • SessionStorage
  • IndexedDB
  • Web SQL
  • Cookies

浏览器实时通信

以下三种 API 都可以实现实时通信,但应用场景和实现方式略有不同。Web Sockets 适用于双向实时通信,例如聊天、游戏等应用,Server-Sent Events 适用于单向实时通信,例如新闻推送、股票行情等应用,而 WebRTC 则适用于实时的音视频通话,例如视频会议、在线教育等应用。

Web Sockets

Web Sockets 是一种 HTML5 标准中的 API,它可以在浏览器和服务器之间建立持久的双向通信连接,从而实现实时通信。Web Sockets 使用 WebSocket 协议进行通信,可以在客户端和服务器之间实现实时的数据交换,例如聊天应用、在线游戏、股票行情等。Web Sockets 可以发送和接收文本和二进制数据,可以使用加密和认证机制来保护数据的安全性。

Server-Sent Events

Server-Sent Events 是一种 HTML5 标准中的 API,它可以在浏览器和服务器之间建立单向通信连接,从而实现服务器向客户端推送实时数据。Server-Sent Events 使用纯文本格式进行通信,可以实现单向的实时通信,例如新闻推送、股票行情等。Server-Sent Events 可以使用 EventSource API 接收服务器发送的数据,从而实现实时数据的展示和处理。

WebRTC

WebRTC 是一种 HTML5 标准中的 API,它可以让浏览器之间直接进行音视频通信,从而实现实时的语音和视频通话。WebRTC 使用 P2P(点对点)技术进行通信,可以实现高清晰度的音视频通话,并支持屏幕共享、文件传输等功能。WebRTC 可以在不需要插件或第三方软件的情况下,在浏览器中直接进行音视频通信,从而提高用户的使用体验。

多线程 Web Workers

Web Workers 是 HTML5 标准中的 API,它可以让 JavaScript 运行在独立的后台线程中,不会阻塞主线程,从而可以提高页面的响应速度和性能。Web Workers 可以执行大量的计算密集型任务,例如图像处理、数据分析等。Web Workers 可以通过 postMessage() 方法向主线程发送消息,从而实现线程间的通信。

  1. 提高页面性能:Web Workers 可以让 JavaScript 运行在独立的后台线程中,不会阻塞主线程,从而可以提高页面的响应速度和性能。

  2. 执行计算密集型任务:Web Workers 可以执行大量的计算密集型任务,例如图像处理、数据分析等,可以提高 Web 应用程序的性能和效率。

  3. 可以实现线程间通信:Web Workers 可以通过 postMessage() 方法向主线程发送消息,从而实现线程间的通信,可以让多个线程之间共享数据和协同工作,提高程序的灵活性和可扩展性。

  4. 兼容性良好:Web Workers 是 HTML5 标准中的 API,得到了各大浏览器的支持,兼容性良好。

  5. 应用场景广泛:Web Workers 适用于需要处理大量计算密集型任务的 Web 应用程序,例如图像处理、数据分析、模拟计算等,也适用于需要提供实时通知和更新的应用程序,例如聊天、游戏等。

CSS(CSS3标准)

盒模型(Box Model)

  • 标准盒模型(Standard Box Model)和怪异盒模型(Quirks Box Model)

    常用解决方案:在CSS样式中通过 box-sizing 属性设置为 border-box,以将 padding 和 border 包含在盒子内部。如:box-sizing: border-box;

  • box-sizing 属性(Box Sizing Property)

    常用解决方案:设置 box-sizing 属性为 border-box,以保证元素的宽度和高度包含了元素的内边距和边框。如:box-sizing: border-box;

布局(Layout)

  • 流式布局(Fluid Layout)

    常用解决方案:将元素的大小设置为相对单位(如百分比、vw/vh),以适应不同的屏幕大小。如:width: 100%;max-width: 1200px;

  • 弹性布局(Flexible Box Layout or Flexbox)

    常用解决方案:使用 display: flex; 将容器设置为弹性布局,用 flex 属性来控制子元素的大小和位置。如:display: flex; flex-direction: row; align-items: center; justify-content: space-between;

  • 网格布局(Grid Layout)

    常用解决方案:使用 display: grid; 将容器设置为网格布局,用 grid-template-columnsgrid-template-rows 来定义网格的列和行。如:display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto;

  • 浮动(Float)和定位(Positioning)

    常用解决方案:使用浮动将元素放置在文档流中的特定位置,使用定位将元素放置在相对于视口或父元素的特定位置。如:float: left; position: absolute; top: 0; left: 0;

样式优先级(CSS Specificity)

  • 继承(Inheritance)

    常用解决方案:使用继承将样式属性从父元素传递到子元素,以实现统一的样式效果。如:color: inherit;

  • 特殊性(Specificity)

    常用解决方案:使用特殊性来确定样式的优先级,以避免样式冲突。如:div#content p.intro { color: red; }

  • 源代码顺序(Source Order)

    常用解决方案:根据样式的优先级和需要覆盖的目标元素,合理安排样式的源代码顺序。如:将相同特殊性的样式放在一起,便于管理和维护。

响应式设计(Responsive Design)

  • 媒体查询(Media Queries)

    常用解决方案:通过媒体查询设置不同的样式,以适应不同的设备和屏幕尺寸。如:@media screen and (max-width: 600px) { /* Styles for small screens */ }

    • 弹性单位(如 em、rem 和 vw/vh)(Flexible Units)

      常用解决方案:使用弹性单位(如 em、rem 和 vw/vh)来实现响应式布局,以适应不同的屏幕尺寸。如:font-size: 1rem; width: 50%; height: 50vh;

动画和过渡(Animations and Transitions)

  • transition 属性(Transition Property)

    常用解决方案:使用 transition 属性实现简单的过渡效果,如平滑地改变元素的样式属性,以提高用户体验。如:transition: all 0.3s ease-in-out;

  • animation 属性(Animation Property)

    常用解决方案:使用 animation 属性实现更复杂的动画效果,如旋转、缩放、淡入淡出等。如:animation: spin 2s linear infinite;

  • JavaScript 控制动画(JavaScript Animation)

    常用解决方案:使用 JavaScript 控制动画,以实现更高级的动画效果,如交互式动画、复杂的路径动画等。如:使用 requestAnimationFrame() 方法控制动画的帧数和时间,以避免卡顿和性能问题。

字体和文本样式(Fonts and Text Styling)

  • 字体(Fonts)

    常用解决方案:选择合适的字体族和字体大小,以实现清晰、易读的文本效果。如:font-family: Arial, sans-serif; font-size: 16px;

  • 字号(Font Size)

    常用解决方案:根据设计需求和用户体验,选择合适的字号,以实现清晰、易读的文本效果。如:font-size: 1.2rem;

  • 字重(Font Weight)

    常用解决方案:根据设计需求和文本内容,选择合适的字重,以实现清晰、易读的文本效果。如:font-weight: bold;

  • 行高(Line Height)

    常用解决方案:根据设计需求和文本内容,选择合适的行高,以实现清晰、易读的文本效果。如:line-height: 1.5;

  • 字间距(Letter Spacing)

    常用解决方案:根据设计需求调整字间距,以实现更好的排版效果。如:letter-spacing: 0.1em;

  • 伪元素(如 :before:after)(Pseudo Elements)

    常用解决方案:使用伪元素实现一些特殊效果,如添加装饰线、图标等。如:.btn:before { content: "⭐️"; }

颜色和背景(Colors and Backgrounds)

  • 颜色值(Color Values)

    常用解决方案:选择合适的颜色值,以实现清晰、美观的设计效果。如:color: #333; background-color: #f5f5f5;

  • 渐变(Gradients)

    常用解决方案:使用 CSS 渐变实现复杂的背景效果,如线性渐变、径向渐变等。如:background-image: linear-gradient(to bottom, #fff, #ccc);

  • 背景图像(Background Images)

    常用解决方案:使用背景图像实现特殊的背景效果,如纹理、图案、图片等。如:background-image: url('bg.jpg'); background-repeat: no-repeat;

  • 半透明色(Opacity)

    常用解决方案:使用半透明色实现特殊的背景效果,如模糊、透明等。如:background-color: rgba(255, 255, 255, 0.5);

边框和阴影(Borders and Shadows)

  • 边框样式(Border Styles)

    常用解决方案:选择合适的边框样式,以实现特殊的边框效果,如虚线、双线等。如:`border:

JavaScripts(ECMAScript 标准)

  • ECMAScript: ECMAScript 是 JavaScript 的核心规范,它定义了 JavaScript 语言的基本语法、数据类型、控制结构、函数、对象等。ECMAScript 是 JavaScript 语言的基础,所有的 JavaScript 引擎都必须遵守 ECMAScript 规范,以确保语言的一致性和互操作性。
  • DOM: DOM 是一种基于 XML 的文档对象模型,它定义了 HTML 和 XML 文档的结构和内容。通过使用 DOM,可以将文档解析成一个由节点和对象组成的树形结构,开发者可以通过操作这个结构来改变页面的内容和结构,例如添加、删除、移动或修改节点等。DOM 是 JavaScript 和 HTML 之间的桥梁,它使 JavaScript 能够与 HTML 文档交互,从而实现动态的网页效果。
  • BOM:BOM 是浏览器对象模型,它提供了一组对象和方法,用于操作浏览器窗口、历史记录、地址栏、定时器等。BOM 是 JavaScript 和浏览器之间的桥梁,它使 JavaScript 能够与浏览器交互,从而实现一些浏览器相关的功能,例如弹出窗口、重定向页面、控制浏览器的前进和后退等。

TypeScripts

  1. 先补一本开源书籍占坑 《简洁的TypeScript之书》

工程化

包管理

npm,yarn,pnpm

模块化开发

Node.js系列三 - 彻底掌握前端模块化:擅长Vue教学的coderwhy

CommonJS规范、ES6 Module规范

自动化构建工具

Webpack、Gulp、Grunt: 自动化构建工具可以帮助我们自动执行一些重复性的任务,例如打包、压缩、编译等,可以提高开发效率和代码质量。

CSS 预处理器

CSS 预处理器可以扩展 CSS 的功能,并提供更好的代码组织和维护。例如使用 Sass、Less 等预处理器,可以使用变量、嵌套、混合等功能,提高 CSS 的可读性和可维护性。

代码质量

ESLint: 静态代码检查工具,它可以检测代码中的语法错误、潜在的问题和不规范的代码风格等。

Prettier: Prettier 是一个代码格式化工具,它可以自动调整代码的格式,包括缩进、换行、空格等,以便于让代码具有一致的风格和易于阅读。

测试

单元测试:Jest

集成测试:Vitest

其他(跨语言通用)

版本控制: Git;

自动化部署:Travis CI、GitHub Actions;
k m n k h ni
文档:Swagger

进阶

V8 引擎

  1. Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境

Node

  1. 知识普及 如何正确的学习Node.js,虽然内容有点老,但是基本概念没有变,讲的挺好。
  2. 补一本开源手册 Node.js 最佳实践

CSR,SSR等渲染方式

  1. React 渲染的未来 讲各种渲染方式的原理,前端充电宝这个号的内容质量都蛮不错的,持续关注。在深入研究渲染模式之前,一些重要术语:
  • Time To First Byte (TTFB) :发出页面请求到接收到应答数据第一个字节所花费的时间;
  • First Paint (FP) :第一个像素对用户可见的时间。
  • First Contentful Paint (FCP): 第一条内容可见所需的时间。
  • Largest Contentful Paint (LCP) :加载页面主要内容所需的时间。
  • Time To Interactive (TTI): 页面变为交互并可靠响应用户事件的时间。

前端学习——从入门到放弃

https://liduos.com/frontend-learn.html

作者

莫尔索

发布于

2023-05-22

更新于

2024-05-24

许可协议

评论