网页编程基础.ppt

《网页编程基础.ppt》由会员分享，可在线阅读，更多相关《网页编程基础.ppt（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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大字体，黑体，上下各有一到两行空行；h3大字体

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

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

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

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

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

8、齐，文本中线与表格中线对齐，下对齐，文本基线与表格中线对齐，特别注意的是baseline对齐方式，它使得文本出现在网格的上方而不是想象中的下半部。同样，valign可以修饰，中的任何一个。1.3.4 浮动表格浮动表格是表与文件中内容对齐时，若在现在位置上不能满足对齐方式，表格会“挤开”一些内容，直到满足其对齐要求。浮动属性一般由align=left或right指定。1.3.5 表格颜色HTML中表格也有颜色属性，可以用bgcolor属性指定。后面可以跟16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量。或者是16种已定义好的颜色名称。第二章 CSSCSS是（层叠样式表单）的简称

9、。CSS中允许在HTML文档中加入样式。其实要编写一个CSS文件和编写HTML文档的方法是一样的，在Windows下的记事本和写字板、专门的HTML文本编辑工具（Frontpage、Ultraedit等）之中都可以进行编写。第一节 字体、文本、颜色和背景属性2.1.2字体属性2.1.2 颜色和背景属性2.1.3 文本属性2.1.2字体属性字体属性是最基本的属性，很多的时候要会用到它。属性属性属性含属性含义义属性属性值值Font-family使用什么字体所有的字体Font-style字体是否斜体Normal、italic、obliqueFont-variant字体是否用粗体大写Normal、sm

10、allcapsFont-weight定义字体的粗细Normal、bold、bolder、lithter等Font-size定义字体的大小Absolute-size、relative-size、length、percentage等。2.1.2 颜色和背景属性属性属性属属 性性 含含义义属性属性书书写格式写格式属性属性值值Color定义前景色例：p color：red颜色Background-color定义背景色例：body background-color：yellow颜色Background-image定义前景图案例：body background-image：url（.jpg）图片路径Bac

11、kground-repeat背景图案重复方式例：body background-repeat：repeat-yRepeat-x、repeat-y、norepeatBackground-attachment设置滚动例：body background-attachment：scrollScroll FixedBackground-position背景图案的初始位置例：body background：url（.jpg）top centerPercentage、length、top、left、right、bottom等2.1.3 文本属性属性属性属性含属性含义义属性属性值值Word-spacing定义

12、了各个单词之间的间距Normal（必须以长度为单位）Letter-spacing定义了每个字母之间的间距同上Text-decoration定义文字的“装饰”样式None|underline|overline|line-through|bqinghuaVertical-align定义了元素在垂直方向上的位置Baseline|sub|super|top|text-top|middle|bottom|text-bottom|Text-transform使文本转换为其它形式Capitalize|uppercase|lowercase|noneText-align定义了文字的对齐方式Left|right

13、|center|justifyText-indent定义文本的首行的缩进方式|Line-height定义了文本的行高Normal|第二节 装饰超链接链接中还没有访问过的链接是蓝色文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。但如果所有的都是这样的一个样式，就比较单调了。第三章 JAVASCRIPT在网页中有时候要嵌入其它的技术，如：JavaScript、VBScript、Document Object Model（文件目标模块）、Layers和Cascading Style Sheets（CSS），为了使网页能够具有交互性，能够包含更多活跃的元素，下面主要学习其中最主

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

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

16、错函数名。5.对象对象在JavaScript中对一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如设定背景颜色，它所针对的对象就是document，所用的属性名是bgcolop，如document.bgcolor=green，就是表示使背景的颜色为绿色。6.事件事件这里所说的事件是用户与网页交互时产生的操作，由用户的动作所引发，比如按鼠标的按钮时就产生onclick事件，又如鼠标的指针的链接上移动，就产生on mouse over事件等等。3.1.2 JavaScript的运行环境浏览器中的Netscape公司的Navigator2.0以上版本的浏览器，都有处理JavaScri

17、pt源代码的能力。JavaScript在其中实现了它的1.0版本，并在后来的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的基

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

19、.1 JavaScript在网页的用法3.3.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是基于对象的语言。而基于对象的基本特征，就是采用事件驱动。它是在图形界面的环境下，使一些输入变化简单化。

20、通常鼠标或热键的动作称之为事件，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。而对事件进行处理程序或函数，称之为事件处理程序。3.3.3 JavaScript中的对象的使用JavaScript没有提供如抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。3.3.4 JavaScript中的数组JavaScript中没有提供像其它语言具有

21、明显的数组类型，但可以通过function定义一个数组，并使用new对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。第四章 APPLETApplet是用Java语言编写的一些小应用程序，可以直接嵌入到网页中，并能够产生特殊的效果。包含Applet的网页被称为Java-powered网页。当用户访问这样的网页时，Applet被下载到用户的计算机上执行，但前提是用户使用的是支持Java的网络浏览器。由于Applet是在用户的计算机上执行的，因此它的执行速度不受网络带宽或者Modem存取速度的限制，用户可以更好地欣赏网页上Applet产生的多媒体效果。第一节 APPLET的工作原理标记中含有Applet网页的HTML文件代码，当支持Java的网络浏览器遇到这对标记时，就将下载相应的小应用程序代码并在本地计算机上执行该Applet。第二节 APPLET插入步骤完成一个java applet的插入操作共有两个步骤：(1)设置java applet的属性，即在applet标签中填写code、width、height和codebase这些属性的值；(2)设置java applet的参数，即在param标签中对应的填写name和vaule属性的值。