前端语言串讲

一．前端语言的基本能力

HTML、CSS、 JS

骨架外形肌肉

CSS：语法简单

Selector Declaration Declaration

h1 { color:bule; font-size:12px}

property : value property : value

JavaScript：

(1) 借鉴C语言的基本语法

(2) 借鉴Java语言的数据类型和内存管理

(3) 借鉴Scheme语言，将函数提升到“第一等公民”（First Class）地位

(4) 借鉴Self语言，使用基于原型（prototype）的继承机制

基本语法：

(1) 数据类型：字符串、数字、Boolean、Null、Undefined、Symbol

(2) 例：var(变量) a(变量名字) = 7 + 2

(3) Object：感觉像结构体

(4) 函数

JS在前端的含金量很高

二．前端语言的协作配合

CSS in HTML

Inline CSS

This is a paragraph.

Internal CSS

<head>

<style type = text/css>

body { background-color: blue;}

p { color: yellow;}

</style>

</head>

External CSS

<head>

<link rel="stylesheet" type="text/css" href="style.Css">

</head>

JS in HTML

引入了node概念，单线程处理任务

HTML in JS

JSX结合了HTML与JS

CSS in JS

CSS Module 生成随机字符串来避免命名冲突

三．你不知道的HTML (5)

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

基本语法：标签（元素）Element为

文本Text为text

注释Comment为<!—comment-->

DTD(Document Type Defination)为

处理信息ProcessingInstruction为

标签分类：文档型(<head><body>)

闭合型：闭合标签(<p></p>)

空标签(<br><img><input>)

换行型：块级标签(<div>, <h1><h2>…<h6>)

行内标签(<span><a>)

H5新元素：语义化标签

媒体标签()

表单标签(<input type = “data”>

<input type = “color”>)

功能标签(<canvas><progress>)

Head标签：title（标题，唯一）、base（向界面所有URL提供前缀）、meta（约定好的键值对）、link（rel决定类型，href决定引入地址）、script（type指定MIME类型，可以内嵌代码，也可以外链文件）

body功能性标签：很像元素周期表

HTML ARIA：帮助盲人阅读

HTML 5：

语义化标签：建议用对比不用好，不用比用错好

表单扩展：很多功能

储存：形式很多

IndexedDB：一次大升级

PWA & AMP：提高网站响应速度

Audio：内置的代码比较现代化

Video：多种形式的访问

二进制：字节的操作能力

API：获取位置信息

Web Worker：多线程操作

Web Socket：双方通信，模拟TCP访问方式

Shadow DOM：可以避免内部的数据被访问

Web Component：赋予了自定义标签的能力

SVG & Canvas：向量化图片canvas可以画各种各样的图形

WebGL & WebGPU：对开发者是个福音

WebAssembly：简称WASM，是一种全新的编码方式，可以直接在浏

览器里运行

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

前端语言串讲

一．前端语言的基本能力

二．前端语言的协作配合

三．你不知道的HTML (5)