前端语言基础

前端开发是指构建和开发Web应用程序用户界面的过程。前端开发使用的主要语言包括HTML、CSS和JavaScript。

HTML（Hypertext Markup Language）：HTML是一种标记语言，用于描述网页结构。它使用标签（例如<p>、<div>和<h1>）来定义网页的不同元素，如段落、标题、图像和链接等。HTML提供了一种结构化的方式来组织和呈现网页内容。
CSS（Cascading Style Sheets）：CSS是一种样式表语言，用于描述网页的外观和布局。它通过选择器和属性来选择网页中的元素，并为其应用样式。使用CSS，开发者可以设置字体、颜色、间距、背景等元素的外观，以及定义网页的布局和响应式设计。
JavaScript：JavaScript是一种脚本语言，用于添加动态交互和功能到网页中。它可以在浏览器中运行，并与HTML和CSS进行交互。JavaScript可以用于处理表单验证、响应事件（如点击、滚动和拖放）、创建动画效果、发送和接收数据等。它也可以通过与服务器进行通信来构建更复杂的Web应用程序。

CSS

CSS组成

CSS（层叠样式表）由三个主要组成部分构成，它们共同定义了网页的样式和布局：

选择器（Selector）：选择器用于选择HTML文档中的元素，并为这些元素应用样式。它可以基于元素的类型、类名、ID、属性等进行选择。例如，选择器可以是元素名称（如p、div）、类名（如.class-name）、ID（如#id-name）等。
属性（Property）：属性用于定义要应用于选择器选定元素的样式。每个属性都有一个对应的值，它决定了样式的具体表现方式。常见的CSS属性包括颜色（color）、字体大小（font-size）、边框样式（border-style）等。
值（Value）：值是属性的具体表现方式，它决定了样式的实际效果。属性的值可以是具体的数值（如像素值、百分比等）、颜色、关键字（如none、bold等）或其他特定的属性值。例如，color: red;中的red就是一个属性值。

通过组合选择器、属性和值，我们可以定义各种不同的样式来美化网页的外观和布局。CSS的层叠性质，即样式可以通过优先级和级联规则相叠加和覆盖，使得我们能够更灵活地控制页面的样式。

伪类（pseudo-class）和伪元素（pseudo-element）

在CSS中，伪类（pseudo-class）和伪元素（pseudo-element）是用于选择DOM中特定状态或位置的规则。它们使用冒号（:）来表示。

伪类（pseudo-class）：伪类用于选择处于特定状态的元素，如鼠标悬停、被点击、处于特定位置等。常见的伪类包括:hover（鼠标悬停）、:active（被激活）、:focus（获得焦点）等。

示例：

a:hover {
  color: red;
}

input:focus {
  border: 2px solid blue;
}

伪元素（pseudo-element）：伪元素用于选择元素的特定部分或创建额外的元素，并为其应用样式。常见的伪元素包括::before（在元素之前创建伪元素）、::after（在元素之后创建伪元素）等。

示例：

p::before {
  content: ">>";
}

div::after {
  content: "This is an extra content";
}

需要注意的是，伪元素使用两个冒号（::）来表示，而伪类使用一个冒号（:）。但为了向后兼容，对于某些旧版的伪元素，仍然可以使用单个冒号。通过使用伪类和伪元素，可以在CSS中实现更加精细和灵活的选择和样式调整，使得我们可以更好地控制和设计网页中的元素。

JavaScript

JavaScript（JS）是一种广泛用于Web开发的高级、解释性、弱类型编程语言。它被设计用于在Web浏览器中为网页添加交互性和动态功能，但现在也广泛用于服务器端开发、移动应用开发和桌面应用开发。

数据类型

JavaScript（JS）是一种弱类型语言，变量的类型可以根据需要自动转换。以下是JavaScript中的一些常见数据类型：

