《ASP程序设计》讲课幻灯片Chapter

《《ASP程序设计》讲课幻灯片Chapter》由会员分享，可在线阅读，更多相关《《ASP程序设计》讲课幻灯片Chapter（32页珍藏版）》请在金锄头文库上搜索。

1、第2章HTML编程基础 内容提要n本章首先介绍HTML的发展历史，然后 介绍HTML的基本框架n详细介绍了HTML的各种常用标记：文 字标记、图片标记和超级链接标记，等 等。n介绍CSS的基本使用方法，介绍如何让 CSS与HTML协同工作。HTML概述 n在20世纪90年代Web网络的迅速兴起，使得HTML空前 繁荣。当时，HTML被发展成了许多不同的版本。出于 解决这种混乱局面的考虑，迫切需要制定一个公认的 HTML语言规范。n1995年11月，Internet Engineering Task Force（IETF ）整理了以前的各种版本，倡导并主持开发HTML2.0 规范，同年推出HTM

2、L3.0技术规范。1996年，World Wide Web Consortium（W3C）的HTML Working Group开始组织编写新的规范，于1997年1月推出了 HTML3.2。在HTML3.2中做了许多重要改动。到1999 年下半年推出到现在依然使用的HTML4.0。案例名称：HTML网页框架案例名称：HTML网页框架 程序名称：2-01.htm这是一段最基本的HTML标识，任何HTML文档都是由一个和标记包含 的，然后分为和两大部分，页面的标识一般都是在标识中定 义的。HTML文件不区别大小写，浏览器认为和是一样的，在使用的时 候需要保持风格的完整性。 HTML文件的扩展名可以

3、是.htm或者.html都可以，现在已经没有区别了。原来在Linux操 作系统上用html作为文件的扩展名，而在Windows操作系统上用.htm，因为早期的 Windows操作系统不支持三个以上字母的文件扩展名。HEAD头元素 nHEAD头元素主要包括该页面的一些基本描述 语句。META的属性包括：nDescription，网页的描述信息；nKeywords，关键字，当搜索引擎查找时，按此关键 字查找；nContent-type，用来设置该网页的编码；nAuthor，用来设置该网页的作者姓名；nRefresh，用来设置网页的自动更新。当CONTENT =“3; URL=http:/“时，该网

4、页打开3 秒钟后，就自动的转到网站 HTML的常用标记 nHTML的常用标记有一些共同特点：都放 在BODY标记里面。n常用的标记有字体标记、图片标记、超 级链接、列表、表格和表单等。字体标记 n处理文字时通常利用如“ xx”的标记n定义字符xx的字体显示为隶书，字号是 40，颜色是红色。程序2-03.htm说明如 何使用文字格式。 图片标记 n利用“”格式可以插入一张图片， myimage.jpg文件必须和该HTML文件放在同 一个目录下。nIMG是HTML的一个标记，是IMAGE的缩写； SRC属性给出要连接的图片的路径和文件名 超级链接 n使用超级链接的基本的语法是：XX。XX是一个超

5、级链接，连接到Address.htm文件；n是单词Anchor的缩写，中文的意思是“锚” ，功能是从一个页面链接到另一个页面；属性 HREF定义的是链接到哪一页。 书签链接 n如果某个页面很大，为了加强层次感， 需要引入书签链接。n使用的方法和超级链接类似。 电子邮件链接 n电子邮件链接提供了当点击页面上的链 接时，将自动打开默认的邮件发送程序 发邮件。 列表 n列表有两种方式，一种是有序列表，另 一种是无序列表。n无序列表是所有的行之前都有一个小圆 圈，而有序列表是自动排序的，前面有 序号。 基本表格 n是表格的基本标记。代 表表格的行，代表表格的列。n定义一个三行两列的表格如程序2- 09

6、.htm所示。表格的灵活应用 n（1）ROWSPAN和COLSPAN属性的使用 方法。n利用ROWSPAN属性设置该单元格占用多 行，利用COLSPAN属性设置该单元格是 占用多列。 Cellpadding和Cellspacingn（2）Cellpadding和Cellspacing属性的使 用方法。nCellpading的意思是单元格的边距，指的 是字与单元格边框的距离。Cellspacing 的意思是单元格间距，指的是单元格之 间的距离。 表格的样式 nBORDERCOLOR属性设置表格边框的颜色 ，BGCOLOR属性设置背景颜色，ALIGN 属性设置表格的对齐方式，标记是将 内部的文字加

7、粗显示。显示的结果 表单 n表单的功能是收集用户信息实现系统与用户交 互。比如E-mail信箱的注册页面就是一个十分 典型的表单页面。n表单信息的处理过程为：当单击表单中的提交 按钮时，表单中的信息就会上传到服务器中， 然后由服务器端的应用程序（例如CGI，ASP， PHP或JSP等）进行处理，处理后将用户提交的 信息存储在服务器端的数据库中，或者将有关 信息返回到客户端浏览器上。（1）表单头及其属性n表单的通用格式是：XX 。n表单元素包含在标记中，有两个重要的 属性：METHOD=“Post”或“Get”，Post和Get方式 的区别在于Post是一种邮寄的方式，在浏览器的 地址栏中不显示

