html css javascript 关系,HTML~CSS~JavaScript关系

首先应该明确，一个网页由三部分组成：结构，表现和行为。而html，css，javascript分别对应网页的三部分。

HTML：超文本标记语言(英语：HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言。由浏览器来解析。HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页，这也是html作为网页结构的原因。HTML文档也叫做 web 页面。

html由两部分组成，一系列标签(对网页结构骨架的标识)和网页的具体内容。

标签，由尖括号(<>)构成，表现为两种：

单标签：

双标签： 结束标签>

例如：

声明为 HTML5 文档

元素是 HTML 页面的根元素

元素描述了文档的标题 元素包含了可见的页面内容

元素定义一个大标题

元素定义一个段落

利用菜鸟教程的网页在线编辑器，展示html对网页的结构的定义，如下所示：

代码部分：

html结构代码.PNG

效果展示：

html效果展示.PNG

CSS：用于对html元素的渲染，是对网页表现风格的控制。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：

选择器：通常是需要改变样式的 HTML 元素。

声明：由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。声明总是以分号(;)结束，声明组以大括号({})括起来。

一般在编程中，为了方便操作html元素，每个元素都有id值，同样，CSS可以根据元素的id值对元素进行操作，CSS 中 id 选择器以 "#" 来定义。

在上图代码中，在网页结构的head与body之间加入标题和段落的风格设置，代码如下:

CSS代码示例.PNG

效果如下：

CSS效果.PNG

javascript：是对网页行为的控制，最简单的：如我们点击一个按钮触发事件。

下面的代码中在

按钮.PNG

点击前效果：

点击前.PNG

点击后效果:

点击后.PNG

总而言之，html+CSS+javascript组成了网页，三者关系：

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 网页的行为

下面是ECMAScript6.0的学习之旅