字符串（String）：表示一串文本。使用单引号（'）或双引号（"）括起来的字符序列，如 'Hello World'。
数字（Number）：表示数值。可以是整数或浮点数，如 42 或 3.14。
布尔值（Boolean）：表示真或假。只有两个取值，true（真）或 false（假）。
对象（Object）：表示复杂的数据结构。可以包含多个键值对，每个键值对之间使用逗号分隔，如 {name: 'John', age: 25}。
数组（Array）：表示有序的集合。用方括号括起来的一组值，各个值之间使用逗号分隔，如 [1, 2, 3]。
空值（Null）：表示无值或空对象。只有一个取值，即 null。
未定义（Undefined）：表示变量未被赋值。只有一个取值，即 undefined。
函数（Function）：表示可执行的代码块。可以接收参数并返回值。

基本语法

JavaScript的基本语法包括变量声明、赋值、条件语句、循环语句和函数定义等。以下是JavaScript的主要语法要点：

变量声明和赋值

使用 var、let 或 const 关键字声明变量。
使用等号（=）将值赋给变量。
变量名遵循标识符规则，由字母、数字、下划线和美元符号组成，并且不能以数字开头。

条件语句

if 语句：根据条件执行不同的代码块。
else if 和 else：在 if 语句中使用，可以进行多个条件判断。

循环语句

for 循环：通过设置初始条件、循环条件和步进来重复执行一段代码。
while 循环：当满足指定条件时，重复执行一段代码。

函数定义和调用

使用 function 关键字定义函数。
函数可以接收参数，并返回一个值。
使用函数名和括号来调用函数，传递参数（如果有）。

注释

单行注释：使用 // 开始，注释内容位于 // 之后。
多行注释：使用 /* 开始，使用 */ 结束，注释内容位于 /* 和 */ 之间。

示例代码如下：

// 变量声明和赋值
let name = 'John';
const age = 25;

// 条件语句
if (age >= 18) {
  console.log('成年人');
} else {
  console.log('未成年人');
}

// 循环语句
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 函数定义和调用
function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('Alice');

OBJECT

JavaScript中的对象（Object）是一种复杂的数据类型，用于存储一组键值对。对象可以包含属性和方法，以及其他对象作为其属性的值，从而形成嵌套结构。对象在JavaScript中被广泛用于表示真实世界的事物、建模数据结构以及实现面向对象编程。

以下是一些关于JavaScript对象的重要概念和用法：

对象字面量表示法：

使用花括号（{}）创建对象，可以直接在花括号中添加键值对，用逗号分隔。
键（属性名）可以是字符串或标识符，值可以是任意数据类型，如字符串、数字、布尔值、数组、函数等。

示例：

let person = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'coding'],
  greet: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

对象属性访问：

使用点号（.）来访问对象的属性。
使用方括号（[]）并传递属性名作为字符串来访问对象的属性，特别适用于属性名包含特殊字符或动态生成的情况。

console.log(person.name); // 输出 "John"
console.log(person['age']); // 输出 30

添加和修改属性：

可以通过直接赋值来添加新的属性或修改现有属性。

person.gender = 'male'; // 添加新的属性
person.age = 31; // 修改属性值

对象方法：

对象的属性可以是函数，称为对象的方法。
可以通过对象名和点号来调用对象的方法。

person.greet(); // 调用对象的方法，输出 "Hello, John!"

嵌套对象：

对象的属性值可以是另一个对象，从而形成嵌套的数据结构。

let student = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'New York',
    country: 'USA'
  }
};
console.log(student.address.city); // 输出 "New York"

FUNCTION

JavaScript中的函数（Function）是一种可重复使用的代码块，它被定义一次后可以在程序中多次调用。函数有输入参数和返回值，可以完成特定的任务和执行特定的操作。以下是一些关于JavaScript函数的重要概念和用法：

函数定义：

使用 function 关键字定义函数，后面跟着函数名和一对圆括号，括号中可以包含参数。
函数体位于一对花括号中，其中包含函数执行的代码。

function greet(name) {
  console.log('Hello, ' + name + '!');
}

函数调用：

使用函数名和一对圆括号来调用函数，并传递参数（如果有）。
调用函数时，代码会跳转到函数定义处，并执行函数体中的代码。

greet('John'); // 调用函数，输出 "Hello, John!"

函数参数：

