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

一、前端语言的基本能力

HTML、CSS和JavaScript是Web开发中非常重要的三个技术，它们分别用于网页结构、样式和交互功能的实现。

HTML（超文本标记语言）是一种用于创建网页内容结构的标记语言，它定义了网页中各种元素（如文字、图像、链接等）的排列方式和显示效果。

CSS（层叠样式表）则是一种用于网页样式控制的语言，它可以通过为HTML元素添加样式规则来改变网页的外观和布局。

JavaScript（简称JS）是一种用于实现交互功能的编程语言，它可以在网页中添加动态特效、表单验证、页面切换等丰富的交互体验。

随着Web应用程序的不断发展，HTML、CSS和JavaScript也在不断地演进和更新。比如，HTML5引入了许多新的标准和功能，包括视频、音频、地理位置API等；CSS3则增加了更多的样式效果和选择器，如动画、渐变、媒体查询等；而JavaScript ES6则提供了更多的语法糖和新特性，如箭头函数、模块化、Promise等。

实现网页结构、样式和交互功能需要掌握以下技术：

1. HTML：HTML是网页的骨架，用于定义网页的内容结构。通过使用HTML标签，可以创建文本、图像、链接、表格等页面元素。

2. CSS：CSS用于定义网页的外观和样式。它可以控制字体、颜色、布局、背景等方面的视觉效果。

3. JavaScript：JavaScript是一种脚本语言，用于实现网页的交互功能。通过JavaScript，可以实现用户交互、动态效果、表单验证等功能。

4. 响应式设计：响应式设计是一种让网站能够适应不同分辨率的设备的方法。通过使用响应式设计，可以确保在移动设备上浏览网页时也能获得良好的用户体验。

5. 浏览器兼容性：不同浏览器之间存在差异，因此必须确保网页在所有主流浏览器（如Chrome、Firefox、Safari等）上都能正常运行。

二、前端语言的协作配合

css in html

HTML和CSS是两种不同的语言，用于描述网页的结构和样式。 HTML（超文本标记语言）主要用于创建网页的内容，并将其分为段落、标题、图像、表单等元素。 CSS（层叠样式表）则用于定义这些元素的样式，例如字体、颜色、大小、位置等。

在网页加载时，浏览器首先解析HTML代码并创建DOM（文档对象模型）。DOM是一种层次结构，表示网页中所有元素及其属性。然后，浏览器读取CSS代码，并创建CSSOM（CSS对象模型）。CSSOM类似于DOM，但它表示网页中所有元素的样式信息。

一旦DOM和CSSOM都被创建，浏览器就会将它们合并起来，生成渲染树（Render Tree）。渲染树是一个包含所有网页元素并已应用其样式的树形结构。最后，浏览器使用渲染树来计算每个元素的确切位置和尺寸，并将网页呈现给用户。

因此，通过使用HTML和CSS，我们可以将网页的结构和样式分离开来，使网页更易于维护和修改。

三、你不知道的HTML

HTML的标签

1. <header>：用于定义文档或节的头部。通常用于显示页面标题、Logo等。

2. <nav>：用于定义导航链接的区域。

3. <section>：用于定义文档的主要内容区域，通常配合<article>标签使用。

4. <article>：用于定义独立的文章、博客帖子或新闻故事。通常包含标题、作者、发布日期和正文内容。

5. <aside>：用于定义与页面主要内容相关但不是核心部分的内容，例如边栏、广告或相关链接。

6. <footer>：用于定义文档或节的底部，通常包含版权信息、联系方式等。

HTML5 存储

HTML5提供了两种存储数据的方法：localStorage和sessionStorage。

localStorage和sessionStorage都是HTML5提供的本地存储方式，能够在浏览器端存储数据。其中localStorage是永久性存储，即使关闭浏览器或电脑，数据也会一直存在；而sessionStorage只是临时性存储，当关闭浏览器或者回话结束之后，数据就会失效。

使用localStorage或sessionStorage存储数据的步骤如下：

1. 使用setItem()方法存储数据，setItem()方法接受两个参数，第一个参数是键(key)，第二个参数是值(value)。

2. 使用getItem()方法获取数据，getItem()方法接受一个参数，即要获取数据的键(key)，返回该键对应的值(value)。

3. 使用removeItem()方法删除数据，removeItem()方法接受一个参数，即要删除数据的键(key)。

HTML5 API

HTML5 API（应用编程接口）是一组基于HTML5标准的应用程序接口。它们允许网站或Web应用程序与用户设备进行交互，包括读取和修改本地储存、运行多媒体、获取用户位置和使用其他硬件功能，比如摄像头和麦克风。以下是HTML5 API的一些常见示例：

1. Local Storage API: 允许Web应用程序在用户浏览器中储存数据，以便稍后使用。

2. Geolocation API: 允许Web应用程序获取用户的地理位置信息，从而提供定位服务等功能。

3. Canvas API: 允许Web应用程序动态创建和操作图形，适用于游戏和其他需要处理大量图形的应用。

4. Web Audio API: 允许Web应用程序处理和控制音频流，以实现高质量的音频播放功能。

5. WebSocket API: 允许在Web应用程序和服务器之间进行全双工通信，从而实现实时聊天和游戏等功能。

6. IndexedDB API: 允许Web应用程序在用户浏览器中储存结构化数据，并支持强大的查询和索引功能。

Web0GL和WebGPU的区别？

WebGL和WebGPU都是用于在Web浏览器中实现高性能图形渲染的API，但它们有一些区别。

WebGL是Web上的3D绘图技术，它基于OpenGL ES 2.0标准，提供了一个可以在Web浏览器中运行的GPU加速框架，可以使用JavaScript进行编程。使用WebGL可以创建复杂的三维场景、模型和动画等。

WebGPU是将原生GPU功能暴露给Web应用程序的新型API，目前处于开发阶段。它被设计为可以与现代GPU硬件直接交互，并提供更高效的多线程执行方式，以利用最新的GPU硬件特性。WebGPU可以通过JavaScript或Rust进行编程。

总的来说，WebGL主要用于在Web上渲染3D图形，而WebGPU则是为了让Web应用程序能够更高效地利用现代GPU硬件。

四、拓展分享

MVC、MVP和MVVM是三种流行的设计模式。其中，MVC表示模型-视图-控制器，MVP表示模型-视图-演示者，MVVM表示模型-视图-视图模型；MVP, MVVM都是由MVC衍生出。所有这些设计模式大体上都有助于开发松散组合、易于测试和维护的应用程序。

具体原理，还在学习中，后期更新。

五、总结

本次课程，收获满满，我接下来以此为学习的流程，更加深入系统学习，增进我对前端内容的知识点的联系，如本次课程所提到的MVC.MVVM.MVP暂时没有接触过，我会找一些案例来增进我对这方面的了解和练习