前端语言串讲

一、前端语言的基本能力

前端语言的基本能力

HTML

CSS

JavaScript

Browser

二、前端语言的协作配合

Tending

CSS in html

Javascript in HTML

HTML in Javascript

CSS in javascript

三、你不知道的HTML

（1） HTML-DTD

HTML并非图灵完备，它知识一门标记语言

（2） HTML的全部标签分类

文档型

闭合标签

空标签:

换行型：块级标签

H5新元素：语义化标签

           媒体标签

           表单标签

           功能标签

（3） HTML head标签

Head:title:标题，全局唯一

     Base:向页面所有相对URL提供前缀

     全局唯一，不建议使用

     Meta:通常是约定好的键值对

     例外：charest http-equiv

     Link:rel决定类型，href决定引入地址

     Script:type指定MIME类型

     可内嵌代码，可外链文件

（4）body 标签

（5）HTML ARIA

了解ARIR并非只是为了供盲人阅读，它可以为我们设计UUI提供指导意义

（5）HTML5

Recommendation/Proposed

Candidate Recommendation.

Last Call

Working Draft

lNon-W3C Specifications

Deprecated or inactive

（6）HTML5语义化标签

建议：用对比不用好，不用比用错好

（7）       HTML5 表单增强

（8）       HTML5存储

	cookies	Local storage	session Storage
Capacity	4 kb	10 mb	5 mb
Browsers	HTML 4/HTML 5	HTML	HTML 5
Accessible from	Any window	Any window	Same tab
Expires	Manually set	Never	On tab close
storage Location	Browserand server	Browser only	Browser only
Sent with requests	Yes	No	No

HTML5 IbdexedDB

（9）  HTML5 PWA&AMP

（10）   HTML5 Audio

（11）   HTML5 Web Component

（12）   HEML5 SVG&Canvas

HTML5 webAssembly

是一种新的编码方式，可以直接在浏览器中运行

浏览器内	浏览器外
流媒体视频的编解码加速	短视频的冷启动加速	前端JavaScript代码防盗混淆(SecurityWorker)	物联网设备Wasm微内核
在线音乐制作工具	在线图片编辑工具（squoosh）	原生应用移植(AutoCAD)	编译器代码编译目标
前端应用构建框架(Yew)	前端组件库(Blazor)	物理引擎(Ammo.js)	云技术应用

四、拓展交换

（1） web 的风靡

对用户友好：无需安装、无需强大硬件、升级非常方便、容错率强、传播方便。

对开发者友好：心智模型成熟、丰富的API能力、框架、工具标准化、开发、调试简单、具备跨平台能力。

领域成熟度：what/w3c/ecma、浏览器厂商整合、各类Web应用风靡、商用平面设计标准化、全面组件化。

未来的方向：效率工具(Rust)、JS 2 Anything、服务端容器化、低(无)代码站点、大前端的统一三维可视化。

（2）大前端

（3） MVC&MVVM&MVP

MVC: lnput is directed to the Controller

The many-to-many relationship between the View and the Controller

The View doesn't have any knowledge of the Controller

The View is aware of the Model it is expecting to pass on to it

MVP: Input is directed to the View

The one-to-one relationship between the View and the Presenter

The View holds the reference to its thePresenter and the Presenter is aware of

its the View

The View is not aware of the Model.The Presenter updates the Model.

MVVM：lnput is directed to the Controller

The one-to-one relationship between the ViewModel and the View

The ViewModel doesn't anyknowledge of its the View

The View is not aware of the Model.The ViewModel updates the View.