前言：
随着前端的不断探索和进化，传统的前端“三剑客”技术也是日新月异，而且彼此之间联系越来越紧密
重点内容：
- 前端语言的基本能力
- 前端语言的协作配合
- 你不知道的HTML
- 拓展分享
详细知识点介绍：
前端语言的基本能力：
HTML：
HTML 即 Hyper Text Markup Language 超文本标记语言，它是负责描述页面的语义
CSS：
JavaScrip：
- 借鉴 C 语言的基本语法；
- 借鉴 java 语言的 数据类型 和 内存管理
- 借鉴 Scheme 语言，将函数提升到 第一等公民 的地位
- 借鉴 Self 语言，使用 基于原型 的继承机制
Browser：
前端语言的协作配合：
CSS in HTML：
JavaScrip in HTML：
vue
JSX
HTML in JavaScrip：
JSX：
你不知道的HTML：
基本语法
- 标签（元素）Element：
<tagname></tagname> - 文本 Text:
![CDATA[text]] - 注释 Comment:
<!-- comments --> - DTD：
<!Doctype html> - 处理信息 ProcessingInstruction:
<?a 1>
html head标签：
- title：标题，全局唯一
- base：向页面所有相对url提供前缀。全局唯一，不建议使用
- meta：通常是约定好的键值对
- link：rel 决定类型，href 决定引入地址
- script：type 指定MIME 类型，可内嵌代码与外链文件
HTML5 存储：
HTML5 Audio：
// 创建一个音频上下文
const audioCtx = new (window.AudioContext || window.webkitAudioContext)
// 创建一个正弦振荡器
const osci = audioCtx.createOscillator()
// 创建一个音量增幅器
const gain = audioCtx.createGain()
// 正弦振荡器关联音量增幅器
osci.connect(gain)
// 音量增幅器关联音频上下文的音频输出器
gain.connect(audioCtx.destination)
// 开始正弦波动
osci.start()
HTML5 二进制：
HTML5 Web Socket：
HTML5 WebAssembly：
WebAssembly 是一种新型编码方式，可以直接在浏览器中运行
| 浏览器内 | 浏览器内 | 浏览器内 | 浏览器外 |
|---|---|---|---|
| 流媒体视频的编解码加速 | 短视频的冷启动加速 | 前端 JavaScrip 代码防盗混淆 | 物联网设备 Wasm微内核 |
| 在线音乐制作工具 | 在线图片编辑工具 | 原生应用移植 | 编译器代码编译目标 |
| 前端应用构建框架 | 前端组件库 | 物理引擎 | 云技术应用 |
Web 的风靡：
对用户友好：
- 无需安装
- 无需强大硬件
- 升级方便
- 容错率高
- 传播方便
对开发者友好：
- 心智模型成熟
- 丰富的API
- 框架、工具标准化
- 开发、调试简单
- 具备跨平台能力
领域成熟度：
- whatwg/w3c/ecma
- 浏览器厂商整合
- 各类Web应用风靡
- 商用平面设计标准化
- 全面组件化
未来的方向：
- 效率工具(Rust)
- JS 2 Anything
- 服务端容器化
- 低代码站点
- 大前端统一
- 三维可视化
