一、前端语言的基本能力

前端三大基础：HTML,CSS,JavaScript 广义上的网页三元素，HTML可以看做骨架，CSS可以看做血肉，JS可以看做行为。

前端三大区别： HTML:创建结构、定义网页的内容 CSS:规定网页的布局、美化网页，使网站样式更丰富 JavaScript：提高交互性、对网页行为进行编程

1.HTML 实例：

HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言。 HTML 不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。 HTML 使用标记标签来描述网页。 HTML 标签是由尖括号包围的关键词。基本语法：标签（元素）Element、文本Text、注释Comment、DTD DOCUMENT Type Defination、处理信息ProcessingInstruction

HTML全部标签分类：文档型，闭合型，换行型，H5新元素 head标签： title——标题，全局唯一 base——向页面所有相对URL提供前缀 ——全局唯一，不建议使用 meta——通常是约定号的键值对、例外（charset,http-equiv) link——rel决定类型，herf决定引入地址 script——type指定MIME类型，可内嵌代码，可外链文件body 功能性标签 ARIA可以为我们设计UI系统提供指导意义 HTML5语义化标签：用对比不用好，不用比用错好

2.CSS 实例：外部样式表 h1{color:blue;font-size:90px;} 内部样式表

body {background-color: red} p {margin-left: 20px} 内联样式

3.JavaScript:

能够改变 HTML 内容

提示：JavaScript 同时接受双引号和单引号

实例：

查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：document.getElementById("demo").innerHTML = "Hello JavaScript";

可通过改变 display 样式来隐藏 HTML 元素：

document.getElementById("demo").style.display="none";

4.HTML5：

语义化

存储/音视频

标签定义声音，比如音乐或其他音频流。

标签定义嵌入的内容，比如插件。

（最好的 HTML 解决方法）

HTML 5 + +

浏览器API

可视化相关

browser

HTTP→构建DOM树→计算CSS树→排版→渲染合成→绘制

其中构建DOM树又细分为head和body，head头部包含meta和title标题，body身体部分包含div块级标签

Web Worker

在主线程中newWorker

在主线程中定义监听器

使用postMessage互传数据

使用terminate销毁线程

二、前端语言的协作配合

CSS in HTML inline class(元素内部添加style属性) internal class(html内部添加style标签) external class(使用link标签链接外部css文件)
JS in HTML 通过script标签引用，需要注意的是：这里定义的都是全局函数，在整个浏览器都可访问到。
事件机制事件捕捉：点击按钮时，click事件从document一直定位到button 事件捕获：定位到button后，click事件会被激发，并层层向外传递使用addEventClickListener的第三个参数来控制监听器被触发的阶段。
事件循环众所周知，js是单线程语言。一个事件循环的流程如下所示：完成所有宏任务(如script代码块，setTimeout等) 完成微任务(Promise) 下面以一段代码来实践这俩的区别 javascript 复制代码 setTimeout(function() { console.log('timeout1'); new Promise(function (resolve) { console.log('promise1_1') resolve() }).then(() => { console.log('then1_2') }) },0)

setTimeout(function() { console.log('timeout2');

new Promise(function (resolve) {
    console.log('promise2_1')
    resolve()
}).then(() => {
    console.log('then2_2')
})
复制代码

},0)

new Promise(function(resolve) { console.log('promise1'); resolve() console.log('promise2'); }).then(function() { console.log('then1'); }).then(function () { console.log('then2') })

console.log('global1'); 首先，执行第一个宏任务：我们在这个代码块前面套一个

HTML in JS 通过传统的DOM API 通过JSX
CSS in JS 通过DOM API 通过jsx 通过jss html5_indexedDB IndexedDB 和 Web Storage（包括 Local Storage 和 Session Storage）都是浏览器提供的客户端存储技术，它们可以让您在用户的浏览器中存储数据。但是，它们之间也存在一些重要的区别。 • 存储能力：Web Storage 的存储能力有限，通常只能存储几兆字节的数据。而 IndexedDB 的存储能力更大，可以存储更多的数据。 • 数据类型：Web Storage 只能存储字符串类型的数据。如果您想要存储其他类型的数据，需要先将其转换为字符串。而 IndexedDB 可以直接存储多种类型的数据，包括字符串、数字、对象、数组等。 • 查询能力：Web Storage 只提供了简单的键值对查询方式，不支持复杂的查询操作。而 IndexedDB 提供了更强大的查询能力，支持索引、游标、范围查询等高级查询功能。 • 事务支持：Web Storage 不支持事务操作。而 IndexedDB 支持事务操作，可以确保数据的完整性和一致性。

前端语言串讲 | 青训营