一：基础篇

前端语言三剑客：HTML，JS，CSS

1. HTML（Hypertext Mark Language）：超文本标记语言；构建框架结构（控制内容布局，提供层次结构）

2. CSS（Cascading Style Sheets）：层叠样式表；为网页添加样式，适配不同的屏幕，尺寸，是网站外表和体验的重要工具

3. Javascript：一种具有函数优先的轻量级，解释型或即时编译型的编程语言；网页的灵魂，可以处理函数，保证网站的可用性，交互性

浏览器引擎：渲染引擎和Javascript引擎

在浏览器中，网页的呈现需要浏览器渲染引擎和JS引擎共同完成。浏览器渲染引擎用于将HTML和CSS等代码转换成浏览器能够理解的网页形式，JS引擎则用于处理页面中的JavaScript代码。

二：语言之间的协同配合

CSS/JS in HTML

1.CSS in HTML

三种CSS应用方式：

①内联式（Inline）：写于标签内利用style 或在标签中使用 onclick 等事件属性添加样式；

②内部样式表（Internal Stylesheet）：在 HTML 的头部利用style标签内定义 CSS 样式；

③外部样式表（External Stylesheet）：将 CSS 样式代码保存到一个独立的 .css 文件中，并在 HTML 头部标签link引入，较为常用。

2.JS in HTML

利用script标签，script标签中可以编辑函数，脚本；script默认定义在全局。

JS中的事件机制： 先完成全部的宏任务，再将微任务队列中任务取出完成，再将宏任务队列中任务取出完成。

HTML/CSS in JavaScript

在JavaScript中操作HTML和CSS是通过DOM（文档对象模型）实现的。DOM允许JavaScript通过编程的方式改变HTML元素的结构、样式和内容。

1.HTML in JavaScript

主要用于动态修改HTML内容，主要使用方法有：基于Mustache，利用script标签，JSX技术等；

2.CSS in JavaScript

可以直接修改元素的 style属性来改变其样式属性,vue中直接利用template样式直接修改格式。CSS Moudle可以解决命名冲突问题，JSS中可以直接定义样式，然后引入。

三、HTML

1.HTML中的标签

2.HTML5

HTML5 引入了许多新的功能和 API，为 Web 开发提供了更多的能力和更丰富的用户体验。

1. 语义化标签：HTML5 引入了一些新的语义化标签，如 <header>、<footer>、<nav>、<article>、<section> 等，使开发者能够更准确地描述文档的结构，同时提升了网页的可访问性和 SEO 优化能力。

2. 视频和音频：HTML5 引入了 <video> 和 <audio> 标签，使得在网页上直接嵌入视频和音频变得更加简单与灵活，无需依赖于插件（如 Flash），支持更多的媒体格式。

3. 表单增强：HTML5 提供了一些新的表单元素和属性，如 <input type="date">、<input type="email">、<input type="number"> 等，使得开发者能够更方便地输入和验证用户的数据。

4. 本地存储：HTML5 提供了 localStorage 和 sessionStorage API，使得在浏览器端可以方便地进行本地数据的存储和读取，不再依赖于 cookie。

SVG&CANVAS

SVG：不易失真，支持事件处理，难以用于游戏，绘制方式为draw（素描）

CANNVAS：易失真，不支持事件处理，多用于游戏，绘制方法为paint（油画）