一、HTML
中文名：超文本标记语言 英文名：HyperText Markup Language
HTML是一种用来结构化Web网页及其内容 的标记语言。
HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。
图Ⅰ
每个元素 中都可以有自己的一些属性
图Ⅱ
二、CSS
中文名：层叠样式表 英文名：Cascading Style Sheets
CSS的作用是选择性地控制HTML元素的视觉外观。
CSS有三个特性：继承、层叠、特指度
· 继承：子元素会继承父元素的样式
· 层叠：假如多个特指度相同的Selector都给一个元素应用了样式，那么后定义的规则就会覆盖先定义的规则
· 特指度：可以大致理解为Selector对元素指定的一种详细程度 e.g.: p{...} 和 p.emphasize{...}
图Ⅲ
三、JavaScript
JavaScript是一种脚本语言/编程语言，无需编译，直接执行。
JavaScript通过操作DOM动态修改页面。
四、DOM
中文名：文档对象模型 英文名：Document Object Model
DOM是一种处理HTML和XML文件的标准编程接口。（本文只讨论 HTML DOM）
在网页中，HTML文件会被浏览器解析并构建成一个DOM（文档对象模型）树。
图Ⅳ
可以看到，DOM提供了对整个文档的访问模型，将文档作为一个树形结构 ，树的每个结点元素表示了一个HTML标签 或标签内的文本 亦或标签内的属性 。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现 。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
通过图Ⅳ我们可以看到：
① 元素：每一个小长方形方格内都是一个元素，DOM中的元素可以看作是对象。
② 节点：在DOM树中，标签、属性、属性都可以是节点。
③ 文档：一个网页就对应一个文档(Document)。
文档的根元素是<html>，内部通常包含<head>和<body>两个子元素，包含了文档的所有其他元素和内容。
Document对象代表了整个网页的文档 ，你可以通过浏览器的DOM接口【 Chrome浏览器：在页面元素上右键点击，选择"检查"或"审查元素"，即可打开**】**来访问和操作这个文档对象（即DOM树中的节点），从而实现与网页的交互和动态更新。
DOM元素：是浏览器解析HTML文档后，在内存中构建的一个树状结构中的节点，这些节点与HTML中的元素一一对应。
如何理解DOM中的元素可以看作是对象？
在DOM（文档对象模型）中，每个HTML元素都被视为一个对象 ，这些对象具有属性和方法，可以被JavaScript等脚本语言动态地访问和操作。
所以当DOM树被成功构建后，我们可以通过构建起的DOM树，获得其中的元素节点(图Ⅳ方框中有Element单词的节点)，将其看作是对象，利用对象的属性和方法，对其进行一些操作~
五、总结
HTML来定义网页的结构和内容；CSS来美化网页的外观和布局；JavaScript来实现网页的交互功能和动态效果；其中DOM是连接HTML、CSS和JavaScript的桥梁，JavaScript通过DOM可以访问和操作HTML元素及其样式（CSS），从而实现网页的动态更新和交互功能。