一、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),从而实现网页的动态更新和交互功能。