第三章 WEB编程基础.ppt

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

1、第三章 WEB编程基础上章回顾：学习了IIS的配置，虚拟目录本章内容1）HTML基本结构2）文字控件标记符3）列表 4）表格5）链接，图像 6）表单 6）表单3.1 HTML概述（P18）3.1 HTML（Hyper Text Markup Language)通常称为超文本标识语言，是标记的集合，这些用括起来称为标记，并常常成对出现。用HTML语言编写的程序在任何浏览器中浏览效果是一样的。一个HTML编写的网页一般都具有以下的结构：标题部分(首部)正文(实体部)其中标题是存放一些不在网页正文部显示的内容，一些基本信息，客户端脚本语句等正文部分是编写网页具体内容的地方。HTML文件保存文件名为：

2、.HTM或.HTML HTML程序语句规则1）所有HTML标记符都是用括起来比如：2）html语句本身不区分大小写，习惯上HTML标记符采用大写，以区分其它语言。3）HTML的标记符有两种形式，一种是成对的，一种是单独使用的，成对出现的就是如：前面一个表示开始，后面一个加的表示结束 前面一个表示开始，后面一个加的表示结束。说明出该标记符的有效控件范围。单标记符，一般只对当前输出有效。例如：例如：用红色显示文字它是5号字体它是蓝色字体4）标记符的可以有多个属性，每个属性都是用 属性名值 的方式表达，不同属性之间用空格隔开。如上例的3.2 HTML的常用标记（P18）1）头部标记头部标记中包含了等

3、标记，具体含义如下：标题显示内容用于设置显示在浏览器标题栏的文字内容。例如：我的网页我的网页设置默认的地址，用于指定本网页中的链接的基准地址。标记，用于指出本网页文件所需其它的资源情况、显示作者身份，相关检索信息等标记符，用于标识和文件相关的信息必须记住例3-1（P19）HTML头部标记示例.2.文本标记P20文本标记主要有用于标注段落，标题文字、文本样式、换行、分隔符等标记其中.段落标记文本显示标记加粗标题标记换行水平线1).段落，表示之间的文本属于同一自然段，一个自然段有段前段后的间隔空行。常用属性：Align=Center居中|Left 左对齐|Right右 一个标记符常带有一些属性，属

4、性的写法是：2.文本显示标记，将标记内的内容以文本方式显示（即不带修饰，能直接输出回车符、空格、跳格等）。例如：张三 李四 王五 陈三回车符和空格不能直接被浏览器识别 张三 李四 王五 陈三内容以文本方式原样输出包括回车及空格这种方式格式不灵活。字体样式标记符中的内容加粗标记符中的内容加下划线标记符中的内容变斜体例如：加粗下划线斜体标题字与字体文字设置,.之间的文字的字体，常用的属性有Face=“字体名”Size=“数值”Color=“颜色”可以同时选择一个或一个以上的属性值，不同属性值之间用空格隔开。其中：1：字体名是指当前系统可用的字体，一般应使用标准字体（如：宋体、楷体_GB2312、仿

5、宋_GB2312、黑体）2：字号 取值为17其中7号字最大，1号字取小。3、颜色 取值为颜色值，取值可以是常用颜色的名称：比如:Blue,Red,Black等，也可以使用6位的十六进制，每隔两位表示一个颜色分量。例如：FF00FF表示 红255,绿0,蓝255标题标记 所谓标题标记就是指将之间的文字用标准宋体加粗字修饰，并自动分成一段。其中：N的取值为 1,2,3,4,5,6最大，最小字体标记.设置文字字体，大小，颜色。张三 李四王五陈六运行结果：设置为楷体红色5号只设置为字号为7号其它默认，在默认情况下，字体为宋体，字号为2号，颜色为黑色。宋体加粗，并且自动产生一个自然段。换行符与水平线1）

6、段落与换行符段落.有明显的段前段后的间距。可以设置对齐方式。2）换行符(单用标记)把一行文字折行显示。没有属性3)水平线（）在指定位置插入水平线。并自动分自然段。其中：size=n 表示线的粗细Width=n|n%表示线的长度，n表示n个像素（绝对大小）n%表示线的长度为页面的n%(相对大小）Color=颜色 表示线的颜色Noshade 表示不使用阴影立体效果例如：例如：草-白居易离离原上草,一岁一枯荣。野火烧不尽，春风吹又生。运行效果：3.列表标记列表有无序列表、有序列表和定义列表等。无序表标题前无序号用符号代码有序表标题前有序号，序号有多种形式如：数字，字母，罗马数字等。定义列表（省略）1

7、、无序列表 表范围 .项.其中：TYPE值，值表示图形符号的类型值有：Disc(实心点，默认)square（方块）Circle(空心圆)例如项目一项目二效果：表示列表框的范围。表示每一项，2、有序表项.其中:type=类型值 类型值有:1 表示使用数字 A使用大写字母a表示小写字母 i使用小写罗马数字I表示大写罗马数字Start=n 表示序号的起始数字（取1,2,3,4)例子：项目一项目二列表可以嵌套:下面通过例说明第1点 项目 项目 第2点 项目a 项目b 运行效果：4.表格标记表格标记由三部分组成，分别是 .表格的外框生成一行表格的常用属性：1)border=n 边框（线）的粗细默认情况下