函数可以接收输入参数，参数位于函数定义的圆括号中，并用逗号分隔。
函数在调用时可以传递参数，参数的值会被传递给函数中的相应参数。

function add(a, b) {
  return a + b;
}
let result = add(3, 5); // 调用函数并将返回值赋给变量

函数返回值：

函数可以通过 return 关键字返回一个值，该值可以被赋给变量或在函数调用表达式中使用。
如果函数没有 return 语句或者没有返回值，函数会返回 undefined。

function multiply(a, b) {
  return a * b;
}
let product = multiply(4, 6); // 调用函数并将返回值赋给变量

匿名函数：

可以将函数赋值给变量，创建匿名函数。这种函数没有函数名，可以直接通过变量名来调用。

let greet = function(name) {
  console.log('Hello, ' + name + '!');
};
greet('Alice'); // 调用匿名函数，输出 "Hello, Alice!"

函数作为参数：

JavaScript中的函数可以作为参数传递给其他函数，从而实现更高级的功能。

function sayHello() {
  console.log('Hello!');
}

function runFunction(func) {
  func();    // 调用传递进来的函数
}

runFunction(sayHello);    // 输出 "Hello!"

BROWSER渲染流程

浏览器渲染页面的基本流程，通常称为渲染引擎的工作流程。以下是每个步骤的简要说明：

HTTP：浏览器通过发送HTTP请求获取页面的HTML、CSS和JavaScript等资源。
构建DOM树：浏览器将接收到的HTML解析成DOM（Document Object Model）树，这是页面的结构化表示形式，它将页面中的每个元素表示为树中的节点。
计算CSS树：浏览器解析CSS样式文件，将每个样式规则应用于DOM树中的对应元素，以计算出最终的样式信息。这将生成一个层叠样式表（CSS）树。
排版：在排版阶段，浏览器确定每个元素在屏幕上的确切位置和尺寸。这涉及到计算元素的布局、处理文本的换行和其他布局相关的计算。
渲染合成：渲染引擎将排版后的元素转换为屏幕上的像素信息。这包括将页面中的各个元素转换为位图，并应用合适的图形效果，如边框、阴影等。
绘制：在这个阶段，渲染引擎将渲染合成后的像素信息绘制到屏幕上。

前端语言的协作配合

CSS in HTML

在HTML中使用CSS，可以通过多种方式将CSS样式应用于HTML元素。以下是几种常见的方法：

内联样式（inline）：通过在HTML元素的"style"属性中直接指定CSS样式。例如：

<p style="color: blue; font-size: 16px;">这是一段带有内联样式的文本。</p>

内部样式表（internal）：在HTML文件的<head>元素中使用<style>标签定义CSS样式。例如：

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一个使用内部样式表的段落。</p>
</body>

外部样式表（external）：将CSS样式定义在一个独立的外部CSS文件中，并在HTML文件中通过<link>标签引入。例如：在 HTML 文件中的<head>元素中插入以下代码：

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一个使用外部样式表的段落。</p>
</body>

在一个名为 "styles.css" 的文件中定义 CSS 样式：

p {
  color: blue;
  font-size: 16px;
}

Javascript in HTML

在HTML中使用JavaScript，可以通过以下几种方法将JavaScript代码嵌入到HTML文件中：

内联脚本：将JavaScript代码直接嵌入到HTML元素的"script"标签中。在"script"标签中的代码将被浏览器解释和执行。例如：

<body>
  <script>
    // JavaScript代码
    alert("Hello, world!");
  </script>
</body>

外部脚本：将JavaScript代码保存到一个独立的外部文件中，然后通过"src"属性将该文件链接到HTML文件中的"script"标签中。例如：

在HTML文件中的<head>或<body>元素中插入以下代码：

<head>
  <script src="script.js"></script>
</head>

在名为 "script.js" 的文件中编写 JavaScript 代码：

// JavaScript代码
alert("Hello, world!");

事件属性：HTML元素可以具有事件属性，可以直接在属性值中编写 JavaScript 代码。当触发特定事件时，代码将被执行。例如：

