HTM
HTML 是一种相当简单的、由不同元素组成的 标记语言 ,它可以应用于==文本== 片段,使文本在文档中具有不同的含义。
比如:
ul 标签修饰的文本,代表文本是一个项目列表;
p 标签修饰的文本,代表文本是一个段落;
table 标签修饰的文本,代表文本是一个表格;
HTML —— 用于定义一个网页结构的基本技术。HTML 用于表示网页的内容,该内容应该被理解为段落、列表、头部、链接、图像、多媒体播放器、表单等。
CSS
CSS,即指层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
HTML 用于定义内容(内容指段落、表格或者列表等)的结构和语义, CSS 用于页面设计风格和布局。比如,可以使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果。
-----内容来自MDN
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. 第三方框架和库 —— 用来快速构建网站和应用。
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),可以达到修改页面的布局、样式以及内容的目标。
HTML、CSS、JS和DOM的关系
-
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
-
过可编程的DOM对象,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有 事件 做出反应
一句话总结:JavaScript通过HTML DOM接口,可以动态操作HTML元素和CSS样式,达到页面出现动态变化的效果。