前端语言基本能力| 青训营

番茄全家桶a
116 阅读7分钟

青训营 DAY 1

前端语言基本能力

HTML

基本语法

image.png

标签分类

image.png

head标签

image.png

body标签

image.png了解即可，不需要死记硬背。

HTML5语义化

image.png语义化标签

<header>

  • 定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；
  • 一个页面中的个数没有限制，可以为每个内容块添加一个header；

<nav>

  • 定义文章导航栏，链接等;
  • nav一般和u、li配合做导航栏；

<main>

  • 定义文章的主要内容
  • main标签在一份文档中是唯一的，其后代元素常常包括<article>；

<article>

  • 定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

<section>

  • 与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

<aside>

  • 侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

<footer>

  • 页脚，通常包含作者、版权信息或者相关链接等；

HTML 表单增强

详情参考https://juejin.cn/post/700359222084239361
复制代码

HTML 存储

image.png

HTML IndexedDB

HTML PWA/AMP

渐进式 Web 应用（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。
它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。
复制代码

image.png

HTML Audio Video

Audio 音频播放器
Video 视频播放器
复制代码

HTML5 二进制

image.png

HTML5表单增强

HTML5 API

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

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

HTML5 Web Worker

Web Worker (工作线程) 是 HTML5 中提出的概念，分为两种类型，专用线程（Dedicated Web Worker） 和共享线程（Shared Web Worker）。专用线程仅能被创建它的脚本所使用（一个专用线程对应一个主线程），而共享线程能够在不同的脚本中使用（一个共享线程对应多个主线程）。

HTML5 Web Socket

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

HTML5 Shadow DOM

image.pngHTML5 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（画布）。

Canvas

  • 通过 js 来绘制 2D图形。
  • canvas 图像单位是像素。
  • canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。

SVG

  • svg 使用 XML 描述的2D图像。
  • svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
  • svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。

SVG与Canvas比较

  • svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
  • svg 支持事件处理器，而 canvas 不支持事件处理器。
  • svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
  • canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
  • canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
  • canvas 适合开发游戏，svg 不适合游戏应用。

WebGL & WebGPU

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

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

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

HTML5 WebAssembly

WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

简而言之

对于网络平台而言，WebAssembly 具有巨大的意义——它提供了一条途径，以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。在这种情况下，以前无法以此方式运行的客户端软件都将可以运行在 Web 中。

WebAssembly 被设计为可以和 JavaScript 一起协同工作——通过使用 WebAssembly 的 JavaScript API，你可以把 WebAssembly 模块加载到一个 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 WebAssembly 的性能和威力以及 JavaScript 的表达力和灵活性，即使你可能并不知道如何编写 WebAssembly 代码。

而且，更棒的是，这是通过W3C WebAssembly Community Group开发的一项网络标准，并得到了来自各大主要浏览器厂商的积极参与。

avatar
文章
阅读
粉丝