<body>
  <button onclick="alert('Hello, world!')">点击我</button>
</body>

HTML in JavaScript

在JavaScript中嵌入HTML，可以使用几种方法来动态创建和修改HTML元素：

使用innerHTML：通过innerHTML属性将HTML代码赋值给JavaScript变量或元素的innerHTML属性。例如：

var element = document.getElementById("myElement");
element.innerHTML = "<p>This is a dynamically created paragraph.</p>";

使用createElement：使用document.createElement方法创建一个新的HTML元素，然后使用其他属性和方法配置和操作它。例如：

var newElement = document.createElement("p");
newElement.textContent = "This is a dynamically created paragraph.";
document.body.appendChild(newElement);

使用模板字符串：在JavaScript代码中使用模板字符串 `` 来创建包含HTML标记的字符串。然后可以将这些字符串插入到页面中的元素中。例如：

var htmlString = `<p>This is a dynamically created paragraph.</p>`;
var element = document.getElementById("myElement");
element.innerHTML = htmlString;

CSS in JavaScript

在JavaScript中使用CSS，可以使用以下方法来操作和应用CSS样式：

使用style属性：通过元素的style属性直接设置CSS样式。可以通过JavaScript代码来修改和应用CSS属性。例如：

var element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "16px";

使用classList属性：通过classList属性可以添加、删除和切换CSS类。CSS类在样式表中定义，可以为元素添加或移除特定的样式规则。例如：

var element = document.getElementById("myElement");
element.classList.add("blue-text");
element.classList.remove("red-text");
element.classList.toggle("highlight");

创建和应用动态样式：可以使用document.createElement方法创建style元素，并将CSS规则添加到其中。然后将style元素插入到文档中，从而动态地创建和应用样式。例如：

var style = document.createElement("style");
style.textContent = ".blue-text { color: blue; }";
document.head.appendChild(style);

使用外部样式表：可以通过创建link元素并将其插入到HTML文档的head中来引用外部CSS样式表。例如：

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "styles.css";
document.head.appendChild(link);

HTML5

HTML基本语法

HTML（超文本标记语言）是用于创建网页结构和内容的标记语言。HTML的基本语法具体如下：

标签（Tags）：HTML使用尖括号 < > 包围标签名称，标签用于定义不同的HTML元素，例如 <p> 表示段落，<h1> 表示一级标题等等。
元素（Elements）：HTML元素是标签及其内容的组合。一个元素通常包括一个开始标签和结束标签，如 <p>这是一个段落。</p>。某些元素也可以是自闭合的，这意味着只有一个标签，如 <br>。
属性（Attributes）：HTML元素可以拥有属性，属性提供了附加的信息和配置项。属性位于元素的开始标签，由属性名和属性值组成，如 <a href="``https://www.example.com``">链接</a>。属性值使用引号（单引号或双引号）引起来。
标签嵌套（Nested Tags）：HTML允许标签嵌套，也就是一个元素可以包含另一个元素。例如：<div><p>这是一个嵌套的段落。</p></div>。
注释（Comment）：HTML可以使用注释来添加对代码的说明，注释不会被浏览器解释和显示。注释通过  的形式添加到HTML源代码中。
HTML文档结构：HTML文档由<html> 标签包裹，文档分为 <head> 和 <body> 两个部分。在 <head> 中，可以设置文档的元信息、引入CSS和JavaScript等。<body> 中包含了网页的可见内容。

HTML标签分类

HTML标签可以根据其功能和作用进行分类。

文本标签：

<p>：表示段落。
<h1> - <h6>：表示标题，依据重要性递减。
<span>：表示内联文本的容器。
<strong> 或 <b>：表示加粗文本。
<em> 或 <i>：表示强调文本。
<u>：表示下划线文本。

链接和导航标签：

<a>：表示超链接。
<nav>：表示导航部分。
<ul> 和 <li>：表示无序列表。
<ol> 和 <li>：表示有序列表。
<dl>、<dt>、<dd>：表示定义列表。

多媒体标签：

<img>：表示图像。
<video>：表示视频。
<audio>：表示音频。
<iframe>：表示内联框架。

