一、前端言语的根本才能

HTML
  • HTML（超文本符号言语）用于界说网页的结构和内容。它由一系列的标签组成，用于符号文本、图片、链接等内容，以及界说它们之间的联络和层次结构。
css
  • CSS（层叠款式表）用于界说网页的外观和布局。它答应您为 HTML 元素设置色彩、字体、边框、背景等款式，以及操控它们的方位和摆放办法。
  • css挑选器：

下面是一些常用的 CSS 挑选器：

  • 元素挑选器：经过标签名来挑选元素。例如，p 挑选器会挑选一切的 <p> 元素。
css
仿制代码
p {
  color: red;
}
  • 类挑选器：经过类名来挑选元素。类挑选器以一个点号 . 最初，后边跟着类名。例如，.highlight 挑选器会挑选一切具有 highlight 类的元素。
css
仿制代码
.highlight {
  background-color: yellow;
}
  • ID 挑选器：经过 ID 来挑选元素。ID 挑选器以一个井号 # 最初，后边跟着 ID 名。例如，#title 挑选器会挑选具有 title ID 的元素。
css
仿制代码
#title {
  font-size: 24px;
}
  • 特色挑选器：经过特色来挑选元素。特色挑选器运用方括号 [] 来围住特色名和特色值。例如，[href] 挑选器会挑选一切具有 href 特色的元素。
css
仿制代码
[href] {
  color: blue;
}
  • 后代挑选器：经过元素之间的嵌套联络来挑选元素。后代挑选器运用空格来分隔两个挑选器，表明前一个挑选器所选元素的后代中，契合后一个挑选器条件的元素。例如，ul li 挑选器会挑选一切 <ul> 元素中的 <li> 元素。
css
仿制代码
ul li {
  list-style-type: square;
}
  • css语法：
javascript
  • JavaScript是一种脚本言语，用于为网页添加交互功用。它能够让您在网页中呼应用户操作，动态更新内容，以及与服务器进行通信。

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

特色
  • 学习C言语的根本语法
  • 学习java的数据类型和内存办理
  • 学习SCHEME言语，将函数提升到一等公民身份
  • 学习SELF言语，运用依据原型（ProtoType）的继承机制
js数据类型
js根底
  1. let var const
  2. Object界说
  3. function 界说

这些太根底了，我就不写了～～不会的自己百度吧～～

Broswer

在阅读器中运转过程：阅读包括两种引擎：烘托引擎和JS引擎，烘托引擎担任加载页面，依据HTML生成DOM树，接着加载CSSOM树，二者合成render树，布局render树（Layout/reflow），制作render树（paint），制作页面像素信息, 阅读器会将各层的信息发送给GPU，GPU会将各层合成（composite），显现在屏幕上。

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

V8作业流程

V8 是 Google 开发的一种高功用 JavaScript 引擎，它被用于 Chrome 阅读器和 Node.js 等环境中。V8 的作业流程大致如下：

  1. 解析：V8 首先将 JavaScript 代码解析成笼统语法树（AST）。
  2. 编译：接下来，V8经过 Ignition 将 AST 编译成字节码。字节码能够在虚拟机中运转。
  3. 履行：V8 履行字节码，并依据需求进行优化。TurboFan 是 V8 引擎中用于优化代码履行的编译器之一。它担任将 JavaScript 字节码编译成高效的机器码，以进步代码的履行功率。
  4. 废物收回：V8 运用废物收回机制来主动办理内存。它会定期检查内存中的目标，收回那些不再被引用的目标所占用的内存。

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

额外补充

当 V8 履行 JavaScript 字节码时，它会搜集有关代码运转状况的信息，例如哪些函数被调用得最频繁，哪些循环被履行得最多等。然后，V8 会运用这些信息来确认哪些代码是热点代码，即那些需求优化的代码。

