1. 前端语言的基本能力
1.1 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML的全称为超文本标记语言( Hyper Text Markup Language )，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由HTML命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
1.2 CSS
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
层叠样式表(Cascading Style Sheets)是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1.3 JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>
JavaScript(简称 JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
- 借鉴 C 语言的基本语法
- 借鉴 Java 语言的数据类型和内存管理
- 借鉴 Scheme 语言，将函数提升到“第一等公民”（first class）的地位
- 借鉴 Self 语言，使用基于原型（prototype）的继承机制
1.4 Browser
Browser运行原理（详见客户端容器第三章）
V8工作流程
V8 是 Google 开源的 JavaScript 和 WebAssembly 引擎，用 C++ 编写。它用于 Chrome 和 Node.js 等。 V8 实现了 ECMAScript 和 WebAssembly，并在 Windows7 或更高版本、macOS 10.12+ 以及使用 x64、IA-32 或 ARM 处理器的 Linux 系统上运行。其他系统（IBM i、AIX）和处理器（MIPS、ppcle64、s390x）由外部维护。V8 可以独立运行，也可以嵌入到任何 C++ 应用程序中。
2. 前端语言的协作配合
2.1 CSS in HTML
inline CSS
<p style="color: blue;">This is a paragraph.</p>
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>
2.2 JavaScript in HTML
inline JavaScript
<button onclick="getElementById('time').innerHTML=Date()">
Show Date
</button>
Internal JavaScript
<script>
function showContent() {
var temp = document.getElementByTagNode("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
External JavaScript
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
2.3 HTML in JavaScript
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />
);
2.4 CSS in JavaScript
<script>
import OtherComponent from './OtherComponent.vue'
export default {
data () {
return {
greeting: 'Hello'
}
},
components: {
OtherComponent
}
}
</script>
3. 你不知道的 HTML(5)
HTML 并非图灵完备，只是一门标记语言。
基本语法
-
标签（元素）Element
<tagname>...</tagname>
-
文本 Text
- text
<![CDATA[text]]>
-
注释 Comment
<!--comments-->
-
DTD Document Type Defination
<!Doctype html>
-
处理信息 ProcessingInstruction
<? a 1 ?>
3.1 HTML 标签
3.1.1 标签分类
-
文档型
<!DOCTYPE><head><body>
-
闭合型
-
闭合标签
<p></p>
-
空标签
<br><img><input>
-
-
换行型
-
块级标签
<div><h1>,<h2>...<h6>
-
行内标签
<span><a>
-
-
H5 新元素
-
语义化标签
-
媒体标签
<video><audio><embed>
-
表单标签
<input type="date"><input type="color">
-
功能标签
<canvas><progress>
-
3.1.2 head 标签
-
title
- 标题，全局唯一
-
base
- 向页面所有相对 URL 提供前缀
- 全局唯一，不建议使用
-
meta
- 通常是约定好的键值对
- 例外：charset、http-equiv
-
link
- rel 决定类型，href 决定引入地址
-
script
- type 指定 MIME 类型
- 可内嵌代码，可外链文件
body 功能性标签
3.2 HTML ARIA
ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。
它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。
警告： 许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA。例如，原生元素具有内置的键盘无障碍、角色和状态。但是，如果选择继续使用 ARIA，则开发者将有责任在脚本中模仿（等效）浏览器行为。
ARIA 不仅是为了供盲人阅读，还为我们设计 UI 系统提供指导意义。
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"></span>
<label id="chk1-label">Remember my preferences</label>
3.3 HTML5
HTML5 是构建 Web 内容的一种语言描述方式。HTML5 是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML 产生于1990年，1997年 HTML4 成为互联网标准，并广泛应用于互联网应用的开发。
HTML5 是 Web 中核心语言 HTML 的规范，用户使用任何手段进行网页浏览时看到的内容原本都是 HTML 格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
- Recommendation / Proposed
- Candidate Recommendation
- Last Call
- Working Draft
- Non-W3C Specifications
- Deprecated or inactive
3.3.1 语义化标签
语义元素
语义是指对一个词或者句子含义的正确解释。很多 HTML标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到<h1></h1>标签时，它将该标签解释为包含这一块内容的最重要的标题。h1 标签的语义就是用它来标识特定网页或部分最重要的标题。
语义化标签
h5 语义化标签的推出很好的解决了满屏的 div 布局，语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义，使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让和搜索引擎都容易理解。
好处
- 为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构
- 比
<div>标签有更加丰富的含义，方便开发与维护 - 方便搜索引擎能识别页面结构，有利于 SEO
- 方便其他设备解析（如移动设备、盲人阅读器等）
- 有利于合作，遵守 W3C 标准
用对比不用好，不用比用错好
3.3.2 表单增强
在 HTML5 前的表单标签中，对于一些功能支持的不够好，比如：文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能，HTML5 中这些常用的基本功能直接加到了新的表单标签中。
新的表单中添加了很多输入型控件，比如：number、url、email、range、color、date 等，通过 input 的 type 属性使用。
3.3.3 存储
| Cookies | Local Storage | Session Storage | |
|---|---|---|---|
| Capacity | 4 kb | 10 mb | 5 mb |
| Browsers | HTML 4 /HTML 5 | HTML 5 | HTML 5 |
| Accessible from | Any window | Any window | Same tab |
| Expires | Manually set | Never | On tab close |
| Storage Location | Browser and server | Browser only | Browser only |
| Sent with requests | Yes | No | No |
3.3.4 IndexedDB
| Cookies | Web Storage | IndexedDB | |
|---|---|---|---|
| Storage | Small lookup table with pairs of key, data values | Strings only, Key, value storage | ObjectStore that can store any type of data including objects |
| Capacity | 4 kb | 5 mb - 25 mb | 50 mb upwards |
| Indexig | Not Available | Not Available | Available |
| API Call Type | Synchronous | Synchronous | Asynchronous |
| Operations performance | Directly performed | Directly performed | Transactional |
| Learning Curve | Low | Low | High |
3.3.5 PWA & AMP
PWA
AMP
3.3.6 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();
3.3.7 Video
3.3.8 二进制
3.3.9 API
GeoLocation API
const position = navigator.geolocation.getCurrentPosition(showPosition);
console.log('Latitude: ',position.coords.latitude);
console.log('Longitude: ',position.coords.longitude);
3.3.10 Web Worker
3.3.11 Web Socket
3.3.12 Shadow DOM
3.3.13 Web Component
3.3.14 SVG & Canvas
3.4 WebGL & WebGPU
3.4.1 WebGL
WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染（部分计算 GPU） ，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型，还可以创建复杂的导航和数据视觉化。
3.4.2 WebGPU
WebGPU 是一种新的 Web 图形 API，它具有显着的优势，例如大大减少相同图形的 JavaScript 工作量，以及机器学习模型推断的三倍以上的改进。
3.5 WebAssembly
WebAssembly(WASM) 是一种新的编码方式，可以直接在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。
const buffer = await
fetch('...').then(resp => resp.arrayBuffer());
const instance = WebAssembly.instantiate(buffer);
| 浏览器内 | 浏览器外 | ||
|---|---|---|---|
| 流媒体视频的编解码加速 | 短视频的冷启动加速 | 前端 JavaScript 代码防盗混淆（SecurityWorker） | 物联网设备 WASM 微内核 |
| 在线音乐制作工具 | 在线图片编辑工具（Squoosh） | 原生应用移植（AutoCAD） | 编译器代码编译目标 |
| 前端应用构建框架（Yew） | 前端组件库（Blazor） | 物理引擎（Ammo.js） | 云技术应用 |
4. 扩展分享
4.1 Web 的风靡
-
对用户友好
- 无需安装
- 无需强大硬件
- 升级非常方便
- 容错率强
- 传播方便
-
对开发者友好
- 心智模型成熟
- 丰富的 API 能力
- 框架、工具标准化
- 开发、调试简单
- 具备跨平台能力
-
领域成熟度
- whatwg/w3c/ecma
- 浏览器厂商整合
- 各类 Web 应用风靡
- 商用平面设计标准化
- 全面组件化
-
未来的方向
- 效率工具（Rust）
- JS 2 Anything
- 服务端容器化
- 低（无）代码站点
- 大前端的统一
- 三维可视化
4.2 大前端
大前端就是所有前端的统称，比如 Android、iOS、web、Watch 等，最接近用户的那一层也就是 UI 层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个 APP 需要做 Android 和 iOS 两种模式而担心。大前端是 web 统一的时代，利用 web 不仅能开发出网站，更可以开发手机端 web 应用和移动端应用程序。