8、提交的信息，这种方式传送的数 据量的大小没有限制；Get方式将信息传递到浏 览器的地址栏上，最大传输的信息量是2 KB。当 不指明是哪种方式时，默认为Get方式。Action属 性是设置利用哪个文件来处理所提交的数据。 （2）表单中常用控件n在常用的表单制作过程中，经常遇到的是按钮 制作、输入元素的制作等。常见的表单控件包 括文本框、文本域、密码框、多选框、单选框 和下拉列表框，等等。n除了文本域和下拉列表，其他只要修改TYPE属 性就可以了，使用方法如程序2-13.htm所示。块级元素 n块级元素包括DIV和SPAN两种标记。DIV称为 层标记，有时也称为块标记。利用DIV标记和 CSS的定

9、位技术可以做出相当出色的效果。nSPAN标记和DIV标记的基本语法是一样的，但 SPAN标记和DIV标记的区别还是很大的。使用 方法如程序2-14.htm所示。预排版标记 n包含在预排版标记中的字符会按照HTML 原码的格式输出到浏览器上。nHTML文件中的英文空格一般不起作用， 但是在预排版标记中空格可以显示出来 。语法如程序2-15.htm文件所示 设计网页框架 n设计网页时，经常用到的一种格式是框 架。n基本网页框架分成两种，左右框架和上 下框架。语法如程序2-16.htm文件所示 。案例2-2 使用框架n一般情况下工程的主页面都采用这种框架格式 ，在上面的页面放置网站的图片，右边放置主

10、 页面，左边放一个下拉菜单。n可以像对普通Windows窗口一样操作网页框架 ，可以最大化窗口页可以最小化窗口，修改案 例2-2右框架的代码，如案例2-3所示。 MARQUEE标记 n使用的基本语法是：xx，显示的效果是xx就会从屏幕一边跑到 另外一边。 啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ 啦啦啦，我一圈一圈绕着走！啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走！ 啦啦啦，我走一步，停一停！CSS概述 n1998年5月12日，CSS level 2才成为W3C 的标准，它 是一组样式，样式中的属性在HTML元素中依次出现， 并显示在浏览器中。样式可以定义在HTML文档的标志 里，也可

11、以在外部附加文档作为外加文档。CSS的功能 无比强大，W3C也极力向世界推广这一先进技术。 HTML是一种标记语言，而CSS是这种标记的一种重要 扩展，可以进一步美化页面。换句话说，CSS是一种用 来装饰HTML的标记集合。n为什么要使用CSS呢？原因主要有如下四点：（1）弥 补HTML对网页格式化功能的不足，比如段落间距，行 距等。（2）字体变化和大小。（3）页面格式的动态 更新。（4）排版定位等。加载CSS样式的三种方式 n使用CSS来格式化网页，共有三种方式：n在HEAD中引用n在BODY中引用n作为文件来引用。CSS与标记对应的三种方式 nHTML标记和CSS样式表标记有3种方式：n标

12、记选择符n类选择符n选择符。定义超级链接样式 n可以指定A标记以不同的方式显示。一个超级 链接有几种不同的状态：未被访问链接（Link ）、已访问链接（Visited）和鼠标移动过（ Hover）。n可以定义超级链接文字的颜色，可以定义字体 的大小，一般超级链接都有下划线，可以利用 “TEXT-DECORATION:NONE”将超级链接的下 划线去掉。 小结本章作为编程基础，主要介绍两大部分的 内容：HTML的常用标记和CSS样式表的使用方法需要重点掌握的是表格和表单的使用方式 、加载CSS样式的三种方式和CSS与标记 对应的三种方式。本章习题n一、选择题n1. 下面关于标记的说法不正确的是_

13、。nA) 标记要填写在一对尖括号（）内 nB) 书写标记的时候，英文字母的大、小写或混合使用大小写都是允许的。nC) 标记内可以包含一些属性，属性名称出现在标记的后面，并且以分号进行分隔。nD) HTML对属性名称的排列顺序没有特别的要求。n2. 以下标记中，_可用于在网页插入图像。nA) 标记 B) 标记nC) 标记 D) 标记n3. 在超级链接中，如果指定_框架名称，连接目标将在链接文本所在的框架页 内出现，当前页面被刷新。nA) Blank B) SelfnC) Parent D) Topn4. 是一个_。nA) 文本框 B) 重新填写的按钮nC) 下拉菜单 D) 提高给服务器的按钮n5

14、. 使用CSS来格式化网页，共有三种方式：_。nA) 在HEAD中引用 B) 作为标记来引用nC) 在BODY中引用 D) 作为文件来引用。二、填空题n1. _标记用于HTML文档的最前边，用来 标记HTML文档的开始。而_放在HTML文 档的最后边，用来标识HTML文档的结束。n2. 表格标记的_属性用于指定表 单处理程序的URL地址，_属性用于定义 数据提交方式。n3. 标记的_属性用于为输 入区域命名，_属性用来指定输入区域的 默认值。n4. 匹配一个HTML标记和CSS样式表标记有三种方式： 标记选择符、_和_。三、简答题与程序设计题n1. 如何在网页中设置字体？有哪些字体可以使 用？n2. 如何引入一张图片？如何给图片加上边框？n3. 如何使用超级链接？如何将超级链接的下划 线去掉？n4. 如何定义跨行的表格？如何将表格的字体和 边框的距离加大？n5. 框架有几种基本形式？如何使用？n6. 加载CSS样式的方式有哪些？如何使用？n7. 编写E-mail注册的表单。（上机练习）