前端语言的基本能力

基础前端有：HTML、CSS、JavaScript

HTML

HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。

CSS

CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。

JavaScript

JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。

如何运行

HTTP 请求：浏览器向服务器发送请求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。
构建 DOM 树：浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。DOM 树是一个以节点形式表示的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、属性或文本。
计算 CSS 树：浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。CSSOM 树是一个以节点形式表示的 CSS 规则结构。
排版（Layout）：浏览器将 DOM 树和 CSSOM 树结合，生成一个渲染树（Render Tree）。渲染树包含了 DOM 中的可见元素及其对应的 CSS 规则。接着，浏览器会计算渲染树中每个节点的位置和大小，这个过程称为排版或布局（Layout）。
渲染合成：浏览器将渲染树中的各个节点分层，创建渲染层（Render Layers）。每个层包含一个或多个节点，具有独立的绘制和合成上下文。
绘制（Painting）：浏览器根据渲染层绘制每个节点的视觉效果（如文本、颜色、图像、边框、阴影等），生成位图（Bitmaps）。绘制过程可能会在 GPU（图形处理器）上完成，以提高性能。
合成（Compositing）：浏览器将渲染层的位图合成为一个完整的屏幕图像，然后显示在屏幕上。合成过程通常由 GPU 完成，以实现高效的图像合成。

前端语言的协作配合

前端协作发展史

JavaScript 是单线程的，意味着在一个时间点只能执行一个任务。为了处理异步操作和事件回调，JavaScript 引入了事件循环（Event Loop）。事件循环使用任务队列（Task Queues）来管理要执行的任务。任务队列分为两种类型：宏任务队列（Macro-Task Queue）和微任务队列（Micro-Task Queue）。
React 为了提高 CSS 样式管理的可维护性和局部性，引入了 CSS Modules 和 JSS 等技术。它们分别使用不同的方法来解决组件样式的作用范围和动态化问题。

你不知道的HTML5

HTML DTD

标签分类

HTML ARIA

ARIA（Accessible Rich Internet Applications）是一套让 Web 应用和网站更具可访问性的技术规范。ARIA 通过在 HTML 中添加特定的属性，帮助屏幕阅读器等辅助技术更好地理解页面内容和交互。
了解ARlA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义

HTML5 存储

术语含义：

Cookies：Cookies 是存储在客户端计算机上的小文件，用于存储用户与网站之间的数据。常用于记录用户的登录状态、购物车内容等信息。

Local Storage：Local Storage 是 HTML5 新增的一种 Web 存储机制，用于在客户端存储持久化数据。与 Cookies 不同，Local Storage 的数据不会在每次请求时被发送到服务器，而是保存在客户端的本地存储空间中。

Session Storage：Session Storage 与 Local Storage 类似，也是用于在客户端存储数据。不同之处在于，Session Storage 的数据只在用户会话期间有效，即在浏览器窗口或标签页关闭时自动清除。

Capacity：Capacity 指的是 Local Storage 或 Session Storage 可以存储的最大数据量，通常为 5MB 到 10MB 不等。

Browsers：Browsers 指的是 Web 浏览器，如 Google Chrome、Firefox、Safari 等。

Accessible from：Accessible from 指的是可以从哪些网址访问到 Local Storage 或 Session Storage 中的数据。通常情况下，只有在同一域名下的页面才能够访问相同的 Local Storage 或 Session Storage 数据。

Expires：Expires 指的是 Cookie 的过期时间，即 Cookie 将在何时失效。当 Cookie 的 Expires 属性为一个固定的时间点时，该 Cookie 将在该时间点失效；当 Expires 属性为 0 时，该 Cookie 将在浏览器关闭时失效。

Storage Location：Storage Location 指的是 Local Storage 或 Session Storage 的存储位置。通常情况下，Local Storage 或 Session Storage 的数据是保存在客户端的本地存储空间中，而不是发送到服务器。

Sent with requests：Sent with requests 指的是 Cookie 是否随着 HTTP 请求一起发送到服务器。通常情况下，浏览器会将 Cookie 的值添加到 HTTP 请求头中，以便服务器进行身份验证等操作。

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