8、：边框（线）的粗细为0,表示无线。2）borderColor=颜色 边框（线）的颜色。3）Cellpadding=n 表示（默认为2）(即是单元格内文字与边框的间距）4）Cellspacing=n表示单元格之间的间距（默认为2）Width=n|n%表格的宽度，其中规定为N时表示绝对大小，规则为n%表示占页面的百分比。Align=left|right|center设置表格在页面中的对齐方式。abcdcbdcdcdCellpading=n文本与边框的间距Cellspacing=n单元格之间的间距例：单元格一单元格二单元格三单元格四没有边框的表格。单元格一单元格二单元格三单元格四整个表格居中对齐，表

9、格有边框线，蓝色1个像素。例题3-5表格示例1行1列1行2列2行1列2行2列Cellpadding规定文字与上下左右边框的间距1行1列1行2列2行1列2行2列规定了单元格与单元格之间的间距。与行及单元格相关的属性1）对齐方式：A)水平对齐方式 Align=center|left|rightB)垂直对齐方式Valign=top|middle|bottom 2）height=n|n%规则行高3）bgcolor=颜色 背景颜色值4）width=n|n%规定单元格的宽度caddddcad 序号 姓名 语文 1 庄子芥 文学、文章知识丰富 2 张子微 语言表达能力强 合并单元格行，单元格列Colspan

10、=nRowspan=n合并规则：从左从上也就是在靠左的单元格合右边。靠上的单格合下边。RowspanColspan合并后单元格从上从左例如：1,2行合并，算1行，2,3列合并算2列例如：合并原表格中B2、B3列及C1和D1行。A1 A2 A3 A4 B1 B2 B3 B4 C1 C2 C3 C4 D1 D2 D3 D4B2B3C1合并行后,下面的行单元格归第一行所有合并列后,右面的行单元格归左边列所有5.图片标记(P26)其中 Src=图片文件名(路径)是必须的例如:width 规定图片的宽度height规定图片的高度Border=n(默认为0)规定图片是否加边框.重点补充内容(笔记内容)相对

11、路径和绝对路径一个完整的网页地址应该包括以下几个部分:http:/域名(或IP)/虚拟目录名/文件夹名/文件名例如:http:/ 当使用完整的网址时当使用完整的网址时,称为绝对路径称为绝对路径,它必须与具体的网站关联.不能将文件存在其它网站的文件夹中.缺点:编写出的代码不灵活,只能和具体的网站有关.常用于引用其它网站内容.2)相对路径在给出链接地址(或其它地址如:图片,声音等)时,采用省略 http:/域名(或IP)的方式时,称为相对路径.缺点只能将文件保存在当前网站所规定的地址.优点:编写出的代码适应不同的网站.常用于链接本地文件.例如:IIS的主目录指向:d:asp 表示链接IIS文目录下

12、的C.jpg文件表示链接IIS文目录下Img文件夹中的A.jpg文件被省略部分就是网站的域名(或IP)也就是http:/localhost/6.超链接标记(P27)超链接是网页的核心功能,其标记符相对简单,格式如下:链接标题其中”URL”(网址)是必须的,当使用一个相对地址或绝对地址时,表示链接一个文件,当使用一个#时,表示一个空链接(即只显示一个链接样式,没有具体链接对象)Target=_blank|_self|_parent|_top表示链接文件显示的位置.其中:_blank 表示链接的网页另起一个新窗口表示链接的网页另起一个新窗口显示显示_self 表示链接的网页在当前窗口显示表示链接的

13、网页在当前窗口显示(默认默认)_parent与框架有关表示链接的网页在父窗口显示_top与框架有关表示链接的网页在顶层窗口显示综合例子3.3 HTML表单(P28)1.表单可以实现服务器与用户的交流,表单是提供给控件存放的虚拟窗口,它在运行时是不可见的.表单的作用是将表单内控件的数据进行打包并发送到表单指定的接收文件.一般称表单部分为客户端程序,而接收表发送数据的文件(或代码)称为服务器端程序.注注:一个表单的数据可以发送给表单文件本身一个表单的数据可以发送给表单文件本身,此此时时,接收数据并处理数据部分称为服务器端程序接收数据并处理数据部分称为服务器端程序,其它的称为客户端程序其它的称为客户

