前端语言串讲

01前端语言的基本能力
02前端语言的协作配合
03你不知道的HTML（5）
04拓展分享

01前端语言的基本能力

JS网页交互才是网页的精髓（提供交互和函数）

HTML作为骨骼， HTML + CSS 是大脑 JS 加上之后即为肌肉
结合在一起成为一个系统

CSS

Selector {Declaration; Declaration} Declaration -> Property:Value

类选择器，全选择器，伪元素选择器，id选择器，元素类型选择器，伪类选择器等
使用各种各样的选择器
元素自身选择伪类选择器，元素内容使用伪元素选择器

JavaScript

语法：

1.6个基本类型

2.var 关键字定义变量，其他的作用域不同

3.Object

定义function来实现他自己的一些函数

4.function
定义（关键字定义）{
函数体内容

根据情况是不是要return
}

01_Broswer

先解释成树 -> 转换成字节码 -> 在虚拟机中运行

02前端语言的协作配合

css趋势：工具链；css规范；css框架库
js:React vue UI训练引擎；划端框架；工具链（web pack）

结论：都会在各自的深度上越来越深，而且最后都会在自己最佳的状态来进行融合，例如模板引擎

CSS in HTML

1.inline CSS（行内样式）
2.Internal CSS（内部样式）
3.External CSS（外部链接）

e.g

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

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

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

JavaScript in HTML

与之进行对应
dom的事件机制

JS一般都会先完成宏任务，完成微任务之后再去完成宏任务（浏览器默认执行的代码都属于宏任务）

HTML in JavaScript

CSS in JavaScript

CSS Module 和 JSS
解决全区类名容易冲突的问题，避免变量名冲突

03你不知道的HTML（5）

1HTML DTD

HTML 并非图灵完备，它只是一门标记语言

2HTML全部标签分类

3HTML head标签

base现在已不再流行 link引入资源吗

4HTML body功能性标签

不必死记硬背，大致了解一些即可

5HTML ARIA

了解ARIA并非知识为了供盲人阅读，它可以为我们设计UI系统提供指导意义用对比不用好，不用比用错好

定义了很多特性

6HTML5语义化标签

header等一些语义化标签，更好的维护网站

7HTML5表单增强

8HTML5存储

HTML5 IndexedDB

HTML5 PWA&AMP

HTML5 Audio

像拓扑图的声音输入

HTML5 Video

HTML5 二进制

HTML5 API

HTML5Web Worker

HTML5 Web Socket

通过发送数据帧给服务端，服务端可以选择传一段回去

HTML5 Shadow DOM

Shadow节点可以无限延伸，然后可以隐秘传输

HTML Web Component

HTML5 SVG & Canvas

svg是矢量的可以拓展的，canvas会变得失真后者并未实现一些对事件的特殊处理

HTML5 WebGL（GLSL） & WebGPU（WGGL）

把gpu能力过度给开发者

HTML WebAssembly

流媒体的编解码，与js分隔

04拓展交流

1Web的风靡

2大前端

3MVC & 《MVVM & MVP

总结（官方）

总结

本次课学习到了有关前端语言的基本能力和前端语言之间的相互配合，包括html和js，js和css，css和js等内容,了解到了HTML的一些更加前端性的东西和一些实践的技巧，还有Web之后的未来和Web为什么可以这么风靡全球，收获颇多

前端知识串讲 | 青训营笔记