表单标签：

<form>：表示表单。
<input>：表示输入字段。
<button>：表示按钮。
<select> 和 <option>：表示下拉选择框。
<textarea>：表示多行文本输入框。
<label>：表示表单标签。

结构标签：

<header>：表示页面或节的页眉。
<footer>：表示页面或节的页脚。
<section>：表示文档中的节。
<article>：表示独立的内容段落。
<aside>：表示页面的旁注或侧边栏。
<div>：表示文档的块级容器。

HTML head标签

HTML中的<head>标签用于定义文档的头部部分，它位于<html>标签内部，紧跟在<body>标签之前。<head>标签提供了关于文档的元信息和其他配置项。

在<head>标签内使用的元素：

<title>：定义文档的标题，显示在浏览器的标题栏或标签页上。

<head>
  <title>网页标题</title>
</head>

<meta>：用于设置文档的元信息，如字符编码、关键字、描述等。

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML, 标签, 元信息">
  <meta name="description" content="这是一个关于HTML标签的示例文档">
</head>

<link>：用于引入外部资源，如样式表（CSS）和图标。

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
</head>

<script>：用于引入JavaScript代码或外部脚本文件。

<head>
  <script src="script.js"></script>
</head>

<style>：用于在文档内部定义和应用CSS样式。

<head>
  <style>
    body {
      background-color: #f1f1f1;
      font-family: Arial, sans-serif;
    }
  </style>
</head>

除了上述元素外，<head>标签还可以包含其他如<base>、<noscript>、<script type="module">等元素。

HTML body功能性标签

HTML中的<body>标签是用来定义文档的主体部分，其中包含了网页的可见内容，例如文本、图片、链接、表格等。<body>标签位于<html>标签内部，紧跟在<head>标签之后。

在<body>标签内使用的功能性标签：

<h1> - <h6>：定义标题，依据重要性递减，用于对内容进行结构化。

<body>
  <h1>这是一级标题</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>
  <!-- ... -->
</body>

<p>：定义段落，用于分段显示文本内容。

<body>
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
</body>

<a>：定义超链接，可用于创建文本或图像的链接。

<body>
  <a href="https://www.example.com">这是一个链接</a>
</body>

<img>：插入图像，用于显示图片。

<body>
  <img src="image.jpg" alt="图片描述">
</body>

<ul> 和 <li>：定义无序列表，用于显示项目的列表。

<body>
  <ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>
</body>

<table>、<tr>、<th>、<td>：创建表格结构，用于展示表格数据。

<body>
  <table>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </table>
</body>

HTML其他

HTML ARIA

ARIA代表可访问的丰富互联网应用程序（Accessible Rich Internet Applications）。它是一组可以添加到HTML元素的属性，以提高网络内容对于残障人士的可访问性。ARIA为辅助技术（如屏幕阅读器）提供附加信息，帮助其理解和导航网页内容。

HTML5语义化标签

HTML5引入了一些语义化标签，这些标签旨在更准确地描述网页的结构和内容，提高可访问性并改善搜索引擎的理解。

HTML5语义化标签：

<header>：定义文档或区块的头部。通常包含网页的标题、导航菜单等内容。

<header>
  <h1>网页标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

<nav>：定义导航区域，用于包含网页的导航链接。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

<section>：定义文档的区块，通常包含一个相关的主题或内容。

<section>
  <h2>产品介绍</h2>
  <p>这里是产品的详细描述。</p>
</section>

<article>：定义一个独立的文章或内容块，可包含在其他文档或页面中独立存在。

<article>
  <h2>新闻标题</h2>
  <p>这是一篇新闻的内容。</p>
</article>

<aside>：定义页面的侧边栏或附属信息区域。

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#">相关文章1</a></li>
    <li><a href="#">相关文章2</a></li>
    <li><a href="#">相关文章3</a></li>
  </ul>
</aside>

<footer>：定义文档或区块的底部区域，通常包含版权信息、联系方式等内容。

<footer>
  <p>&copy; 2023 公司名称</p>
  <p>联系方式：info@example.com</p>
