常用前端技术有哪些？

1、HTML（超文本标记语言）

HTML（或超文本标记语言）是一种计算机语言，旨在创建以后任何访问 Internet 的人都可以浏览的网站。HTML 通常用于构建 Web 文档。它定义了标题或段落等元素，并支持嵌入图像、视频和其他媒体。

HTML 是如何工作的？

HTML 由一系列称为tags的短代码组成，由站点创建者规范化为文本文件。然后将文本存储为 HTML 文件并通过浏览器进行观察。浏览器扫描文件并将文本解释为可见的形式，并且在最好的情况下，按照设计者的计划呈现页面。

• 超文本是我们通过单击超链接在网络上旅行的方式——特定文本将您带到其他页面。超意味着它是非线性的，它允许移动到任何其他地方，因为没有预定义的顺序。
• 标记决定了 HTML 标记应用于其中的文本的质量。标签将其标记为特定类型的文本。
• 作为一种语言，它像任何其他语言一样拥有代码字和语法。

2、CSS（层叠样式表）

CSS（或层叠样式表）是一种样式表语言。它用于定义 HTML 元素在设计、布局和不同屏幕尺寸的不同设备的变化方面应该如何呈现在网页上。CSS 一次掌握许多不同网页的布局。

CSS怎样运作？

CSS 与 HTML 元素（网页的组件）交互。

• 为了与 HTML 通信，CSS 使用选择器。选择器是 CSS 代码的一部分，用于定义 CSS 样式将影响哪个 HTML 片段。
• 声明包含选择器使用的属性和值。
• 属性定义字体大小、颜色和边距。值是这些属性的设置。

CSS 是通过计算机上的文本编辑器或文字处理器以纯文本形式编写的。如果您要检查**CSS 代码是如何实现到 HTML **内容的，有以下三种方法：

• 外部样式表存储为 .css 文件，可用于通过单个文件定义整个网站的外观，而不是将额外的 CSS 代码实例添加到必须修改的每个 HTML 元素中。要使用外部样式表，.html 文件需要包含一个连接到外部样式表的标题部分。
• 内部样式表是直接放入特定 .html 页面标题的 CSS 说明。
• 内联样式是记录在 HTML 代码中的 CSS 片段。

CSS框架

CSS 框架是一组默认的 CSS 和 HTML 文件。它扩展了前端开发人员的网站设计能力。除了在构建响应式设计时提供帮助之外，CSS 框架还呈现出独特的对称布局，使开发人员无需在任何情况下从零开始编写代码。它们通常被认为是适合不同平台和屏幕尺寸的不错选择。借助通用的用户界面组件、网格系统、布局和许多其他功能，CSS 框架大大加快了开发工作流程。CSS Universe 中存在许多框架：

• 功能齐全（Bootstrap、Foundation、语义 UI 等），
• 针对 Material Design：（Materialize 和 Material Design Lite）
• 轻量级。

预处理器——Sass和LESS

起草 CSS 是例行公事，而诸如查找颜色值、关闭标签或任何其他重复性操作之类的短任务需要大量时间。这就是预处理器派上用场的地方。CSS 预处理器是一种脚本语言，可扩展 CSS 并将其组装成通用 CSS。

Sass 和 LESS 是最常见的预处理器。它们共享一些共同的基础知识，例如：

• 语法元素和
• 向后兼容普通 CSS 文件。

但是，它们之间也有很多不同之处。

• Sass 的意思是语法上很棒的样式表。Sass 在 Ruby 上运行并在服务器端呈现。由于其 Ruby 语言起源，安装是通过所谓的 gems（多个 Ruby/Rails 库）提供的。
• LESS 代表更精简的样式表。它是一个 JavaScript 库，在浏览器的客户端呈现。开发人员在使用带有样式表的 JavaScript 时会更频繁地选择 LESS。它类似于编写常规 CSS。该技术允许在 LESS 文件中重用 CSS 片段。

3、DOM（文档对象模型）

文档对象模型 (DOM) 被定义为 HTML 和 XML 文档的编程接口。它解释页面，以便程序可以修改文档结构、样式和内容。DOM 将文档呈现为节点和对象，使编程语言能够连接到页面。

DOM如何运作？

将网页视为可以在浏览器窗口中呈现或作为 HTML 源代码呈现的文档。文档对象模型 (DOM) 表示此文档，因此可以对其进行修改。DOM 是网页的面向对象的表示，可以使用 JavaScript 等脚本语言进行更改。

DOM 必须遵守在大多数当前浏览器中执行的W3C和WHATWG标准。现代 DOM 是使用多个协同工作的API构建的。核心DOM指定了完全解释文档的对象和其中的对象。

4、JavaScript

JavaScript (JS) 是最流行的脚本语言之一。它以为前端和后端开发提供全套技术而闻名。正如我们所讨论的第一个，它用于使网页动态化。

