前端语言串讲课堂笔记｜青训营笔记看来像是这届新录的课，主要是串讲一些前端语言（前端三件套HTML、CSS、JS），

看来像是这届新录的课，主要是串讲一些前端语言（前端三件套HTML、CSS、JS）相关的知识，然后讲了一些HTML需要注意的点。

前端语言的基本能力

前端三件套是 HTML、CSS、JS 三个语言。

如果把页面比作一个人，那么 HTML 就构建了人的骨骼，CSS 构建了人的皮肤，JS 则构建了人的肌肉，赋予人交互的能力。

前端三件套的三个语言都是同等重要的，缺一不可。

HTML 超文本标记语言

HTML 全称：Hyper Text Markup Language，超文本标记语言。

其本质就是标签构成的文本文件，后面的小节再详细展开。

CSS 层叠样式表

CSS全称：Cascading Style Sheets，层叠样式表。

CSS 是一门语法非常简单的语言，只需要一个选择器（Seletor），然后后面跟上包含多个 Declaration 的大括号，每个 Declaration 由一 Property 和一个 Value 组成。

简单的案例如下：

 h1 {
     color: blue;
     font-size: 12px;
 }

写好 CSS 不仅要设计好 HTML 文档的结构，还要设计好选择器。

JS

JavaScript 是一门脚本语言。

借鉴了C语言的基本语法
借鉴了Java语言的数据类型和内存管理
借鉴了Scheme语言，将函数提升到“第一等公民”（first class）的地位
借鉴了Self语言,使用基于原型（prototype）的继承机制

数据类型

JS的数据类型分为基础数据类型和复杂数据类型两种。

基础数据类型现在有七种：

Number（数字）： Number 类型用于表示整数和浮点数。在 JavaScript 中，所有数字都是双精度浮点数（64位），遵循 IEEE 754 标准。这意味着 JavaScript 中并没有真正的整数类型。另外，Number 类型还包括特殊值如：Infinity（正无穷大）、-Infinity（负无穷大）和 NaN（非数值）。
String（字符串）： String 类型表示一串字符。在 JavaScript 中，字符串是不可变的，这意味着一旦创建了一个字符串，就不能对其内容进行修改。字符串可以用单引号、双引号或反引号（模板字符串）括起来。
Boolean（布尔值）： Boolean 类型只有两个值：true（真）和 false（假）。布尔值通常用于表示条件、逻辑操作或比较的结果。
Null（空值）： Null 类型只有一个值：null。它表示一个空值或不存在的引用。通常用于表示变量没有被赋值，或表示一个空对象。
Undefined（未定义）： Undefined 类型只有一个值：undefined。当一个变量声明了，但尚未赋值时，其默认值为 undefined。它表示变量的值尚未确定。
Symbol（符号）： Symbol 类型是 ECMAScript 6（ES2015）引入的新类型。Symbol 类型的值是唯一且不可变的，主要用于创建对象的唯一属性名，以防止属性名冲突。
Bigint（长整型）：是一种长整型数据类型，它可以表示任意大小的整数。这种数据类型允许我们安全地对大整数执行算术操作，表示高分辨率的时间戳，使用大整数id，等等，而不需要使用库。

复杂数据类型一般指 Object类型。

Object（对象）： Object 类型用于表示复杂的数据结构，如对象、数组和函数。对象是键值对的集合，键是字符串，值可以是任何数据类型。数组是值的有序集合，而函数是可调用的代码块。

在 JavaScript 中，基本类型（Number、String、Boolean、Null、Undefined、Symbol和 Bigint）是不可变的基本数据类型，而对象类型（Object）是可变的引用数据类型

前端语言的协作配合

CSS in HTML

CSS 编写的三种方案：

Inline CSS 行内样式

 <p style="color:blue;">This is a paragraph.</p>

Internal CSS 嵌入HTML文件的CSS样式

 <head>
     <style type = text/css>
         body{background-color:blue;}
         p{color:yellow:}
     </style>
 </head>

External CSS 编写CSS后缀文件,然后导入HTML文件的写法(主流)

 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>

JavaScript in HTML

在 <script> 标签里书写
行内式写法

HTML in JavaScript

HTML同样可以写在JavaScript中，这个语法的文件后缀名是JSX，延伸的有TSX。分别表示使用JS编写和TS编写。这种语法在React中尤其常见。

CSS in JavaScript

在 React 中，为了提高 CSS 样式管理的可维护性和局部性，引入了 CSS Modules（将 CSS 样式与 React 组件关联）和 JSS（JavaScript Style Sheets，将 CSS 样式以 JavaScript 对象的形式编写和管理）等技术。

前端语言串讲 课堂笔记 ｜ 青训营笔记