网页编程基础.ppt

1、网页编程基础,第一章 HTML 第二章 CSS 第三章 JAVASCRIPT 第四章 APPLET,第一章 HTML,在学习动态网站编程之前，首先需要了解网页的基本语言：HTML和CSS。Internet的飞速发展促使了成千上万互联网站的创建，浏览这些网站的时候，看到的是丰富的影像、文字、图片，而这些内容都是通过一种名为HTML的语言表现出来的。对于网页设计和制作人员，尤其是开发动态网站的编程人员来讲，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。 HTML(超文本标志语言)是一种网络上传输数据的协议，专门用于传输WWW上的信息资源，是WWW服务的基础。HTML文件中的各种标记控制着

2、用户看到的显示效果。,第一节 HTML基本元素,1.1.1 标题标记 1.1.2 标题 1.1.3 分段标记 1.1.4 清单标记 1.1.5 预排版文本 1.1.6 块引用 1.1.7 居中,1.1.1 标题标记,HTML文件的标题显示在浏览器的标题栏，用以说明文件的用途。每个HTML文档都应该有标题，在HTML文档中标题文字应位于和标记之间。输写格式如下： 文件题目,1.1.2 标题,标题元素主要用来对标题的字体进行操作的语句，它一共包括6种，分别为h1，h2，一直到h6，用于表示文章中的各种题号。标题号越小，字体越大。,1.1.2 标题,h1特大字体，黑体，居中，上下各有两行空行； h2

3、大字体，黑体，上下各有一到两行空行； h3大字体，黑体（斜体），左端微缩进，上下空行； h4普通字体黑体，比h3更多缩进，上边一空行； h5与h4相同缩进，黑体（斜体），上边一空行； h6与正文有相同缩进，黑体，上边一空行。,1.1.3 分段标记,在HTML中如果有个空格以及回车都只能等同于一个空格，这是因为HTML的浏览器是基于窗口的，用户能够随时改变显示区的大小，这是其它数字处理器没有的功能。但是在HTML中，分段完全依赖于分段标记。,1.1.4 清单标记,清单标记List用来列举事实，常用的清单格式有3种：无序清单（unordered List）、有序清单（ordered list）和定

4、义清单（definition list）。,1.1.5 预排版文本,HTML的输出是基于窗口的，所以HTML文件在输出时都需要重新排版，要是确实已经不需要重新排版的内容，可以用告知浏览器。这样浏览器在输出时，对这部分内容几乎不做修改地输出。,1.1.6 块引用,.7 块引用 块引用主要用于引用，其中的内容都是引用。浏览器内块引用一般为左右缩进，上下各有一空行，还有些浏览器采用斜体字。,1.1.7 居中,居中标记，用于对齐方式属性，如hn、p等，也可以直接用居中链接签。如下例： 居中 让这段文字居中显示！,第二节 HTML的基本表单标记,1.2.1 表单标记 1.2.2 表单输入标记 1.2.3

5、 下拉菜单标记 1.2.4 选项标记 1.2.5 多行文本输入标记,1.2.1 表单标记,标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。基本语法结构如下： actionurlmethod=get|postnamevalueonreset=functiononsubmitfunctiontarget=window,1.2.2 表单输入标记,此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下： ,1.2.3 下拉菜单标记,标记用于在表间中插入一个下拉菜单，因为下拉菜单中的每个选项都要用标记来定义，所以它要和标记联用。语法如下： ,1.2.4 选项标记,该标记

6、为下拉菜单中一个选项，语法如下： ,1.2.5 多行文本输入标记,标记是一个建立多行文本输入框的专用标记，它的语法如下： ,第三节 HTML的基本表格标记,1.3.1 表格的基本形式 1.3.2 表的大小，边框宽度，表格间距 1.3.3 表中文本的输出 1.3.4 浮动表格 1.3.5 表格颜色,1.3.1 表格的基本形式,HTML中对表的操作由开始，由结束，表的内容由，和定义。其中用来说明表的行，那么表中有多少行就会有多少个；其中的用来说明表的列数和相应栏目的名称，那么有多少个栏就会有多少个；而则用于填充由和组成的表格。用border属性说明是否用表格线将表格内容分开为许多部分。,1.3.2

7、 表的大小，边框宽度，表格间距,(1) HTML中表的大小用width属性和height属性说明。width为表宽，height为表高； (2) HTML中边框宽度由border属性说明，后面加设定的宽度值，单位是象素； (3) 表格的间距用cellspacing属性表示，后面跟的单位是象素。,1.3.3 表中文本的输出,文本与表框的距离用cellpadding属性说明。其中： (1) 文本长度小于表格的宽度时，文本在其中的输出位置与用align属性说明； (2) 其中的属性包括left，center和right三者之一，分别表示左对齐，居中和右对齐，align属性可以修饰，和链接签； (3)

8、 文本的高度小于表格的高度时，可以用valign属性说明文本在其中的位置。它包括的属性有top，middle，bottom，baseline四种。分别表示上对齐，文本中线与表格中线对齐，下对齐，文本基线与表格中线对齐，特别注意的是baseline对齐方式，它使得文本出现在网格的上方而不是想象中的下半部。同样，valign可以修饰，中的任何一个。,1.3.4 浮动表格,浮动表格是表与文件中内容对齐时，若在现在位置上不能满足对齐方式，表格会“挤开”一些内容，直到满足其对齐要求。浮动属性一般由align=left或right指定。,1.3.5 表格颜色,HTML中表格也有颜色属性，可以用bgcolo

