【浏览器学习之旅☞】HTML，CSS, JavaScript 和DOM

HTM

HTML 是一种相当简单的、由不同元素组成的 标记语言 ，它可以应用于==文本== 片段，使文本在文档中具有不同的含义。

比如：
ul 标签修饰的文本，代表文本是一个项目列表;
p 标签修饰的文本，代表文本是一个段落;
table 标签修饰的文本，代表文本是一个表格;

HTML —— 用于定义一个网页结构的基本技术。HTML 用于表示网页的内容，该内容应该被理解为段落、列表、头部、链接、图像、多媒体播放器、表单等。

学习资料连接：MDN， 菜鸟教程，W3Cschool

CSS

CSS，即指层叠样式表(Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。
HTML 用于定义内容（内容指段落、表格或者列表等）的结构和语义， CSS 用于页面设计风格和布局。比如，可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
-----内容来自MDN

学习资料连接：MDN, 菜鸟教程, W3Cschool

JavaScript

JavaScript（缩写：JS） 是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性，例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

 A. 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功 能，比如：动态创建 HTML 和设置 CSS样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。 
 B. 第三方 API ——让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
 C. 第三方框架和库 —— 用来快速构建网站和应用。

学习资料连接：MDN， 菜鸟教程， W3Cschool

DOM（这里指HTML DOM，当然还有XML DOM，这里暂不提及）

A. 文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。
B. 脚本或编程语言通常是指 JavaScript语言，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。
C. DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以 改变 文档的结构、样式或者内容。
E. 节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。----内容来自 菜鸟教程

总结： 开发者通过DOM接口操作逻辑树（即操作HTML），可以达到修改页面的布局、样式以及内容的目标。

学习资料连接：MDN，菜鸟教程，W3Cschool

HTML、CSS、JS和DOM的关系

1. HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2. 过可编程的DOM对象，JavaScript 获得了足够的能力来创建动态的 HTML。

   • JavaScript 能够改变页面中的所有 HTML 元素
   • JavaScript 能够改变页面中的所有 HTML 属性
   • JavaScript 能够改变页面中的所有 CSS 样式
   • JavaScript 能够对页面中的所有 事件 做出反应

一句话总结：JavaScript通过HTML DOM接口，可以动态操作HTML元素和CSS样式，达到页面出现动态变化的效果。