接下来，V8 会运用 TurboFan 编译器来优化这些热点代码。TurboFan 会将字节码编译成高效的机器码，并应用各种优化技能，例如内联函数调用、消除冗余核算等，以进步代码的履行功率。

二、前端言语的协作配合

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

css in html

在 HTML 中运用 CSS 有三种办法：内联款式、内部款式表和外部款式表。

  • 内联款式：内联款式是将 CSS 款式直接添加到 HTML 元素的 style 特色中。例如，下面的代码将一个阶段的文本色彩设置为红色：
html
仿制代码
<phljs-attribute">color: red;">这是一段红色的文本。</p>
  • 内部款式表：内部款式表是将 CSS 款式界说在 HTML 文档的 <style> 标签中。例如，下面的代码界说了一个内部款式表，将一切阶段的文本色彩设置为蓝色：
html
仿制代码
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色的文本。</p>
</body>
  • 外部款式表：外部款式表是将 CSS 款式界说在一个独自的 .css 文件中，然后在 HTML 文档中运用 <link> 标签来引用它。例如，假定您有一个名为 styles.css 的外部款式表文件，其间界说了如下款式：
css
仿制代码
/* styles.css */
p {
  color: green;
}

您能够在 HTML 文档中运用 <link> 标签来引用这个外部款式表，将一切阶段的文本色彩设置为绿色：

html
仿制代码
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段绿色的文本。</p>
</body>
javascript in html

在 HTML 中运用 JavaScript 有两种办法：内部脚本和外部脚本。

  • 内部脚本：内部脚本是将 JavaScript 代码直接写在 HTML 文档的 <script> 标签中。例如，下面的代码界说了一个内部脚本，用于在页面加载时弹出一个对话框：
html
仿制代码
<body>
  <script>
    alert('页面已加载！');
  </script>
</body>
  • 外部脚本：外部脚本是将 JavaScript 代码界说在一个独自的 .js 文件中，然后在 HTML 文档中运用 <script> 标签的 src 特色来引用它。例如，假定您有一个名为 script.js 的外部脚本文件，其间界说了如下代码：
javascript
仿制代码
// script.js
alert('页面已加载！');

您能够在 HTML 文档中运用 <script> 标签来引用这个外部脚本，在页面加载时弹出一个对话框：

html
仿制代码
<body>
  <script src="script.js"></script>
</body>

运用 async和defer特色都是用来操控script标签的加载和履行次序的。defer特色表明推迟履行，即等到页面解析结束后再履行async特色表明异步履行，即不等候页面解析结束，也不阻塞页面解析，可是履行次序不一定依照加载次序。举例来说，假如你有两个script标签，一个运用defer特色，一个运用async特色，那么它们的写法和作用如下：

js
仿制代码
<!-- defer特色 -->
<script src="defer.js" defer></script>
<!-- async特色 -->
<script src="async.js" async></script>

1、defer.js会在页面解析结束后依照加载次序履行。

2、async.js会在加载结束后当即履行，不一定依照加载次序。

事情捕获和事情冒泡
event loop

promise callback:例如promise.reselove微使命

html in javascript

在 JavaScript 代码中运用字符串来表明 HTML 内容，并运用 DOM API 来动态地将这些内容添加到网页中。

例如，下面的代码创立了一个包括一段文本和一个按钮的 HTML 字符串，并运用 innerHTML 特色将其添加到页面中的一个 <div> 元素中：

html
仿制代码
<body>
  <div id="container"></div>
  <script>
    let html = `
      <p>这是一段动态添加的文本。</p>
      <button>点击我</button>
    `;
    let container = document.querySelector('#container');
    container.innerHTML = html;
  </script>
</body>
css in javascript

在 JavaScript 代码中运用 DOM API 来动态地修正 HTML 元素的款式。

例如，下面的代码运用 style 特色来修正一个阶段的文本色彩和字体大小：

html
仿制代码
<body>
  <p id="text">这是一段文本。</p>
  <script>
    let text = document.querySelector('#text');
    text.style.color = 'red';
    text.style.fontSize = '24px';
  </script>
