html,css,javascript在制作网页中的作用是什么?三者之间有何种联系?

html-css011

html,css,javascript在制作网页中的作用是什么?三者之间有何种联系?,第1张

HTML、 CSS、 JavaScript三者的关系

网页主要由三部分组成: 结构( Structure) 、 表现( Presentation) 和行为( Behavior)

HTML —— 结构, 决定网页的结构和内容( “是什么”)

CSS —— 表现( 样式) , 设定网页的表现样式( “什么样子”)

JavaScript( JS) —— 行为, 控制网页的行为( “做什么”)

一、 HTML语言

1.1什么是HTML语言( HTML概述)

英文全称: Hyper Text Markup Language

中文全称: 超文本标记语言

HTML 语言是制作网页的最基本语言, 并且只能通过web浏览器显示出来。

Hyper( 超) :

用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。

Text( 文本) :

HTML是一种文本解释性的程序语言, 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。

Markup( 标记) :

HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。

1.2 HTML文档结构

HTML文档一般由两部分组成:

1. 文档所要表达的内容信息( 文字、 图片等) ;

2. 一系列的HTML标签;

1.3 HTML标签

1.3.1 什么是HTML标签

1. HTML标签是用 <>所括住的指令, 主要分为:

单标签: <起始标签/>

双标签: <起始标签></结束标签>

例如:

<br/>

<div></div>

2. 通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。

<div>标签内容</div>

3. 在元素的起始标签中, 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。

<div 属性名="属性值"></div>

例如:

<div class="wrap" id="wrap"></div>

4. 每一对双标签之间可以嵌套, 但不能交叉。

正确示例:

<div>

<p></p>

</div>

错误示例:

<div>

<p>

</div>

</p>

1.4 编码器

1.4.1 WebStorm源码主体标签含义

<!DOCTYPE>:

是一个声明不是 HTML 标签; 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。

<html>:

<html>是文档标识符, 它是成对出现的, 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面, 明确地表示文档是以超文本标识语

言( html)编写的。 该标签不带有任何的属性。

<head>:

<head>标签用于定义文档的头部, 它是所有头部元素的容器。 <head>中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。

<meta>:

<meta>标签位于文档的头部, 用于定义文件信息, 对网页文件进行说明。 其中name属性主要用于描述网页, 与之对应的属性值为content, content中

的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<body>:

<body>标签用于定义文档的主体, 即在浏览器上看到的网页内容。

HTML,CSS,JavaScript 分别是什么?

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

一、HTML—Hypertext Markup Language。

结构(structure)——决定网页的结构及内容,即“显示哪些内容”

超文本标记语言。它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(比如文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容。

HTML文本中包含了所谓的“链接点”HTML利用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。总的来说,HTML就是整合网页结构和内容显示的一种语言。

二,CSS—Cascading Style Sheet,

表现(presentation)——设计网页的表现样式,即“如何显示有关内容”

层叠样式表单。是将样式信息与网页内容分离的一种标记语言。我们在牛腩新闻发布系统中,我们使用过CSS文件,对一些标签的样式进行修改。

我们使用CSS为每个HTML元素定义样式,也可以用于多个界面。进行全局更新时,只需修改样式即可。

body { border :1px solid #000/整体的边框/ font-size :14px}

CSS就是设置网页上HTML元素属性的语言。

3、Javascript

行为(behavior)——控制网页的行为(效果),即“内容应该如何对事件做出反应”

Java是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。例如可以设置鼠标悬停效果,在客户端验证表单,创建定制的HTML页面,显示警告框,设置cookie等等。

function jsHello{ alert(‘Hello World!’)}

把代码嵌入HTML语言中,它会在加载时弹出一个“Hello World”对话框。

最先需要学习的是 HTML,HTML 是开发设计网页页面最基础的语言表达,CSS 和JavaScript 的使用是根据 HTML 的,因此务必先学习培训 HTML,将网页页面的基本上框架搭建下去,在使用 CSS 开展装饰。学习培训 HTML 以后,在开展 CSS 的学习培训,或是二者同时进行学习培训。如果将 HTML 构建的网址比成是毛胚房,那样 CSS 便是对它开展室内装修。

CSS 是用于变更款式设计方案的,装饰网址,提高客户体验度。最终学习培训 JavaScript。JavaScript 用于界定网页页面的个人行为,提高网页页面的互动性。在我们将一个房屋装修完成后,就必须考虑到其程序模块,也就是想让它完成哪种实际操作。HTML、CSS、JavaScript 三门语言表达的学习培训并没分为很清楚的主谓层级,完全可以交叉学习培训,提升印像,且可以让你更快的知道源代码的应用。

但是需要注意的是,大家学习时必须从最基础的英语的语法标识开始学习,循序渐进,提高学习效率。如果只是做一个静止的网页页面,上边的是彻底足够了,可是假如想要做动态性的,这个时候就要逐渐学习php了。 新手入门php相比于JS会更不便一些, 由于运作php必须有许多关键点要解决, 因此一本好的入门书籍是非常重要的, 这一w3school上面的php帮不上什么忙了。

入掌握JavaScript:因为你是想倾向于前端工程师,因此务必深入了解JavaScript,对JavaScript原型链、功效域链、程序设计模式都深入分析。多参照顺利的OOP程序设计模式,多研究框架源代码:如jQuery、prototyp、Ext等,都会有非常好的研究价值。