前端语言

HTML CSS JavaScript的基本能力

以人体为例

• HTML：骨骼
• CSS：皮囊
• JavaScript：肌肉，使之具备运动的能力

如果HTML是肉身、CSS就是外表、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人。

JavaScript基本语法

7 Types

1. String
2. Number
3. Boolean
4. Null
5. Undefined
6. Symbol
7. Object

• Array
• Function

Basic Vocabulary

1. Keyword/reserved word
2. Variable
3. Operate
4. Expression

Object

Object是一个构造函数,可以用它创建一个新对象。

Function

Function理解：

函数是一组执行特定任务（具有特定功能）的，可以重复使用的代码块

使用函数：

1. 声明/定义函数
2. 使用/运行函数

HTML、CSS、JavaScript如何在浏览器中运行

在浏览器中运行HTML、CSS和JavaScript是通过浏览器的渲染引擎来实现的。渲染引擎负责解析HTML文档并将其转换为可视化的网页。以下是它们在浏览器中的运行过程：

• HTML：HTML是网页的结构和内容描述语言。当浏览器加载HTML文档时，渲染引擎会解析HTML标记并构建DOM（文档对象模型）树，表示网页的结构。然后，渲染引擎会根据DOM树来渲染网页的内容。

• CSS：CSS是用于样式化网页的样式表语言。在解析HTML文档期间，渲染引擎会解析CSS样式表，并将其应用于DOM树中的元素。这样，网页的样式就会被应用并显示出来。

• JavaScript：JavaScript是一种脚本语言，用于实现网页的交互和动态效果。当浏览器遇到JavaScript代码时，渲染引擎会将其解释执行。JavaScript可以通过操作DOM树和修改CSS样式来实现网页的交互行为和动态效果。

综上所述，当浏览器加载网页时，渲染引擎会解析HTML文档并构建DOM树，然后解析CSS样式表并应用于DOM树中的元素，最后执行JavaScript代码来实现网页的交互和动态效果。这样，HTML、CSS和JavaScript就在浏览器中运行并呈现出完整的网页。

前端语言的协作配合

CSS in HTML

Inline CSS

行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。

Internal CSS

内嵌样式通过将 CSS 写在网页源文件的头部，即在 和 之间，通过使用 HTML 标签中的 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

External CSS

外部式通过 HTML 的 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

JavaScript in HTML

Web 页面使用 JavaScript 有 3 种方法

• 在页面中直接嵌入 JavaScript 代码；
• 链接外部 JavaScript 文件；
• 作为特定标签的属性值使用；

HTML DOM (文档对象模型)

HTML DOM 模型被构造为对象的树（以Node为例）：

• DOM是文档对象模型的简称，基本思想为：把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构；
• 所有的节点和最终的树状结构都有规范的对外接口，以达到使用编程语言操作文档的目的，因此DOM可以理解成文档的编程接口
• 严格来说DOM不属于JavaScript但是操作DOM是JavaScript常见的任务
• node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成

DOM事件机制

• 事件捕获

事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。如果前面的例子使用事件捕获，则点击div元素会以下列顺序触发 click 事件：document-> html-> body-> div

• 事件冒泡

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。 在点击页面中的id为inner的div元素，click事件会以如下顺序发生：div->body->html->document

事件循环机制EventLoop

Event Loop即事件循环，是解决javaScript单线程运行阻塞的一种机制。

• 同步任务

首先，我们用一个栈来表示主线程。当有多个同步任务时，这些同步任务会依次入栈出栈，同步任务1先入栈，执行完之后，出栈，接着同步任务2入栈，依此类推。

• 异步任务

异步任务会在同步任务执行之后再去执行，那么如果异步任务代码在同步任务代码之前呢？在js机制里，存在一个队列，叫做任务队列，专门用来存放异步任务。也就是说，当异步任务出现的时候，会先将异步任务存放在任务队列中，当执行完所有的同步任务之后，再去调用任务队列中的异步任务

HTML in JavaScript

使用文档对象模型（DOM）动态创建和操作HTML元素

Javascript模板引擎mustache.js

JSX

JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。

JSX的特点

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它是类型安全的，在编译过程中就能发现错误。
3. 使用 JSX 编写模板更加简单快速。

CSS in JavaScript

在JavaScript中，可以动态操作修改CSS样式

CSS Module

CSS Modules并不是一个正式的声明或者是浏览器的一个实现，而是通过构建工具（webpack or Browserify）来使所有的class达到scope的一个过程。

使用CSS Module的好处

1. 解决全局样式冲突带来的问题
2. 解决嵌套层次过深的选择器带来的问题

