前端与HTML | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第1天本次课程主要有以下三个重点一、什么是

这是我参与「第四届青训营」笔记创作活动的的第1天

本次课程主要有以下三个重点

一、什么是前端？

1、前端的定义

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

2、前端技术栈

如上图所示，前端技术栈大体上分为4个部分，即HTML、CSS、JavaScript、网络协议，其中HTML起到的是构建前端基本内容的作用；CSS则是控制HTML的各种样式，从而达到修饰和美化页面内容的作用；JavaScript控制着前端的各种行为，让前端界面能与使用者进行各种交互。以上三种运行于浏览器，，也就是客户端，而客户端与服务器端的信息交流需要依靠网络协议来进行。

3、前端应该关注哪些方面？

功能
美观
无障碍
安全
性能
兼容
体验

4、前端的边界以及开发环境

前端的边界

作为一个小白，很多这些概念都还是第一次接触，于是一个个的搜索，了解了一下这些名词的基本概念。

1、 Node.js:

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。来源：Node.js 简介 (nodejs.cn)

2、Electron:

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。来源：| Electron (electronjs.org)](www.electronjs.org/zh/docs/lat…)

3、React Native:

React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率，又同时拥有 Native 应用的良好体验，加上 Virtual DOM 跨平台的优势，实现了真正意义上的：Learn Once,Write Anywhere. 来源：稀土掘金 juejin.cn/post/691645…

4、WebRTC：

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 WebRTC API - Web API 接口参考 | MDN (mozilla.org)

5、WebGL：

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 <canvas>元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。WebGL - Web API 接口参考 | MDN (mozilla.org)