</body>
css module

三、你不知道的HTML5

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

html全部标签分类

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

html头标签

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

html5

HTML5 引进了一些新的语义元素，例如<article>、<section>、<nav>和<header>等，它们使您能够更清晰地描绘网页的结构和内容。

此外，HTML5 还供给了一些新的表单控件，例如日期挑选器、色彩挑选器、查找框等，它们使您能够更方便地搜集用户输入。

HTML5 还支撑音频和视频播放，您能够运用<audio>和<video>元从来在网页中嵌入音频和视频内容，而无需依赖第三方插件。

除此之外，HTML5 还供给了许多其他新功用和特性，例如拖放、离线存储、地理定位等。

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

html5存储

cookie localstorage sessionstorage

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

html5_indexedDB

IndexedDB 和 Web Storage（包括 Local Storage 和 Session Storage）都是阅读器供给的客户端存储技能，它们能够让您在用户的阅读器中存储数据。可是，它们之间也存在一些重要的差异。

  • 存储才能：Web Storage 的存储才能有限，一般只能存储几兆字节的数据。而 IndexedDB 的存储才能更大，能够存储更多的数据。
  • 数据类型：Web Storage 只能存储字符串类型的数据。假如您想要存储其他类型的数据，需求先将其转换为字符串。而 IndexedDB 能够直接存储多种类型的数据，包括字符串、数字、目标、数组等。
  • 查询才能：Web Storage 只供给了简单的键值对查询办法，不支撑杂乱的查询操作。而 IndexedDB 供给了更强大的查询才能，支撑索引、游标、规模查询等高档查询功用。
  • 业务支撑：Web Storage 不支撑业务操作。而 IndexedDB 支撑业务操作，能够确保数据的完整性和一致性。

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

html5 PWA AMP

PWA 是一种移动网站体会，旨在看起来、感觉和作业办法与原生移动应用程序相同。它能够让用户在阅读器中拜访网站，然后挑选将其安装到设备上，就像原生应用程序一样。

而 AMP 则是一个开源项目，旨在经过运用精简的 HTML 和 CSS 言语（限制了 JavaScript 的运用）来构建简直即时加载的网页。这些页面托管在 CDN 上，当用户拜访时，它会供给页面的缓存版别。

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

html5 Audio

HTML5供给了一个<audio>元素，用于在网页上播放音频文件。例如，要在HTML中播放音频文件，能够运用以下代码：

html
仿制代码
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的阅读器不支撑 audio 元素。
</audio>

controls特色会添加音频控件，如播放、暂停和音量。<source>元素答应您指定阅读器能够挑选的备用音频文件。阅读器将运用第一个辨认的格局。<audio>和</audio>标签之间的文本仅在不支撑<audio>元素的阅读器中显现。

html5 Redio

HTML5供给了一个<video>元素，用于在网页上显现视频。例如，要在HTML中显现视频，能够运用以下代码：

html
仿制代码
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的阅读器不支撑 video 标签。
</video>

controls特色会添加视频控件，如播放、暂停和音量。主张始终包括宽度和高度特色。假如未设置高度和宽度，则在视频加载时页面或许会闪耀。<source>元素答应您指定阅读器能够挑选的备用视频文件。阅读器将运用第一个辨认的格局。<video>和</video>标签之间的文本仅在不支撑<video>元素的阅读器中显现。

html5 二进制

在HTML5中，能够运用XMLHttpRequest目标的responseType特色来更改从服务器预期的呼应类型。或许的值为空字符串（默认），"arraybuffer"，"blob"，"document"，"json"和"text"。依据responseType，response特色将包括实体主体，作为ArrayBuffer，Blob，Document，JSON或字符串。假如恳求未完结或未成功，则为null。

例如，以下代码读取图画作为二进制文件，并从原始字节创立8位无符号整数数组。请注意，这不会解码图画并读取像素。需求一个png解码库来实现这一点：

