《HTML编程基础》PPT课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,ASP动态网站编程,西安软件工程学院,第,2,章,HTML,编程基础,内容提要,本章首先介绍,HTML,的发展历史，然后介绍,HTML,的基本框架,详细介绍了,HTML,的各种常用标记：文字标记、图片标记和超级链接标记，等等。,介绍,CSS,的基本使用方法，介绍如何让,CSS,与,HTML,协同工作。,HTML概述,在,20,世纪,90,年代,Web,网络的迅速兴起，使得,HTML,空前繁荣。当时，,HTML,被发展成了许多不同的版本。出于解决这种混乱局面的考虑，迫切需要制定一个公认的,HTML,语言规范。,1995,年,11,月，,Internet Engineering Task Force,（,IETF,）整理了以前的各种版本，倡导并主持开发,HTML2.0,规范，同年推出,HTML3.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,文件的扩展名可以是,.htm,或者,.html,都可以，现在已经没有区别了。原来在,Linux,操作系统上用,html,作为文件的扩展名，而在,Windows,操作系统上用,.htm,，因为早期的,Windows,操作系统不支持三个以上字母的文件扩展名。,HEAD头元素,HEAD,头元素主要包括该页面的一些基本描述语句。,META,的属性包括：,Description,，网页的描述信息；,Keywords,，关键字，当搜索引擎查找时，按此关键字查找；,Content-type,，用来设置该网页的编码；,Author,，用来设置该网页的作者姓名；,Refresh,，用来设置网页的自动更新。当,CONTENT=3;URL=http:/,时，该网页打开,3,秒钟后，就自动的转到网站,HTML的常用标记,HTML的常用标记有一些共同特点：都放在BODY标记里面。,常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等。,字体标记,处理文字时通常利用如“xx”的标记,定义字符xx的字体显示为隶书，字号是40，颜色是红色。程序2-03.htm说明如何使用文字格式。,图片标记,利用“,”,格式可以插入一张图片，,myimage.jpg,文件必须和该,HTML,文件放在同一个目录下。,IMG,是,HTML,的一个标记，是,IMAGE,的缩写；,SRC,属性给出要连接的图片的路径和文件名,超级链接,使用超级链接的基本的语法是：,XX,。,XX,是一个超级链接，连接到,Address.htm,文件；,是单词,Anchor,的缩写，中文的意思是“锚”，功能是从一个页面链接到另一个页面；属性,HREF,定义的是链接到哪一页。,书签链接,如果某个页面很大，为了加强层次感，需要引入书签链接。,使用的方法和超级链接类似。,电子邮件链接,电子邮件链接提供了当点击页面上的链接时，将自动打开默认的邮件发送程序发邮件。,列表,列表有两种方式，一种是有序列表，另一种是无序列表。,无序列表是所有的行之前都有一个小圆圈，而有序列表是自动排序的，前面有序号。,基本表格,是表格的基本标记。代表表格的行，代表表格的列。,定义一个三行两列的表格如程序2-09.htm所示。,表格的灵活应用,（1）ROWSPAN和COLSPAN属性的使用方法。,利用ROWSPAN属性设置该单元格占用多行，利用COLSPAN属性设置该单元格是占用多列。,Cellpadding和Cellspacing,（2）Cellpadding和Cellspacing属性的使用方法。,Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的意思是单元格间距，指的是单元格之间的距离。,表格的样式,BORDERCOLOR属性设置表格边框的颜色，BGCOLOR属性设置背景颜色，ALIGN属性设置表格的对齐方式，标记是将内部的文字加粗显示。显示的结果,表单,表单的功能是收集用户信息实现系统与用户交互。比如,E-mail,信箱的注册页面就是一个十分典型的表单页面。,表单信息的处理过程为：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序（例如,CGI,，,ASP,，,PHP,或,JSP,等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。,（1）表单头及其属性,表单的通用格式是：,XX,。,表单元素包含在,标记中，有两个重要的属性：,METHOD=“Post”,或“,Get”,，,Post,和,Get,方式的区别在于,Post,是一种邮寄的方式，在浏览器的地址栏中不显示提交的信息，这种方式传送的数据量的大小没有限制；,Get,方式将信息传递到浏览器的地址栏上，最大传输的信息量是,2 KB,。当不指明是哪种方式时，默认为,Get,方式。,Action,属性是设置利用哪个文件来处理所提交的数据。,（2）表单中常用控件,在常用的表单制作过程中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。,除了文本域和下拉列表，其他只要修改,TYPE,属性就可以了，使用方法如程序,2-13.htm,所示。,块级元素,块级元素包括,DIV,和,SPAN,两种标记。,DIV,称为层标记，有时也称为块标记。利用,DIV,标记和,CSS,的定位技术可以做出相当出色的效果。,SPAN,标记和,DIV,标记的基本语法是一样的，但,SPAN,标记和,DIV,标记的区别还是很大的。使用方法如程序,2-14.htm,所示。,预排版标记,包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。,HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。语法如程序2-15.htm文件所示,设计网页框架,设计网页时，经常用到的一种格式是框架。,基本网页框架分成两种，左右框架和上下框架。语法如程序2-16.htm文件所示。,案例2-2 使用框架,一般情况下工程的主页面都采用这种框架格式，在上面的页面放置网站的图片，右边放置主页面，左边放一个下拉菜单。,可以像对普通,Windows,窗口一样操作网页框架，可以最大化窗口页可以最小化窗口，修改案例,2-2,右框架的代码，如案例,2-3,所示。,MARQUEE标记,使用的基本语法是：,xx,，显示的效果是,xx,就会从屏幕一边跑到另外一边。,啦啦啦，我从右向左移！,啦啦啦，我从左向右移！,啦啦啦，我一圈一圈绕着走！,啦啦啦，我只走一次就歇了！,啦啦啦，我来回走！,啦啦啦，我走一步，停一停！,CSS概述,1998,年,5,月,12,日，,CSS level 2,才成为,W3C,的标准，它是一组样式，样式中的属性在,HTML,元素中依次出现，并显示在浏览器中。样式可以定义在,HTML,文档的标志里，也可以在外部附加文档作为外加文档。,CSS,的功能无比强大，,W3C,也极力向世界推广这一先进技术。,HTML,是一种标记语言，而,CSS,是这种标记的一种重要扩展，可以进一步美化页面。换句话说，,CSS,是一种用来装饰,HTML,的标记集合。,为什么要使用,CSS,呢？原因主要有如下四点：（,1,）弥补,HTML,对网页格式化功能的不足，比如段落间距，行距等。（,2,）字体变化和大小。（,3,）页面格式的动态更新。（,4,）排版定位等。,加载CSS样式的三种方式,使用,CSS,来格式化网页，共有三种方式：,在,HEAD,中引用,在,BODY,中引用,作为文件来引用。,CSS与标记对应的三种方式,HTML,标记和,CSS,样式表标记有,3,种方式：,标记选择符,类选择符,选择符。,定义超级链接样式,可以指定,A,标记以不同的方式显示。一个超级链接有几种不同的状态：未被访问链接（,Link,）、已访问链接（,Visited,）和鼠标移动过（,Hover,）。,可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“,TEXT-DECORATION:NONE”,将超级链接的下划线去掉。,小结,本章作为编程基础，主要介绍两大部分的内容：,HTML,的常用标记和,CSS,样式表的使用方法,需要重点掌握的是表格和表单的使用方式、加载,CSS,样式的三种方式和,CSS,与标记对应的三种方式。,本章习题,一、选择题,1.,下面关于标记的说法不正确的是,_,。,A),标记要填写在一对尖括号（,）内,B),书写标记的时候，英文字母的大、小写或混合使用大小写都是允许的。,C),标记内可以包含一些属性，属性名称出现在标记的后面，并且以分号进行分隔。,D)HTML,对属性名称的排列顺序没有特别的要求。,2.,以下标记中，,_,可用于在网页插入图像。,A),标记,B),标记,C),标记,D),标记,3.,在超级链接中，如果指定,_,框架名称，连接目标将在链接文本所在的框架页内出现，当前页面被刷新。,A)Blank B)Self,C)Parent D)Top,4.,是一个,_,。,A),文本框,B),重新填写的按钮,C),下拉菜单,D),提高给服务器的按钮,5.,使用,CSS,来格式化网页，共有三种方式：,_,。,A),在,HEAD,中引用,B),作为标记来引用,C),在,BODY,中引用,D),作为文件来引用。,二、填空题,1._,标记用于,HTML,文档的最前边，用来标记,HTML,文档的开始。而,_,放在,HTML,文档的最后边，用来标识,HTML,文档的结束。,2.,表格标记,的,_,属性用于指定表单处理程序的,URL,地址，,_,属性用于定义数据提交方式。,3.,标记的,_,属性用于为输入区域命名，,_,属性用来指定输入区域的默认值。,4.,匹配一个,HTML,标记和,CSS,样式表标记有三种方式：标记选择符、,_,和,_,。,三、简答题与程序设计题,1.,如何在网页中设置字体？有哪些字体可以使用？,2.,如何引入一张图片？如何给图片加上边框？,3.,如何使用超级链接？如何将超级链接的下划线去掉？,4.,如何定义跨行的表格？如何将表格的字体和边框的距离加大？,5.,框架有几种基本形式？如何使用？,6.,加载,CSS,样式的方式有哪些？如何使用？,7.,编写,E-mail,注册的表单。（上机练习）,