</footer>

这些标签提供了更具有语义化的结构，使得代码更易于理解和维护，并且对于辅助技术和搜索引擎也更友好。

HTML5表单增强

HTML5引入了一些表单增强功能，使得表单处理更加方便和灵活。

HTML5表单增强功能：

输入类型（Input Types）：HTML5新增了多种输入类型，使得可以更直接地定义输入字段的数据类型。例如，email类型用于输入电子邮件地址，number类型用于输入数值，date类型用于输入日期，等等。

<input type="email" name="email" placeholder="请输入您的邮箱地址">
<input type="number" name="age" placeholder="请输入您的年龄">
<input type="date" name="birthdate" placeholder="请选择您的出生日期">

验证（Form Validation）：HTML5内置了表单验证功能，可以使用一些预定义的验证规则来验证用户输入的数据。例如，required属性可以指定字段为必填项，pattern属性可以指定输入的数据格式。

<input type="text" name="username" required>
<input type="password" name="password" required>
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

隐藏字段（Hidden Fields）：使用hidden类型的输入字段，可以在表单中添加隐藏的数据，这些数据对用户不可见，但可以在后台进行处理。

<input type="hidden" name="token" value="123abc">

自动完成（Autocomplete）：通过使用autocomplete属性，可以为输入字段启用浏览器的自动完成功能，提供用户之前输入过的选项。这可以减少用户的输入工作，提高用户体验。

<input type="text" name="city" autocomplete="on">

文件上传（File Upload）：使用input标签的type="file"，可以允许用户选择文件进行上传。

<input type="file" name="avatar">

HTML5存储

HTML5引入了一些存储机制，使得在客户端存储数据变得更加简单和高效。

Web Storage：Web Storage包括了两种机制：localStorage和sessionStorage。这两种机制都是基于键值对的形式，可以在浏览器端保存数据。它们在不同的场景下使用：

// 使用localStorage存储数据
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');

// 使用sessionStorage存储数据
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');

IndexedDB：IndexedDB是一种高级的客户端数据库，可以在浏览器中存储结构化数据。它使用对象存储（object stores）来存储和检索数据，支持索引和事务操作。IndexedDB适用于存储大量数据，提供灵活的查询和高性能的访问。

// 打开IndexedDB数据库
var request = window.indexedDB.open('myDatabase', 1);
request.onsuccess = function(event) {
  var db = event.target.result;
  // 存储数据
  var transaction = db.transaction(['myStore'], 'readwrite');
  var store = transaction.objectStore('myStore');
  store.add({ id: 1, name: 'John' });
  // 检索数据
  var getRequest = store.get(1);
  getRequest.onsuccess = function(event) {
    var data = event.target.result;
    console.log(data);
  };
};

HTML5 PWA & AMP

HTML5中的PWA（Progressive Web Apps）和AMP（Accelerated Mobile Pages）是两个与移动应用和网页性能优化相关的概念。

PWA是一种使用现代Web技术构建的应用程序，旨在给用户提供类似原生应用的体验。

AMP是一种优化移动网页性能的框架，旨在提供快速加载和流畅浏览的移动页面体验。

HTML5 API

HTML5引入了许多新的API，为开发者提供了更多功能和能力，让网页应用程序可以进行更丰富的交互和功能实现。

DOM（Document Object Model）API：DOM API允许开发者通过JavaScript访问和操作HTML文档中的元素、样式、内容和结构。
Canvas API：Canvas API允许通过JavaScript绘制图形、图像和动画，创建丰富的视觉效果。
Web Storage API：Web Storage API提供了localStorage和sessionStorage两个对象，用于在浏览器中存储和读取持久化数据，以实现本地数据的保存。
Geolocation API：Geolocation API允许开发者获取用户的位置信息，用于实现基于地理位置的应用程序和服务。
Web Notifications API：Web Notifications API允许网页应用程序发送通知消息到用户的操作系统，以实现类似原生应用的通知功能。

HTML5 Web Worker

HTML5 Web Worker是一项API，允许在Web应用程序中使用多线程技术，从而在主线程之外运行脚本，实现并行处理和更好的性能。

