前端语言串讲笔记 ｜ 青训营

前端基础语言

• HTML，描述页面的结构（骨架）

  超文本标记语言（Hypertext Markup Language）

• CSS，描述页面的样式（外在）

• JavaScript，实现网页的功能和交互（肌肉）

  • 基本数据类型

    String 字符串

    Number 数字类型，不区分整数和小数

    Boolean 布鲁型

    Null 空值

    Undefined 未定义的值

    Symbol

    ES6中新的数据类型

    作用解决对象的属性名冲突

    Object 对象类型

    Array 数组

    Function 函数（方法）

前端语言的协作

• CSS/JavaScript in HTML
• HTML/CSS in JavaScript

HTML5

---

1、语义化

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

1.1 语义化标签

header nav main article section aside footer

1.2 语义化优点

• 在没有CSS样式的情况下，页面整体也会呈现很好的结构效果
• 代码结构清晰，易于阅读，
• 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

2、存储/音视频

2.1 IndexedDB

Indexed Database API 简称 IndexedDB，是浏览器中保存结构化数据的一种数据库，是为了替代已经废弃的Web Database API。

2.2 PWA&AMP

• PWA，基于sw的激活状态
• AMP，基于搜索引擎

2.3 Audio Video

3、浏览器API

3.1 Web Worker

可利用JS操作多线程（Worker线程与JS主线程可同时运行，互补阻塞）

3.2 Shadow DOM

为Web组件的CSS和DOM提供封装

3.3 Web Component

是一系列 API 的组合

可参考《秒懂 Web Component》

4、可视化相关

4.1 SVG &Canvas

用于在网页上绘制图形、动画和图像

SVG 是一种基于XML的矢量图形格式

Canvas 是一个HMTL5元素

两者的区别：

4.2 WebGL & WebGPU

WebGL（Web Graphics Library） 是一种3D绘图协议

WebGPU 是一种 API，它为Web公开GPU硬件的功能

WebGPU和WebGL的第一个重要区别是WebGPU将资源管理、工作准备和提交给GPU（图形处理单元）分开。

在 WebGL 中，单个上下文对象负责所有事情，并且它包含许多关联的状态。相反，WebGPU 将它们分成多个不同的上下文：

• GPUDevice创建资源，例如纹理和缓冲区。
• GPUCommandEncoder允许对单个命令进行编码，包括渲染和计算过程。
• 完成后，它变成GPUCommandBuffer对象，可以提交给GPUQueueGPU 执行。
• 可以将渲染结果呈现给 HTML 画布。或多个画布。或者根本没有画布——使用纯计算工作流

（源于百度）

4.3 WebAssembly（WASM）

一种将用一种编程语言编写的代码转换为浏览器可理解的机器代码的技术

可参考《十分钟搞懂WebAssembly》

心得

一开始抱着温故知新、查漏补缺的态度去看的，结果认真看下来发现自己存在许多不明确的知识点。

虽然做笔记确实耗费精力时间，但很有收获与成就感！

通过笔记的方式确实会让自身更认真的去了解新的知识点，同时巩固自己已经学过的知识点。

就像HTML一样，我们需要构建出一个最基础的框架，将所学的知识归纳整理，再不断学习新的知识，从而达到构建出自己的知识图谱。