一、前端语言的基本能力
前端的基本语言包括：HTML 、CSS、 JavaScript
对于网页来说，HTML是骨骼，它负责描述网页的骨架。CSS是外形，它负责描述网页的样式。JavaScript是肌肉，它负责网页和用户之间的交互行为。
二、前端语言的协作配合
HTML 、CSS、 JavaScript并不是割裂的，而是紧密相连的，它们是你中有我我中有你的关系。
在HTML中
在style标签中，可以书写CSS样式；在script标签中，可以书写JavaScript代码。下面举个小例子：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 一句话都不愿意写,懒!.. -->
<div></div>
<script>
console.log('hello world')
</script>
</body>
</html>
```
在网页中我们放了一个div盒子，我们用css设置了他的宽高以及背景颜色，然后让他再页面中水平居中。我们用js代码输出了一局hello world，打开网页可以在控制台看到输出。
在JavaScript中
我们可以在js代码中修改元素的css样式，也可以创建/删除HTML结构，以及修改标签上的属性。
还是上面那个例子，我们可以加上这么一句话，给div盒子设置一个类名。
```
document.querySelector('div').className = 'box'
```
用document.querySelector选中页面上第一个div元素，然后将他的类名设置为box。
如果你想创建一个元素，你可以这么做：
```
// 创建一个div元素
let x = document.createElement("div")
// 将他插入到body的最后
document.body.append(x)
// 创建一个span元素
let y = document.createElement("span")
// 插入body内，div的前面
document.body.insertBefore(y,x)
```
当然，现在开发大多数都是用react函数式编程了，原生js用的没有那么多了。下面是react创建dom的一个小demo。
小白注意下，这个要引入这两个js文件（div下面那两行），如果没有引入是操作不了的。如果你在react项目中操作，则需要用下面这两行引入。
```
import React from 'react';
import ReactDOM from 'react-dom/client';
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
const title = React.createElement('h1',{title: '我是标题'},'hello react',React.createElement('span',null,'我是span标签'))
// 第一个参数是要创建的元素，第二个是标签的属性 若无可写null 第三及以后参数是元素的节点
// 上面介绍的创建元素的方法了解即可，JSX的语法创建dom元素用的比较多，如下。效果跟上面那一行一模一样。
// 需要注意的是 () 只是用来防止报错的，并不是必须添加
const title = (<h1 title: '我是标题'> 'hello react <span>我是span标签</span></h1>)
// ReactRoot.render(title,document.getElementById(root)) 不要这样写，这是低版本的写法，高版本跑不了 会报错！
const container = document.getElementById('root'); // 拿到根元素
const root = ReactDOM.createRoot(container); // 创建根元素容器
root.render(title) // 将前面创建好的title挂载到root里面
// ReactDOM.createRoot(document.getElementById('root')).render(title) 这一行跟上面三行一样的意思
</script>
</body>
</html>
```
三、你不知道的HTML（5）
HTML并非图灵完备，他只是一门标记语言。
我并不太了解这些技术，所以只根据网上的资料做一个简单的概括
关于Aria开头的标签：aria 英文全称：Accessible Rich Internet Application，翻译成中文就是：可访问的富互联网应用程序。其实它是一组属性，定义了使残疾人更容易访问 web 内容和 web 应用程序（尤其是使用JavaScript开发的应用程序）的方法。这类属性的作用是为了增强网页在残障辅助阅读设备上的识别读取。aria 是一种比较新的辅助访问技术，用来弥补 HTML 和 JS 本身对可访问性方面的不足。
H5语义化标签：能让开发者和搜索引擎都更好的认识页面的结构。
PWA：Progressive Web Application，全称“渐进式网页应用”，是谷歌主导的一种新时代网页（应用）。简单的理解，就是你的网页，可以通过某种方式达到离线使用
AMP（加速移动页面）是一个由Google与Twitter合作开发的开源框架，它提供了一种直接的方式来创建轻量级的网页，以便用户即时使用，获得了极大改善的体验：内容更快，更具吸引力，更易于阅读。从本质上讲，AMP框架允许我们通过简化HTML和简化的CSS规则来为移动设备构建轻量级体验。
关于浏览器储存：cookie(4kb) Web Storage(5-25MB) IndexedDB(50MB之间)
关于媒体标签：video： 视频标签 ，audio ：媒体标签。这两个标签相关的api蛮多的，网页直播就可以用他们相关的api实现。
二进制支持：历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成Base64编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript5引入了Blob对象，允许直接操作二进制数据。
HTMLAPI：Geolocation接口 ：是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许网站或应用基于用户的地理位置提供定制的信息。Drag& Drop API：用于元素的拖拽
WebWorker：是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
WebSocket：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
shadow DOM：Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。
SVG&canvas：SVG是矢量图，canvas是一个H5的标签。Canvas API 提供了一个通过JavaScript 和 HTML的``元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
WebGL&WebGPU：这俩是做3D绘图的
WebAssembly： 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。
四、拓展交流
web的优点：对用户、开发者友好 ，领域成熟度高
未来的方向：大前端，低（无）代码开发
省流：web前途无量，“javascript是世界上最好的语言”（狗头）