HTML5 Web Socket

HTML5 Web Socket是一种在Web应用程序和服务器之间进行实时双向通信的技术。它允许建立一条持久的连接，使得服务器能够主动向客户端推送消息，并且客户端也可以向服务器发送消息，实现实时的数据传输和通信。

HTML5 Shadow DOM

HTML5 Shadow DOM（影子DOM）是一种在HTML元素内部创建隔离的DOM树的技术。它允许开发者在一个HTML元素内部创建一个私有的DOM子树，将其与外部的DOM树隔离开来。这种隔离性允许开发者编写组件化的Web应用程序，保护组件的样式和功能不受外部样式和脚本的影响。

HTML5 Web Component

HTML5 Web Component是一组用于构建Web应用程序的标准和技术。它由三个主要技术组成：自定义元素（Custom Elements）、影子DOM（Shadow DOM）和HTML模板（HTML Templates）。

HTML5 SVG & Canvas

HTML5提供了两种在Web上绘制图形的技术：SVG（可缩放矢量图形）和Canvas（画布）。

SVG（Scalable Vector Graphics）：SVG使用XML语法来描述和渲染二维矢量图形。它是基于矢量描述的，因此可以无限缩放而不会失真。SVG图形可由直线、曲线、形状、文本、图像等基本元素组成，通过CSS和JavaScript进行样式化和交互。SVG图像在DOM中以标签的形式表示，可以通过CSS或JavaScript进行操作和控制。它适合用于绘制复杂的图形、图表、动画和可交互的用户界面。
Canvas：Canvas提供了一个使用JavaScript和绘图API绘制图形的区域。Canvas是一个像素级别的绘图表面，可以通过JavaScript绘制像素级别的图形、图像和动画。开发者可以在Canvas上使用绘图API（通常是2D或WebGL）来绘制各种形状、路径、图像和文本等。Canvas没有DOM元素的层次结构，并且图像是逐像素渲染的，因此在处理像素级绘制和图像处理方面更为高效。Canvas适用于游戏、图像处理、数据可视化等需要更底层控制的场景。

总结起来，SVG适合使用矢量图形绘制和交互，而Canvas适用于用像素级别绘制和处理图像。

WebGL & WebGPU

WebGL和WebGPU是用于在Web上进行高性能图形渲染的技术。

WebGL：WebGL是一种基于OpenGL ES标准的Web图形库，它允许使用JavaScript和OpenGL ES API在Web浏览器上进行硬件加速的3D和2D图形渲染。WebGL提供了一种通过渲染管道处理图形数据的机制，开发者可以使用JavaScript编写顶点和片段着色器，以实现复杂的图形效果和交互。通过WebGL，开发者可以在Web应用程序中创建交互式的3D场景、游戏和数据可视化，利用硬件加速提供高性能的图形渲染。
WebGPU：WebGPU是一种新的Web图形渲染API，旨在提供更底层的、与硬件更接近的图形编程接口。它是在WebGL和图形API设计中的经验基础上进行发展的。WebGPU提供了更多的底层控制，允许开发者直接操作GPU并发出绘制命令。WebGPU的目标是提供更高的性能和更低的延迟，适用于实时渲染、虚拟现实、增强现实等需要更高性能的图形应用。

WebGL和WebGPU的使用场景和目标不完全相同。WebGL广泛用于Web上的3D和2D图形渲染。WebGPU是一个较新的API，还在发展中，为了更底层的图形编程而设计。

HTML5 WebAssembly

HTML5 WebAssembly（简称为Wasm）是一种用于在现代Web浏览器中运行高性能、低级别的编译代码的技术。它是由W3C和各大浏览器厂商共同推动和支持的一项开放标准。

WebAssembly的目标是提供一种可移植、安全和高效的解决方案，使开发者能够在Web平台上编写性能优化的应用程序。它可以使用多种编程语言（如C、C++、Rust等）编写，并通过将源代码编译为一种称为Wasm二进制格式的低级别字节码来实现。

前端语言（详讲HTML）| 青训营