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

html-css049

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>标签用于定义文档的主体, 即在浏览器上看到的网页内容。

1.HTML5的概述HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其他标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup(Web超文本应用技术工作组,WHATWG)的组织。

WHATWG致力于Web表单和应用程序,而W3C(WorldWideWebConsortium,万维网联盟)专注于XHTML2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML。

HTML5是HTML下一个主要的修订版本,现在仍处于发展阶段。目标是取代1999年所制定的HTML4.01和XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。

广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(Plug-in-basedrichInternetApplication,RIA),如AdobeFlash、MicrosoftSilverlight,与OracleJavaFX的需求,并且提供更多能有效增强网络应用的标准集。

网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。

网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

元素:

感知信息

文本:文本是网页上最重要的信息载体和交流工具,网页中的主要信息一般都以文本形式为主。

图像:图像元素在网页中具有提供信息并展示直观形象的作用。

静态图像:在页面中可能是光栅图形或矢量图形。通常为GIF,JPEG或PNG;或矢量格式,如SVG或Flash。

动画图像:通常动画为GIF和SVG。

三、Flash动画:动画在网页中的作用是有效地吸引访问者更多的注意。

四、声音:声音是多媒体和视频网页重要的组成部分。

五、视频:视频文件的采用是网页效果更加精彩且富有动感。

六、表格:表格是在网页中用来控制面业信息的布局方式。

七、导航栏:导航栏在网页中是一组超链接,其连接的目的端是网页中重要的页面。

八、交互式表单:表单在网页中通常用来联系数据库并接受访问用户在浏览器端输入的数据。利用服务器的数据库为客户端与服务器端提供更多的互动[2]  。

互动媒体

页面上的:

交互式文本:DHTML。

互动插图:例如“点击此处玩耍该游戏”。

按钮:例如“百度一下”。

超链接:超链接是从一个网页指向另一个目的端的链接,超链界的目的端可以是网页,也可以是图片、电子邮件地址、文件和程序等。(标准的“换页”反应。分为URL、URI、URN)。

内部信息

一、注释。如:

<!--百度百科词条中的参数实体。-->   

二、通过超链接链接到某文件(如DOC,习,SGML等)。

三、元数据与语义的元信息,字符集信息,文件类型描述(DTD),等等。

四、样式信息:提供的项目的信息(如图像大小属性)和视觉规范,层叠样式表(CSS)、文档样式的语义和规范语言(外语全称:Document Style Semantics and Specification Language、外语缩写:DSSSL)。

五、脚本,通常是爪哇脚本(JavaScript),提供交互性以及相关功能的补充(比如倒计时关闭窗口等)。

网页还包含动态适应的信息元素,取决于某某渲染浏览器或最终用户的位置。(通过使用IP地址跟踪和/或“cookie”的信息)。从更一般/宽的角度来看,一些信息(分组)的元素,像一个导航栏,所有的网页是统一的,像一个标准,比如“网页模板系统”。