第六节 前端语言串讲

一、前端语言的基本能力

• 前端语言三件套分别指HTML、CSS、JavaScript，是构建网页的基本组成部分。
• HTML 定义了网页的结构和内容，css 帮助我们实现网络的外观和样式，而JavaScript则负责为网页添加动态交互和行为。

(一)HTML

• HTML是─种标记语言，用于创建网页的结构和内容。
• HTML(Hypertext Markup Language) 超文本标记语言, 它使用一系列标记来指示浏览器如何显示页面上的内容。
• 它可以创建结构,控制内容的布局,为网页设计提供结构。
• HTML支持多种新颖的元素和API，使开发人员能够创建更丰富、交互性更强的Web应用程序。

(二)CSS(Stylize the website)

网站风格化;将样式应用于网页元素;针对各种屏幕大小，使网页具有响应性;主要处理网页的“外观和感觉”

(三)JavaScript

增加互动性，增加网页的交互性;处理复杂的功能和特点;增强功能的程序代码

1. 借鉴C语言的基本语法;
2. 借鉴Java语言的数据类型和内存管理;
3. 借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;
4. 借鉴Self语言，使用基于原型(prototype)的继承机制。

类型包括：String、Number、Boolean、Null、Undefined、Symbol

(四)浏览器引擎

Browser

二、前端语言的协作配合

Trending

(一)CSS/Javascript in HTML

CSS in HTML

Javascript in HTML

(二)HTML/CSS in Javascript

HTML in Javascript

CSS in Javascript

你不知道的HTML(5)

HTML DTD

HTML并非图灵完备，他只是一门标记语言 基本语法分为：标签、文本、注释、DTD、处理信息

(一)标签

HTML 全部标签分类

标签分为：文档型、闭合型、换行型、H5新元素

head

03_HTML head标签 功能性，用户看不到 分为：title、base、meta、link、script title：标题 base：向页面所有相对URL提供前缀；实际上是过度耦合设计，在如今已经不用了 meta：通常是约定好的键值对，例外：charset、http-equiv link：rel决定类型，href决定引入地址 script：type指定MIME类型；可内嵌代码，可外链文件

body

HTML body 功能性标签

HTML ARIA

了解ARIA并非只是为了供盲人阅读，可以为我们设计UI系统提供指导意义。

它的结构角色：

可交互组件有：

(二)HTML5

不再是单纯的文本语言

HTML5 语义化标签

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

HTML5 表单增强

HTML5 存储

HTML5 IndexedDB

HTML5 PWA & AMP

PWA: AMP：

HTML5 二进制

HTML5 SVG & Canvas

HTML5 WebAssembly

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