一、前端语言的基本能力
（结构）HTML：构建框架结构，包含控制内容布局等，是所有Web业务的基石。
（表现）CSS：给网站添加样式，，是网站外表和体验的工具。
（行为）JavaScript：是最具灵魂的语言，Web的精髓，可以处理复杂的函数，保证优质代码的更高效率及可用性。
二、前端语言的协作配合能力
01 趋势
三种语言都会深度发展，具体查看PPT。
02 CSS in HTML
以下是该协作的三种基本使用方式：
03 JavaScript in HTML
04 HTML in JavaScript
05 CSS in JavaScript
三、你不熟知的HTML(5)
01 HTML5 基本语法
HTML并非图灵完备，它只是一门标记语言。
HTML的基本语法分为五部分，其中最核心的是标签元素Element，接下来是文本Text、注释Comment 、DTD document type Definition即文档定义（不常用），最后一个处理信息Processing Instruction。
02 HTML5标签分类
四类型：文档型、闭合型、换行型和H5新元素。
03 HTML5 Head
head包括title、base、meta、link和script。
04 HTML body功能性标签
类似于元素周期表的排列，翻笔记查图。
05 HTML5 ARIA
了解ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义。翻笔记查图。
06 HTML5
07 HTML5 表单增强
08 HTML5 存储
09 HTML5 语义化标签
10 HTML5 IndexedDB
11 HTML5 PWA/AMP
是基于储存的应用。
12 HTML5 Audio
首先我们使用audio context来创建一个音频的上下文，再创建一个正弦的震荡器，这其实就决定了声音的音色，然后基于音频上下文来创建一个音量的一个增幅器。
我们把音色的和音量关联起来，再和音量以及音频的输出接口关联起来，然后开始震动波幅，我们就可以听到一些最基本的声音了。
所以他本质上来说他其实是像一个拓扑图发生一个声音的输入，他可以支持不同的音频来源，然后输入到GainNode声音然后通过不同的音量处理节点来进行最终输出到一个master GainNode
最终在输出到音频的输出设备。
首先我们使用audio context来创建一个音频的上下文，再创建一个正弦的震荡器，这其实就决定了声音的音色，然后基于音频上下文来创建一个音量的一个增幅器。
我们把音色的和音量关联起来，再和音量以及音频的输出接口关联起来，然后开始震动波幅，我们就可以听到一些最基本的声音了。所以他本质上来说他其实是像一个拓扑图发生一个声音的输入，他可以支持不同的音频来源，然后输入到GainNode声音然后通过不同的音量处理节点来进行最终输出到一个master GainNode
最终在输出到音频的输出设备。
13 HTML5 Video
HTML video的话，其实大部分的时候我们使用video标签就可以完成视频的播放，有的时候如果我们需要一些定制性的能力，我们可能需要使用mediasource，当然他作用输出也是需要给vedio指定SRC来实现的，不过它可以指定各种各样的source buffer，不同的source buffer他可以配置不同的track buffer，那不同的track buffer可能是比如说audio类型，也可能是fellow类型，他们经过一系列组合器的装配的话，他们最终可以输出到指定的auto device或者vedio标签上面，这样我们可以来实现一个可定制化的一个media source一个能力。
14 HTML5二进制
HTML5二进制其实也有不错的知识能力。
比如说我们可以通过FileReader来读取一个文件，然后他读取的文件一般是一个blob对象，那么tire也是继承自blob的，所以blob比较泛的二进制对象的一个期类，然后通过发ilereader我们可以把blob对象转化成test格式或者buffer的格式或者data url的格式。data ur他其实就是一片内存的标识吧，他指向内存中一片地址。所以通过data url可以快速的访问一个比较大的二进制对象。然后biob对象也可以直接转换为Arraybuffer的格式， Arraybuffer他默认是一个可以读但不能写的一个二进制数组类型。我们可以通过typer或 者data view两种方式来对他进行一个封装，然后来具备比如说对八个字节/十六个字节/三十二个字节的一个整体的操作能力。
15 HYML5 API
16 HTML5 Web Worker
17 HTML5 Web Socker
18 HTML5 Shadow DOM
19 HTML5 Web Component
20 HTML5 SVG和Canvas
21 HTML5 WebGL&WebGPU
这两个语言可以直接跟GPU交互来绘制图形。他们经历一个漫长的阶段，从1990年open gl诞生开始，直到2011年才有web上对应史的webgl，随着2015年PC上的vulkan横空出世，webGL的思想和性能迅速品成就，于是web GPU即将诞生，web GPU几乎把GPU的能力可以直接暴露给前端开发者，对专业的图像开发人员应该是一个巨大的福音。
他们的原理就比如说把它绘制一个物体叫做mash，也是网格对象，这个对象其实有很多顶点组成的，我们需要有一个vertexshader （顶点着色器）来计算这个顶点投影到屏幕的位置，再结合FragmentShader （片段着色器）来绘制这个物体的外观。
所以这些着色器器语言其实是核心部分，Web的着色器语言叫做GSL，那么GPU的着色性语言叫做WGSL。
22 HTML5 WebAssembly
Web Assembly有时候会写成WASM，它是一种基于JS的二进制格式文件，因此一般不是被直接书写，他可以由像C和C++这些编译性的语言通过转移工具生成，前端需要以ArrayBuffer的格式加载这些Web Assembly文件并编译和实例化，和Java的运行环境是完全隔离的，因此他们需要Import object和Export object进行通信。
Web Assembly其实有很多用途，比如说流媒体的编写码、Javascript代码防混淆、图片处理，原生应用的移植等等。
其实这一part在goodnotes上有很多笔记，原本是打算在这篇文章上放截屏手写笔记的，如上述图片，但是以下手写笔记内容有很多自己真名的水印，太多了没办法p，而本人偏完美主义，就在这里简单概括一下以及谈一些观点，详细内容自己再回去翻吧。
四、拓展交流
01 Web的风靡
简单来说，对用户友好、对开发者友好、领域成熟度高以及未来发展前景好，在我个人看来，重点是未来的三大前端的统一以及其3D可视化将会越来越容易实现。
02 大前端（Android和iOS）
03 交互方式
MVC&MVP&MVVM
Web作为GUI最大的一个交互体系，他已经沉淀出了非常完善的一个交互方式。
我们先看MVC，其中view主要是处理外部界面相关的交互，而model主要维护渲染界面，所需要的一个数据层，Control的主要是处理业务逻辑。比如说用户触发登录操作，Control会判断输入框内容是否正确，不正确的话会让view给出提示，正确的话就让model进行数据更新并反馈给view 。
MVP是对MVC的一种改进，他把所有的操作全部内聚到了presenter这一层，其他需要同时处理数层和数据层的一个相互操作，以及整个状态的统一。
MVVM最早是由微软提出的，在前端以view作为代表性，持续发扬光大。他本质和MVP比较类似，区别是实现了双向绑定的能力，让view model层的负担大大减弱，同时view model也不需要和view层耦合，具备了可复用性。
五、总结
ps：有些专业术语的运用会出错，望大佬纠正，以上。
