网页可以分为三部分,HTML、CSS、JavaScript,HTML 定义了网页的内容和结构,CSS 描述了网页的布局,JavaScript 定义了网页的行为,三者结合起来才能形成一个完整的网页。
1.HTML
全称Hyper Text Markup Language,即超文本标记语言,是网页中的文字、按钮、图片、视频等各种复杂元素基础构架。不同类型的文字通过不同类型的标签来表示,如图片用img标签,视频用video标签,段落用p标签,他们之间的布局通常通过布局标签div嵌套组合而成,各种标签通过不同的排列和嵌套形成了网页的框架。
节点及节点关系
在HTML中所有标签定义的内容全都是节点,他们构成了一个HTML DOM树。
DOM,全称Document Object Model,即文档对象模型。它定义了访问HTML和XML的标准:
W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM标准被分为3个不同的部分
核心DOM - 针对任何结构化文档的标准模型
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对HTML文档的标准模型
根据W3C的HTML DOM 标准,HTML文档中的所有内容都是节点:
整个文档是一个文档节点
整个HTML元素是一个元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
HTML DOM将HTML文档视作树结构,这种结构称为节点树,如图:
通过HTML DOM,树中所有节点均可通过JavaScript进行访问,所有HTML节点元素均可被修改,也可被创建或删除。
节点树中的节点彼此拥有层级关系。常用parent(父)、child(子)和sibling(兄弟)等术语描述这些关系。父节点拥有子节点,同级的子节点被称为兄弟节点。
在节点树中,顶端节点被称为根(root),除了根节点之外每个节点都有父节点,同时拥有任意数量的子节点或兄弟节点。
节点树及节点之间的关系:
2.CSS
HTML定义了网页的结构,只有HTML的页面布局可能只是简单的节点元素的排列,为了让网页更好看就需要借助CSS了。
CSS全称Cascading Style Sheets,即层叠样式表。“层叠”是指当在HTML中引用了数个样式文件,并且样式发生冲突时,浏览器能够依据层叠样式处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。
选择器
网页由一个个的节点组成,CSS选择器会根据不同节点设置不同的样式规则,那如何定义是哪些节点?
在CSS中是使用CSS选择器选择定位节点,CSS选择器语法规则:
另外还有一种比较常用的选择器是 XPath。
3.JavaScript
简称JS,是一种脚本语言,HTML与CSS配合使用,提供给用户的只是一种静态信息,缺少交互性。网页中的交互和动画效果,如下载进度条,提示框,轮播图等,通常是JavaScript的功劳。它使得用户与信息之间不止是一种浏览与显示的关系,而是一种实时、动态、交互的页面功能。