6.前端语言串讲 | 青训营笔记

Aerozw
74 阅读2分钟

前端语言串讲

①前端语言的基本能力

HTML(骨架)
CSS(呈现在用户面前)
JavaScript(功能交互)

image.png

image.png

1.HTML

  • 最基本的语言
  • < > 标签/元素
  • 完成文本到内容的过程

2.CSS

  • 语法非常简单
    image.png
  • 仅是语法简单，但需要设置合理的选择器和复杂的内容
    image.png
  • 伪元素/伪类选择器
    image.png
  • 简单介绍CSS文档
    image.png

3.JavaScript

  • 发展历史
    image.png
  • 特点介绍
    image.png
  • 基本语法介绍
    弱类型语言，动态类型
    image.png image.png

4.Broswer

  • 浏览器中构建页面的过程如下
    image.png
  • V8现有工作流程（2017）
    image.png

②前端语言的协作配合

1.Trending

image.png

2.CSS in HTML

  • 三种引入方式
    image.png

3.JS in HTML

  • 基本使用方式
    image.png
  • JS与DOM
    image.png
  • 微任务/宏任务执行
  • HTML in JS 模板语言，例如Mustache语法
    image.png

4.CSS in JS

image.png

  • CSS Module 避免样式命名重复的问题
    image.png
  • JSS
    image.png

3.HTML（你所不知道的）

（1）HTML DTD

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

（2）HTMl全部标签分类

  • 标签分类 image.png

（3）HTML head标签

  • head的结构介绍 image.png

（4）HTML body 功能性标签

image.png

（5）HTML ARIA

  • ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供知道意义
    image.png

（6）HTML5

image.png

（7）HTML5语义化标签

用对比不用好，不用比用错好
image.png

（8） HTML5表单增强

新增多种选择器
image.png

（9）HTML5存储

HTML已经具有了存储的功能
image.png

（10）HTML5 IndexedDB

image.png

（11）HTML5 PWA&AMP

分为PWA和AMP两种过程
image.png

（12）HTML5 Audio

HTML5的音频内容已经非常完备
image.png

（13）HTML5 Video

image.png

（14）HTML5 二进制

image.png

（15）HTML5 API

HTML5提供了丰富的API
image.png

（16）HTML5 Web Worker

image.png

（17）HTML5 Web Socket

实现通信（双向） image.png

（18）HTML5 Shadow DOM

构建shadow dom节点，可以无限延伸，具有扩展功能
image.png

（19）HTML5 Web Component

image.png

（20）HTML5 SVG & Canvas

SVG：矢量，可扩展，本身是DOM元素
Canvas：点阵，不可扩展，会失真 image.png

（21）WebGL & WebGPU

直接跟GPU进行交互
image.png

过程如下
image.png

（22）HTML5 WebAssembly

全新的编码方式
image.png

④拓展交流

1.Web的风靡

image.png

2.大前端

image.png

3.MVC & MVVM & MVP

image.png

avatar
文章
阅读
粉丝