一.基本概念

HTML（Hypertext Markup Language）

HTML不是编程语言，而是一种描述性的标记语言,文本标记语言，用于描述网页内容的显示方式，比如文字的颜色、大小，这些都是利用html标记来实现的。

CSS(Cascading Style Sheet)

层叠样式表, 为HTML标记语言提供了一种样式描述即【设置HTML页面中的元素的位置、排版、样式外观等】如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）

JS(Javascript)

js是一种脚本语言，是不需要进行编译的，也是浏览器中的一部分，经常用在web客户端脚本语言，主要是用来给html增加动态功能。

关于浏览器

浏览器分成两部分：

1、渲染引擎（即：浏览器内核）
2、JS 引擎

1、渲染引擎（浏览器内核）

浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是浏览器兼容性问题出现的根本原因也称为 JS 解释器。用来解析网页中的JavaScript代码，对其处理后再运行。

2.JS 引擎

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。

浏览器工作过程

1.地址栏输入地址触发网络请求，获取到html文件。
2.HTML解析器解析HTML文件构建成为DOM树。
3.遇到CSS通过CSS解析器解析成为CSSOM。
4.遇到JS通过JS解析器解析。
5.DOM Tree和CSSOM构建呈现树(6、7两个步骤)。
6.呈现树根据结构样式确定节点的位置(布局或者回流) ----回流。
7.确定好位置以后，根据外观样式绘制 ----重绘。
8.通过UI后台和用户界面组件把内容显示到浏览器主窗口上。

二.协作

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>

Javascript in html

HTML in JavaScript

CSS in JavaScript

三.HTML基本知识

全部标签分类

2.head 标签

3.body 功能性标签

4.HTML5 Audio

创建一个音频上下文
const audioCtx = new (window.AudioContext  window.webkitAudioContext);// 创建一个正弦振荡器0
const osci = audioCtx.createOscillator();
// 创建一个音量增幅器
const gain = audioCtx.createGain();
// 正弦振荡器关联音量增幅器
osci.connect(gain);
// 音量增幅器关联音频上下文的音频输出器
gain.connect(audioCtx.destination);
//开始正弦波动osci.start();

5.HTML5 Video

const mediaSource = new MediaSource();
const video = document.createElement('video');
video.src = mediaSource;
mediaSource.addSourceBuffer(...);
video.play();

ps：学习到了很多，不过一时不能全部了解，有了大致的概念，也有学习的动力了。

前端语言串讲 | 青训营