前端学习指南：HTML5 基础、API 与实时通信核心知识

深入前端学习，掌握 HTML5 基础控件、多媒体 API、Web 存储与实时通信技术。本指南助你系统理解现代 Web 开发核心知识。

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

基础

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-columns 和 grid-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； 文档: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)： 页面变为交互并可靠响应用户事件的时间。