JSS

一句话概括CSS in JS (JSS) ，就是"行内样式"(inline style)和"行内脚本"(inline script)。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这样就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。

HTML5

HTML并非完备，他只是一个标记语言

HTML的基本语法

HTML全部标签分类

HTML head标签

HTML body功能性标签

HTML ARIA

ARIA是Accessible Rich Internet Application的简称，指无障碍富互联网应用。可以使一些有功能障碍(如听力，视力)的人群，使用你的网站。

这里给一个span添加了checkbox角色，表示这个span被用于checkbox，这意味着，我们可能已经用JS代码绑定了这个span的click事件，并且以checkbox的交互方式来处理用户操作。同时，ARIA系统还提供了一系列ARIA属性给checkbox这个role，这意味着，我们可以通过HTML属性变化来理解这个JavaScript组件的状态，读屏软件等三方客户端，就可以理解我们的UI变化，这正是ARIA标准的意义。

HTML5&相关技术

HTML5语义化标签

语义化标签就是类似于 p，span，img 等这样的，看见标签就知道里面应该保存的是什么内容的是语义化标签。像 div 这样的里面可以装任意东西的就是非语义化标签。

建议：用对比不用好，不用比用错好

HTML5储存

h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。

HTML5 IndexedDB

该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。IndexedDB 数据库中创建或删除对象仓库、创建或删除索引的操作，可以看作是数据库的结构发生变化，必须使用新的版本号来更新数据库的版本，以避免重复修改数据库结构。

HTML5 PWA&&AMP

PWA

特点：使用 Service Work 技术实现即时下载，当用户打开应用后，页面资源的加载不再完全依赖于网络，而是使用 Service Work 缓存离线包存在本地，确保为用户提供即时可靠的体验。

AMP

• 主要用于搜索引擎，Google 前沿的 AMP 「 Accelerated Mobile Pages 」技术，能使用户从搜索引擎当中进入我们页面的体验得到一个极大的提升。

• AMP Cache是缓存并传输AMP页面的CDN，进一步提高AMP网页的性能。用户在搜索引擎中点击AMP网页时，实际上访问的是优化后的缓存页面。

HTML5 二进制

HTML5 webWorker

Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 worker 负担了，主线程就会很流畅。网页加载展示可分为两部分：主进程也叫 UI 进程，子进程也叫工作进程，子进程不能控制 UI 进程，只能进行数据交互。

HTML5 websocket

WebSocket协议是基于TCP的一种新的[网络协议]它实现了浏览器与服务器全双工(full-duplex)通信—―允许服务器主动发送信息给客户端。

Shadow Dom

通过 shadow dom 来隐藏控件的内部实现，就不用担心对样式表进行修改时对控件造成影响了。

Web Components

Web Components 是一个浏览器原生支持的组件化方案，允许创建新的自定义、可封装、可重用的HTML 标记。

SVG & CANVAS

SVG（素描）

SVG 可以在H5中直接绘制，但绘制的是矢量图

CANVAS（水彩）

Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。

WebGL 与 WebGPU

核心部分

• 顶点着色器：绘制在屏幕的某个位置
• 片段着色器：绘制物体的外观

WebAssembly

WASM是一种新的编码方式，可以直接在浏览器运行

拓展

交互范式 MVC & MVVM & MVP

MVC

• MVC的目的就是将M和V的代码分离，且MVC是单向通信，必须通过Controller来承上启下。
• Controller层触发View层时，并不会更新View层中的数据，View层的数据是通过监听Model层数据变化自动更新的，与Controller层无关。换言之，Controller存在的目的是确保M和V的同步，一旦M改变，V应该同步更新。

MVVM

• MVVM采用双向绑定：View的变动，自动反映在ViewMode中
• MVVM框架图和MVP框架图很相似，两者都是从View层开始触发用户的操作，之后经过第三层，最后到达Model层。而关键问题就在于这第三层的内容，Presenter层是采用手动写方法来调用或修改View层和Model层；而ViewModel层双向绑定了View层和Model层，因此，随着View层的数据变化，系统会自动修改Model层的数据，反之同理。

MVP

• MVP是模型-视图-表示器，它比MVC框架大概晚出现20年，是从MVC模式演变而来的。它们的基本思想有相同之处：Model层提供数据，View层负责视图显示，Controller/Presenter层负责逻辑的处理。将Controller改名为Presenter的同时改变了通信方向。
• 在MVP框架中，View层不能再直接访问Model层，必须通过Presenter层提供的接口，然后Presenter层再去访问Model层。