前段语言串讲｜青训营

喝饱
109 阅读8分钟

前端语言的基本能力

关于前端语言的三件套的最基本的定义以及知识

1、HTML

HTML（HyperText Markup Language）超文本标记语言,它是一种用来结构化 Web 网页及其内容的标记语言。网页内容包括一串段落、一个表单、一个重点信息列表、也可以含有图片和数据表。值得注意的是HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。最简单的，只利用HTML可以完成一行文字单独显示。 <p>My dog is very grumpy</p>除此之外，利用HTML可以完成字体的加粗、斜体等。

2、CSS

CSS (Cascading Style Sheets）层叠样式表,是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。另外，CSS也不是一门单独的编程语言，并且它的语法结构简单易学。 利用CSS可以完成对于HTML搭建的网络结构进行一定程度的美化和装饰。

body { background-color:#d0e4fe; } 
h1 { color:orange; text-align:center; } 
p { font-family:"Times New Roman"; font-size:20px; }

3、js（javascript）

JavaScript 是 Web 的编程语言。 是完成人机交互的一门重要支柱，是整个网页的核心，只有能够实现完美的人机交互才能构建出比较完美的网页。此编程语言需要HTML以及CSS的基础。

所有现代的 HTML 页面都可以使用 JavaScript。是一门不复杂的编程语言。

4、三者的相互关系

如果把构建的代码比作人体的话，那么HTML就相当于 人体的骨骼；

css就相当于人体的皮肤；

js就是人体的肌肉；

三者有机组合才构成我们所看见的网页。

image.png

前端语言的协作配合

前面说到，HTML、CSS、js三者有机组合在一起才能构成我们所看见的网页，而且在这其中，js起到的非常重要的的作用，它能在HTML和CSS中间发挥作用，所以前端语言必须相互有机协作配合才能实现完美的前端。

1、前端趋势分析

任何事情都在发展，前端语言也是这样，HTML、CSS、js都在发展的进程中并且前途一片光明。

image.png

2、CSS in HTML

image.png

3、js in HTML

image.png

image.png

4、HTML in js

image.png

5、CSS in js

image.png

image.png

可以看出，这些有机交互的复杂度较高，在后续的学习生活中需要详细了解并做出相应的笔记！

HTML（5）的详细介绍

HTML并非图灵完备，它只是一门标记语言！

它具有以下分类的标签

image.png

根据功能分类可以分为以下方面

image.png 其还具有较为难理解的内容（表单增强等）在后续过程中需要更加努力理解！

把前端语言总结下来就是： 前端开发是构建Web应用程序的重要组成部分，主要负责定义和实现Web应用程序的用户界面和交互。前端开发涉及到多种语言和技术，下面我们来串讲一下常用的前端语言和技术。

  1. HTML

HTML（HyperText Markup Language）是一种用于编写网页的标记语言，它定义了网页的结构和内容。HTML5是HTML的最新版本，支持多媒体、离线存储、拖放等新特性。

  1. CSS

CSS（Cascading Style Sheets）是一种用于定义网页样式的语言，它可以用来控制网页的布局、颜色、字体等样式。CSS3是CSS的最新版本，支持多种新特性，如选择器、3D变换、动画等。

  1. JavaScript

JavaScript是一种脚本语言，它可以用来实现Web应用程序的交互和动态效果。JavaScript是一种跨平台的语言，可以在桌面端、移动端、Web端等多种平台上使用。Node.js

  1. React

React是一种用于构建用户界面的JavaScript库，它可以用来实现高性能、可复用的组件化UI。React还支持服务器端渲染和单向数据流等特性，可以用来构建复杂的Web应用程序。

  1. Vue

Vue是一种轻量级的JavaScript框架，它可以用来实现高性能、可复用的组件化UI。Vue还支持虚拟DOM、响应式数据绑定等特性，可以用来构建快速、流畅的Web应用程序。

  1. Angular

Angular是一种完整的前端框架，它可以用来实现高性能、可复用的组件化UI和单向数据流。Angular还支持依赖注入、指令、管道等特性，可以用来构建复杂的企业级Web应用程序。

以上就是常用的前端语言和技术，当然还有很多其他的语言和技术，如TypeScript、Webpack、Gulp等等。希望这些串讲能够帮助到大家理解前端开发的一些基础知识。

其中有很多未学到的知识点，以后还要继续学习。

什么是前端的框架？

前端UI框架是一组用于构建用户界面的JavaScript库或工具，它们提供了一些现成的UI组件和样式，可以帮助开发者快速构建出美观、高性能的Web应用程序。常见的前端UI框架有React、Vue、Angular等。

前端UI框架通常会提供一些特定的特性和功能，例如：

  1. 现成的UI组件：如按钮、表单、导航栏、面包屑等，可以帮助开发者快速构建出美观的用户界面。
  2. 样式和主题：框架通常会提供一些预设的样式和主题，可以帮助开发者快速实现应用程序的视觉风格。
  3. 数据绑定：框架通常会提供一些数据绑定的机制，可以帮助开发者实现应用程序中数据和UI的双向绑定。
  4. 状态管理：框架通常会提供一些状态管理的机制，可以帮助开发者管理应用程序中的状态和数据流。
  5. 优化和性能：框架通常会使用一些优化和性能的技术，例如虚拟DOM、代码压缩和缓存等，可以帮助开发者实现高性能的Web应用程序。

以上就是前端UI框架的一些特点和功能。选择合适的前端UI框架可以帮助开发者更快地实现应用程序的开发和发布。 JavaScript框架是一组用于构建Web应用程序的JavaScript库或工具，它们提供了一些现成的JavaScript组件和样式，可以帮助开发者快速构建出美观、高性能的Web应用程序。常见的JavaScript框架有React、Vue、Angular等。

JavaScript框架通常会提供一些特定的特性和功能，例如：

  1. 现成的组件：如按钮、表单、导航栏、面包屑等，可以帮助开发者快速构建出美观的用户界面。
  2. 样式和主题：框架通常会提供一些预设的样式和主题，可以帮助开发者快速实现应用程序的视觉风格。
  3. 数据绑定：框架通常会提供一些数据绑定的机制，可以帮助开发者实现应用程序中数据和UI的双向绑定。
  4. 状态管理：框架通常会提供一些状态管理的机制，可以帮助开发者管理应用程序中的状态和数据流。
  5. 优化和性能：框架通常会使用一些优化和性能的技术，例如虚拟DOM、代码压缩和缓存等，可以帮助开发者实现高性能的Web应用程序。
  6. 路由和状态管理：框架通常会提供一些路由和状态管理的机制，可以帮助开发者管理应用程序中的路由和状态。
  7. 可重用的组件：框架通常会提供一些可重用的组件，可以帮助开发者快速实现应用程序中的各种功能。

以上就是JavaScript框架的一些特点和功能。选择合适的JavaScript框架可以帮助开发者更快地实现应用程序的开发和发布。 怎样写框架呢？ 写一个JavaScript框架需要掌握一些基础的JavaScript知识，例如DOM操作、事件处理、Ajax请求等。此外，还需要掌握一些前端开发的基础知识，例如HTML、CSS、HTTP协议等。除此之外，还需要具备一定的编程和设计能力，以及对前端技术的发展趋势和未来发展方向有一定的了解。

下面是一些写JavaScript框架的步骤和建议：

  1. 确定目标：确定你要写的JavaScript框架的目标和使用场景，例如是用于构建Web应用程序，还是移动应用程序等。
  2. 选择技术：选择适合你要写的JavaScript框架的技术，例如React、Vue、Angular等。
  3. 设计架构：设计你要写的JavaScript框架的架构和组成部分，例如组件、状态管理、路由等。
  4. 实现功能：实现你要写的JavaScript框架的各种功能，例如组件渲染、数据绑定、状态管理等。
  5. 优化性能：优化你要写的JavaScript框架的性能，例如使用虚拟DOM、代码压缩等技术。
  6. 发布和维护：发布你要写的JavaScript框架，并维护和更新它，以便持续改进和适应新的技术发展。 js是比较重要的知识，需要更加用心学习，
avatar
文章
阅读
粉丝