Day 1 第一天的学习笔记｜青训营前端语言的基本能力 HTML 构建框架结构，Web页面的基石，就像一个网页的骨骼

Frontend

前端语言的基本能力

HTML
- 构建框架结构，Web页面的基石，就像一个网页的骨骼。
- HTML由一系列元素组成，每个元素都有特定的含义和用途。例如：
  - <div>元素用于创建一个容器，用来组合其他元素。
  - <p>元素用于表示段落。
  - <a>元素用于创建超链接。
  - <img>元素用于插入图片。
  - ...
CSS
- 赋予网站设计样式，就像一个网页的皮囊。
- CSS用于控制网页的布局和外观。可以通过选择器来选中HTML元素，并为其应用样式。例如：
  - body { background-color: #f2f2f2; } 可以设置网页的背景色为灰色。
  - h1 { color: blue; } 可以将所有h1标签的文字颜色设为蓝色。
  - #header { font-size: 24px; } 可以设置id为header的元素的字体大小为24px。
  - ...
JavaScript
- 增加交互体验，处理复杂函数，就像网页的肌肉。
- JavaScript是一种高级的、解释型的编程语言，用于为网页添加动态功能。例如：
  - 可以通过JavaScript修改网页的内容，如更新文字、插入新的HTML元素等。
  - 可以对用户的输入进行处理，验证表单数据，实现表单的交互效果等。
  - 可以与服务器进行交互，发送和接收数据，实现异步加载等。
  - ...

JavaScript Types

7个数据类型：String Number Boolean Null Undefined Symbol Object

基本语法规则 var\let\const 不同数据类型会叠加

Object

Function

运转过程

JavaScript Execution

JavaScript Call Stack

前端语言的协作配合

CSS in HTML

Inline 标签内书写

Internal 在文件头部写style

External 直接引入外部的文件

JavaScript in HTML

引入外部脚本或直接编辑

Dom把页面元素获取出来

捕获顺序：

Capture Phases

微任务与宏任务执行的相关顺序

HTML（5）

基本语法

标签

标签分类 HTML Tags

HTML Elements

文本
注释
DTD
处理信息

ARIA

使设计更有意义、便于理解

HTML5

语义化标签，便于网站维护和整理

用对比不用好，不用比用错好

表单增强

提供额外的网站存储能力

Form Enhancements

IndexedDB

对象存储空间，可以存储任何类型的对象

PWA&AMP

PWA & AMP

音频能力

振幅频率波形

Audio

视频能力

二进制

Binary

API能力

获取位置、拖拽信息...

Web Worker

Web Socket

APIs

Shadow DOM

Web Component

计算单词个数

SVG & Canvas

前者矢量，后者点阵绘制 SVG更具有灵活性，可以交互 Canvas可以绘制复杂的图案

Day 1 第一天的学习笔记｜青训营

前端语言的基本能力

运转过程