14、端程序(在第五章时将举例说明在第五章时将举例说明)虚线部分是用表示设计时的表单,当程序运行时,表单是看不到的文本框,密码框和按钮等控件必须在表单内才有效,其输入的数据才能被发送到指定的文件.表单所有控件必须通过提交发送数据.用提交按钮或提交方法都可以.1.表单的基本结构（重点内容）各种控件功能：表单是将数据以特定的方式打包提交到指定文件（服务器端程序）。属性：Name=“名称”一个表单在一个网页中要定义一个唯一的名称。Action=“提交对象“Action规定表单数据发送的对象（也就是接收数据的文件）（即类似于收信人的地址）如果不指定Action则将数据发送给自已。Method=Post|Ge

15、tMethod规定表单的数据发送方式（即类于寄信方式比如：航空，特快等），有两种方式，一种是POST方式，一种是GET方式（默认）Post方式邮寄方式（二进制方式）优点：数据是集体打包保密的，有一定的安全性，并且不限提交数据的长度。缺点：只能在表单中使用，不灵活。Get方式文本方式优点：方便，可用于不同的地方缺点：不安全，提交数据有长度的限制（限2KB)控件：HTML提供了多种控件，这个控件必须在表单内其数据才能被发送到指定的接收文件。常用的控件有：输入型控件，下拉列表框，多行文本框（域）控件有自已的属性方法和事件，常用的事件有onClick，OnChange，OnSubmit，OnLoad等

16、。输入型控件是各个控件的集合，常用的有：文本框（Text)密码框(PassWord）单选按钮（radio)多选按钮（CheckBox)文件域（File）隐藏域:hidden图像域（Image）提交按钮:Submit重置按钮（Reset）普通按钮（Button）所有输入型控件都采用统一的语句格式，其中：input 为标记符，是单用的。Size宽度(n)表示控件的宽度，用字符数表示。Name=“名称“每一个控件都必须有名，且应该是唯一（如果不唯一则表示控件数组），但单选按钮除外（单选按钮同名表示同一选组）。VALUE 初始值 表示在网页显示时，初姶显示的内容。Type=“类型“表示不同的控件。其中

17、类型有文本框（Text)密码框(PassWord）单选按钮（radio)多选按钮（CheckBox)文件域（File）隐藏域:hidden不可见图像域（Image）提交按钮:Submit重置按钮（Reset）普通按钮（Button）例子：用户登录窗口用户登录窗口 用户名用户名：p密密 码码：表单没有指定提交对象，表示数据自已提交给自已。下拉列表控件下拉列表与列表标记类似，有两部分组成：其语法结构如下：显示内容.其中列表控件的外框架。而是下拉列表控件的项内容。属性:Name=“名称”表示当前控件的名称Size=“n”n是指行数，表示列表项显示多少行。当n=1时，显示的是下拉列表框，当n1时，显示

18、的列表框。默认为1.项的属性Value=“值”指当选择该项时，返回的值。注意：当选择一个项时所返回的内容不是项显示内容而是项指定的Value的值。Selected 设置默认选项。例如：广州上海北京当Size=1时，显示为下拉列表框当项有Selected属性时，设置为默认选项广州上海北京Size=5时，表示显示的是列表框。多行文本域与单行文本框相比，多行文本域是符合输入及编辑文本内容要求的控件。它响应回车换行。显示输入文本的内容其中:Rows=n 表示文本域的高度（表示N行的高度）Cols=n 表示文本域的宽度（表示N个字符的宽度）例如：请输入内容在中显示的初始化内容。3.4 ASP编程初步在A

19、SP中脚本语言是Vbscript或Jscript，ASP默认脚本语言是Vbscript，在WEB应用程序（网页程序）往往是用HTML和Vbscript混合编程。也就是说将Vbscript嵌入到html中。1、在HTML文件中嵌入Vbscript脚本语言这种编程方法通常是先编写HTML文件，并调试正确，再嵌入Vbscript代码，VbScript代码用加以分隔。例如:在Html中嵌入Vbscript脚本必须放置在整个文件的第一行，用于声明动态网页使用，Vbscript一般不要省略。放置在之间的语句称为服务器端程序。注：Vbscript有服务器端代码和客户端代码之分，服务器端代码在服务器中执行，客户端代码在浏览器中执行。2.在Vbscript脚本中嵌入HTML语言%response.write“在Vbscript脚本嵌入HTML代码%上例中省略基本结构只是为了突出体现在动态Vbscript中嵌入HTML的特征。在实际使用中一般不能省略基本结构。本章小结1,学习了与字体文本有关的标记 等2.列表与表格 .3.图片(img)与链接()4.表单与控件.