JavaScript 是如何工作的?

JS 提高了网站的整体交互性。它支持对动画 UI 组件进行建模，例如图像滑块、弹出窗口、广泛的站点导航菜单等。JavaScript 为网站提供了单独使用 HTML 和 CSS 无法实现的扩展功能。JavaScript 允许网页回复用户的操作并动态刷新自己。多亏了 JavaScript，这个过程不需要重新加载页面来改变它的表示。

JavaScript 框架和库

刚进入这个专业领域的人可能会认为框架和库做同样的事情，允许不同的视觉元素相互交互。老实说：这与事实相差不远。然而，有一些显着的特点。所以，让我们定义什么是 JS 框架，什么是 JS 库，以及它们的用途。

框架是用于创建网站或 Web 应用程序的模板。它们提供了一个结构（例如骨架或脚手架）来安排整个项目。在框架设置页面模板的同时，它们构建具有特定分配区域的结构以嵌入框架代码。

因此，JavaScript 框架是形成和安排网站或 Web 应用程序的完整工具集。

库是一组预先编写的代码片段，用于实现 JavaScript 的核心功能并被重用。必要时，该片段可以轻松集成到现有项目代码中。

因此，库是针对特定编码需求的专用工具，而不是用于修饰整个现有项目的通用机器。

有哪些JS框架和库

框架：

Angular是由 Google 提供支持的前端框架，与大多数常见的代码编辑器兼容。Angular 旨在创建动态的单页 Web 应用程序 (SPA) 和渐进式 Web 应用程序。在最初发布时，该框架因其将基于 HTML 的文档转换为动态内容的能力而备受赞誉。Angular 是最流行的前端框架之一。

Vue.js是另一个用于 SPA 的开源框架。它采用基于组件的开发模型，并允许将组件附加到项目中。Vue.js 是一个更像是一个框架的库的例子。要使用 Vue.js，HTML 和 CSS 知识是绝对必要的。它建议在开发中应用一大堆模板和模式。Vue 主要以文档的小尺寸和基于 HTML 的语法而闻名。

Ember.js是一个适用于 SPA、移动和桌面应用程序的框架。它使用模型-视图-视图-模型(MVVM) 模式。Ember 工具支持设计开发环境，而其命令行界面提供脚本自动化工具。

库：

React是一个用于构建动态用户界面的开源库，由 Facebook 诞生和培育。该框架用于创建具有多个动态组件的 Web 应用程序。它依赖于 JavaScript 和JSX，一种 Facebook PHP 语言扩展。React 支持为前端构建可重用的 HTML 元素。React 还包括 React Native，一个专用的跨平台移动开发框架。

jQuery旨在控制 HTML 文档。它有一个简单的 API 来控制浏览器中的事件和设计动画。除此之外，jQuery 还用于操作文档对象模型 (DOM) 并用作插件开发工具。它还带有一个更轻量级的跨浏览器库、用于移动框架jQuery Mobile和图形界面构建的jQuery UI 。

D3.js是一个数据驱动的数据可视化库。通过将临时数据绑定到 DOM 并对文档实施数据驱动的更改，该库可以管理数据并进行动态数据可视化。它可以支持和处理大型数据集以及交互和动画的动态响应。D3 的函数式风格允许代码重用并使用 CSV 和 HTML 运行。

5、异步操作（AJAX)

AJAX代表异步 JavaScript 和 XML。基本上，创建网站和 Web 应用程序是一种复杂的技术。让我们看看构成 AJAX 的关键组件。

异步——整个工具包的基本方面。该方法的关键作用是更新网络内容……异步。这意味着当页面上的一小部分内容需要一些更改时，用户的网络浏览器不必重新加载整个网页，例如，您不必重新加载整个电子商务产品页面来应用额外的过滤器搜索结果。您只需要更新这些结果。

JavaScript – JavaScript 采用网站自动化流程，因此 Web 开发人员不必单独编辑页面上出现的每个流程案例。它特别用于创建、添加和管理动态网站内容。在处理完所有 HTML 和 CSS 进程后，JavaScript 会在访问者查看交互式内容页面时运行实时更新。

XML（或可扩展标记语言）允许将页面上的数据传输到查看它的浏览器。这对于通常无法与由不同系统格式化的数据进行交互的特定计算机系统很重要。在这种情况下，XML 允许在 XML 标记之间以纯文本格式保存数据时避免不兼容。通过这种方式，XML 提出了一种不依赖于单一软件或硬件系统的存储、移动和共享数据的方法。由于 XML 越来越老，为更新的数据格式开辟了道路，您可以使用 JSON 运行 AJAX，它更短且更易于人类阅读。

今天，AJAX 在前端社区中的讨论并不那么普遍，因为异步网页渲染在我们上面讨论的所有主要前端框架中都是开箱即用的。