javascript
仿制代码
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "arraybuffer";
req.onload = (event) => {
  const arrayBuffer = req.response;
  if (arrayBuffer) {
    const byteArray = new Uint8Array(arrayBuffer);
    byteArray.forEach((element, index) => {
      // ...
    });
  }
};
req.send(null);
html5 API

HTML5供给了许多的Web API。这些API和接口（目标类型）能够在开发Web应用程序或网站时运用。Web API一般与JavaScript一同运用，虽然并非总是如此。

例如，HTML5引进了一种名为Web Worker的新技能API，专门用于独立于其他用户界面脚本履行后台作业，而不会影响页面功用。当您运转JavaScript操作时，Web Worker不会中止用户和网页，因为它在后台运转使命。

在HTML5中，咱们能够经过为元素添加 draggable="true" 来设置此元素是否能够进行拖拽操作，其间图片、链接默认是敞开拖拽的。

下面是一个简单的比如，它演示了如何在HTML5中实现拖拽操作。

html
仿制代码
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

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

html5 Web worker

Web Worker是一种在后台运转JavaScript的办法，它独立于其他脚本运转，不会影响页面的功用。您能够持续做任何您想做的事情：点击、挑选等，而Web Worker在后台运转。

Web Worker API答应在主线程之外的另一个线程中运转JavaScript程序。这意味着您能够在不影响用户界面的状况下履行使命。创立了一个worker后，它将持续监听消息（即便外部脚本已经完结），直到它被停止。要停止一个worker并释放阅读器/核算机资源，需求运用terminate()办法。

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

html5 Web socket

HTML5 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它使客户端和服务器之间的数据交换变得更加简单，答应服务端主动向客户端推送数据。在 WebSocket API 中，阅读器和服务器只需求完结一次握手，两者之间就直接能够创立持久性的连接，并进行双向数据传输。

传统的网站为了实现推送技能，所用的技能都是 Ajax 轮询。轮询是在特定的时间距离（如每1秒），由阅读器对服务器宣布HTTP恳求，然后由服务器回来最新的数据给客户端的阅读器。这种传统的形式带来很明显的缺陷，即阅读器需求不断地向服务器宣布恳求，但是HTTP恳求或许包括较长的头部，其间真实有效的数据或许仅仅很小的一部分，明显这样会浪费许多的带宽等资源。HTML5 界说的 WebSocket 协议能更好地节约服务器资源和带宽，而且能够更实时地进行通讯。

html5 Web component
  • Web component由三个主要技能组成，能够一同创立具有封装功用的可重用自界说元素，并在 Web 应用程序中运用它们。这三个技能分别是：自界说元素、Shadow DOM 和 HTML 模板。
  • 自界说元素是一组 JavaScript API，答应您界说自界说元素及其行为，然后按需在用户界面中运用。
html5 Shadow dom

Shadow DOM 是 Web 组件规范的一部分，它供给了一种将 CSS 款式限定在特定 DOM 子树中并将该子树与文档的其余部分阻隔开来的办法。Shadow DOM 答应将躲藏的 DOM 树附加到常规 DOM 树中的元素上，这个 Shadow DOM 树以 Shadow Root 开始，下面能够附加任何元素，就像普通 DOM 一样。

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

html5 SVG & Canvas

HTML5 中的 Canvas 和 SVG 都能够用来制作图形，但它们之间有一些重要的差异。

Canvas

  • 经过 js 来制作 2D图形。
  • canvas 图画单位是像素。
  • canvas 图画制作结束之后，阅读器将不再关注它，假如方位产生改换，就需求从头制作。

SVG

  • svg 运用 XML 描绘的2D图画。
  • svg 是依据 xml 的，所以 svg 中制作图形还是运用的元素，js 给元素恣意添加事情。
  • svg 制作的图画是一个目标，假如目标的特色产生改动，阅读器将从头制作图形。