9、r属性指定。 后面可以跟16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量。或者是16种已定义好的颜色名称。,第二章 CSS,CSS是（层叠样式表单）的简称。CSS中允许在HTML文档中加入样式。 其实要编写一个CSS文件和编写HTML文档的方法是一样的，在Windows下的记事本和写字板、专门的HTML文本编辑工具（Frontpage、Ultraedit等）之中都可以进行编写。,第一节 字体、文本、颜色和背景属性,2.1.2字体属性 2.1.2 颜色和背景属性 2.1.3 文本属性,2.1.2字体属性,字体属性是最基本的属性，很多的时候要会用到它。,2.1.2 颜色和背景属性

10、,2.1.3 文本属性,第二节 装饰超链接,链接中还没有访问过的链接是蓝色文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。但如果所有的都是这样的一个样式，就比较单调了。,第三章 JAVASCRIPT,在网页中有时候要嵌入其它的技术，如：JavaScript、VBScript、Document Object Model（文件目标模块）、Layers和Cascading Style Sheets（CSS），为了使网页能够具有交互性，能够包含更多活跃的元素，下面主要学习其中最主要的JavaScript。 JavaScript是由Netscape公司开发的一种脚本语言（scri

11、pting language），也称为描述语言。使用JavaScript可以使HTML开发交互式Web网页。,第一节 JAVASCRIPT的概述,3.1.1 JavaScript的基本概念 3.1.2 JavaScript的运行环境,3.1.1 JavaScript的基本概念,JavaScript的基础有以下几部分： 1.运算符 运算符是用来完成运算操作的一系列符号，它包括七类：算术运算符、赋值运算符、条件运算、比较运算符、逻辑运算符、位操作运算符和字符串运算符。 2.表达式 用运算符连接起来的式子称为表达式，通常分为四类：算术表达式、赋值表达式、布尔表达式和字符串表达式。 3.语句 语句是编

12、写程序的指令，JavaScript程序是由若干语句组成的。JavaScript提供了完整的基本编程语句，如下：赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语句和continue循环中断语句。 4.函数 函数是命名的语句段，这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点： (1) 函数由关键字function定义； (2) 函数必须先定义后使用，否则将出错； (3) 函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名。 5.对象 在JavaScript中对一组包含数据的属性和对属性中包含

13、数据进行操作的方法，称为对象。比如设定背景颜色，它所针对的对象就是document，所用的属性名是bgcolop，如document.bgcolor=green，就是表示使背景的颜色为绿色。 6.事件 这里所说的事件是用户与网页交互时产生的操作，由用户的动作所引发，比如按鼠标的按钮时就产生onclick事件，又如鼠标的指针的链接上移动，就产生on mouse over事件等等。,3.1.2 JavaScript的运行环境,浏览器中的Netscape公司的Navigator2.0以上版本的浏览器，都有处理JavaScript源代码的能力。JavaScript在其中实现了它的1.0版本，并在后来的

14、Navigator 3.0实现了它的1.1版本，到现在推出的Navigator 4.0(Communicator)中，JavaScript在其中实现了它的1.2版本。 微软公司也从它的InternetExplorer3.0版就开始支持JavaScript。微软把自己实现的JavaScript规范叫做JScript。这个规范与Netscape Navigator浏览器中的JavaScript规范是一致的，但是在个别的对象实现方面还有一定的差别。,第二节 JAVASCRIPT的数据结构和类型,3.2.1 JavaScript的基本数据结构 3.2.2 JavaScript的基本数据类型,3.2.1

15、 JavaScript的基本数据结构,JavaScript代码的加入： JavaScript与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。可以直接将JavaScript脚本加入文档： . JavaScript 语言代码:,3.2.2 JavaScript的基本数据类型,JavaScript也有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。 在JavaScript中用四种基本的数据类型处理数字和文字，其中变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。,第三节 JAVASCRIPT的使用,3.3.1 JavaScript在网页的用法 3.3.

16、2 JavaScript中的事件驱动及事件处 3.3.3 JavaScript中的对象的使用 3.3.4 JavaScript中的数组,3.3.1 JavaScript在网页的用法,其实JavaScript加入网页有两种方法：直接加入HTML文档，这是最常用的方法，大部分含有JavaScript的网页都采用这种方法，如： ,3.3.2 JavaScript中的事件驱动及事件处,JavaScript与Java不同，Java是面向对象的语言，而JavaScript是基于对象的语言。而基于对象的基本特征，就是采用事件驱动。它是在图形界面的环境下，使一些输入变化简单化。通常鼠标或热键的动作称之为事件，

17、而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。而对事件进行处理程序或函数，称之为事件处理程序。,3.3.3 JavaScript中的对象的使用,JavaScript没有提供如抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。 虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。,3.3.4 JavaScript中的数组,JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用new对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。,第四章 APPLET,Applet是用Java语言编写的一些小应用程序，可以直接嵌入到网页中，并能够产生特殊的效果。包含Applet的网页被称为Java-powered网页。 当用户访问这样的网页时，Applet被下载到用户的计算机上执行，但前提是用户使用的是支持Java的网络浏览器。由于Applet是在用户的计算机上执行的，因此它的执行速度不受网络带宽或者Modem存取速度的限制，用户可