1 前端语言的基本能力

前端三剑客：HTML、CSS、JS

1.1 HTML

最小的单位：标签

1.2 CSS

1.2.1 格式

image (3).png

1.2.2 前提

HTML结构设计合理，并设计配套的选择器方案

1.2.3 选择器类型

类选择器：根据class选择(可复用) .xxx{}
id选择器：根据id选择(id一般唯一) #xxx{}
全选择器：选中全部 *{}
伪元素选择器：可以在元素的内容的之前、之后添加新的元素
标签选择器：选中该标签 标签名{}
伪类选择器：选中某一状态的元素，会用到:
……

1.3 JavaScript

单线程

发展时间线

image (5).png

特点

image (4).png

1.3.1 JS基础语法

基本类型

String
Number
Boolen
Null
Undefined
Symbol
Object(Array、Function...)

基本语法特点

var a = 7 + "2";
关键字变量名操作符表达式

关键字(var let const)：作用域不同
变量名：不和常用关键字/特殊保留字符冲突的字符，都可以作为变量名
注意：当表达式里有xxx+"a"的时候，前面的xxx会被同化成字符串，所以上面表达式中的a=72

Function

image (6).png

1.4 Browser

JS本质就是一段文本，需要通过解释器才能运行

流程

HTTP→构建DOM树→计算CSS树→排版→渲染合成→绘制

2 前端语言的协作配合

CSS in HTML

Inline CSS：直接在html标签中通过style添加样式
Internal CSS：在html头部通过标签style添加样式
External CSS：在html头部通过link标签引入外部样式

JS in HTML

可以引入外部文件，也可以在内部编写脚本。
DOM:把页面上HTML部分转化成对应的JS对象。

DOM事件机制
事件捕捉：方便计算机找到触发元素
事件捕获（冒泡）：方便开发者执行事件代理等相关功能

image (8).png

HTML in JS

现在不会单纯使用JS的DOM方法，会基于线程渲染来做项目（例如模板）

CSS in JS

可以通过DOM修改样式等
常用技术：CSS Module、JSS

3 你不知道的HTML(5)

HTML并非图灵完备，只是一门标记语言。
了解ARIA可以为我们设计UI系统提供指导意义。

3.1 基本语法

image (9).png

3.2 标签

3.2.1 全部标签分类

image (10).png

3.2.2 head标签

title：（全局唯一）标题
base：（全局唯一）向页面所有相对URL提供前缀，不建议用
meta：通常是约定好的键值对，例外：charset、http-equiv
link：rel决定类型，href决定引入地址
script：type指定MIME类型，可内嵌代码、外链文件

3.2.3 body功能性标签

大致了解即可，不需死记硬背，需要时查文档即可

3.3 HTML5新增

语义化标签
建议：用对>不用>用错

<body>
  <header>
    <nav>……</nav>
  </header>
  <aside>
    <nav>……</nav>
  </aside>
  <section>……</section>
  <section>……</section>
  <section>……</section>
  <footer>
    <address>……</address>
  </footer>
</body>

表单增强
存储
IndexedDB
PWA&AMP
Audio
Video
二进制
API
Web Worker
Web Socket（模仿TCP）
Shadow DOM
Web COmponent（自定义标签）
SVG & Canvas（可视化，前者不会失帧后者会，但后者更多用于HTML游戏）
WebGL & WebGPU（可视化）
WebAssembly（新的编码方式，可以直接在浏览器中运行）

4 拓展分享

Web的风靡

对用户、开发者都友好
领域成熟度高
未来的方向多

大前端
MVC & MVVM & MVP

5 个人感想总结

本节课讲的是前端语言的基础，都算是比较基础的知识，很好的承上启下。
重点讲了HTML，以及枚举HTML5的新特性（详细可查阅课程资料）。前端的应用远比我想象的数量要多、范围要广。
要积极学习新的东西，都是可以运用到代码上的，学得好用得好比不用要好。但如果学不好，不如不用。

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