SVG与Canvas比较

  1. svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，可是 canvas 制作的图形会失真。
  2. svg 支撑事情处理器，而 canvas 不支撑事情处理器。
  3. svg 中的文字独立于图画，文字可保存，可修改和可查找，canvas 的文本烘托才能弱。
  4. canvas 合适图画密集型的游戏，频繁地重绘图画，svg 制作的杂乱度高时减慢烘托的速度。
  5. canvas 制作的图形能够多种格局 (jpg、png) 保存图片，可是 svg 制作的只能以 .svg 格局保存，运用时能够引进 html 文件。
  6. canvas 合适开发游戏，svg 不合适游戏应用。

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

html5 WebGL & WebGPU

WebGL 是一种 JavaScript API，用于在任何兼容的 Web 阅读器中烘托高功用的交互式 3D 和 2D 图形，而无需运用插件。WebGL 经过引进一种与 OpenGL ES 2.0 非常接近的 API 来实现这一点，该 API 能够在 HTML 中的canvas元素中运用。这种一致性使得该 API 能够利用用户设备供给的硬件图形加速。

WebGPU 是一种新的 Web 规范，旨在供给现代图形和核算功用。它是为了替代 WebGL 而规划的，而且供给了更好的功用和更多的功用。WebGPU 供给了对现代 GPU 功用的拜访，包括核算着色器、存储纹理和多制作缓冲区输出。它还供给了更好的安全性和可移植性。

html5 WebAssembly

WebAssembly 是一种新式的代码，能够在现代 Web 阅读器中运转。它是一种初级的类汇编言语，具有紧凑的二进制格局，具有接近本地的功用，并为 C/C++、C# 和 Rust 等言语供给了编译目标，使它们能够在 Web 上运转。它还被规划为与 JavaScript 一同运转，答应两者一起作业

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

MVC & MVP & MVVM

MVC：全名是Model View Controller，是模型(model)－视图(view)－操控器(controller)的缩写。

MVC长处： 耦合性低，重用行高，生命周期成本低，布置快，可维护性高，有利软件工程化办理

MVC缺陷： MVC模型的一个缺陷是它添加了系统结构和实现的杂乱性。关于简单的界面，严厉遵从MVC，使模型、视图与操控器别离，会添加结构的杂乱性，并或许产生过多的更新操作，降低运转功率。此外，视图与操控器间的联络过于严密。视图与操控器是彼此别离，但的确联络严密的部件，视图没有操控器的存在，其应用是很有限的，反之亦然，这样就阻碍了他们的独立重用

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

MVP长处：

1、模型与视图完全别离，咱们能够修正视图而不影响模型

2、能够更高效地运用模型，因为一切的交互都产生在一个地方——Presenter内部

3、咱们能够将一个Presenter用于多个视图，而不需求改动Presenter的逻辑。这个特性非常的有用，因为视图的改变总是比模型的改变频繁。

4、假如咱们把逻辑放在Presenter中，那么咱们就能够脱离用户接口来测试这些逻辑（单元测试）

MVP缺陷：

MVP模型的一个明显缺陷是它添加了代码的杂乱度，特别是针对小型Android应用的开发，会使程序冗余。此外，因为对视图的烘托放在了Presenter中，所以视图和Presenter的交互会过于频繁。假如Presenter过多地烘托了视图，往往会使得它与特定的视图的联络过于严密。一旦视图需求改动，那么Presenter也需求改动。

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

MVVM MVVM长处：低耦合，数据是独立于UI的，ViewModel只担任处理和供给数据，UI想怎么处理数据都由UI自己决定，ViewModel不触及任何和UI相关的事，即便控件改动，ViewModel简直不需求更改任何代码，专注自己的数据处理就能够了⁵。此外，MVVM模型还具有双向绑定技能，当Model改变时，View-Model会主动更新，View也会主动改变,能很好的做到数据一致性。

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