《《JSP预备知识-HTML》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《JSP预备知识-HTML》PPT课件.ppt（37页珍藏版）》请在金锄头文库上搜索。
1、第2章 JSP预备知识-HTML内容提要本章首先介绍本章首先介绍HTML的发展历史的发展历史然后介绍然后介绍HTML的基本框架的基本框架详详细细介介绍绍了了HTML的的各各种种常常用用标标记记：文文字字标标记记、图图片标记、超级链接标记，等等片标记、超级链接标记，等等介介绍绍CSS的的基基本本使使用用方方法法，如如何何让让CSS与与HTML协协同工作同工作介介绍绍JavaScript中中的的变变量量、数数组组、表表达达式式、运运算算符、流程控制语句符、流程控制语句JavaScript的的函函数数、内内置置对对象象、浏浏览览器器对对象象的的层层次和次和DOM模型的建立和使用模型的建立和使用 HT
2、ML编程技术 要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的语言。在Internet上，通常使用的发布语言是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）的
3、HTML Working Group开始组织编写新的规范，于1997年1月推出了HTML3.2。在HTML3.2中做了许多重要改动。到1999年下半年推出到现在依然使用的HTML4.0 HTML概述案例名称：案例名称：HTML网页框架网页框架程序名称：程序名称：2-01.htmHEAD头元素 案例名称：案例名称：HTML网页框架网页框架程序名称：程序名称：2-02.htm我的第一页面HTML的常用标记 HTML的常用标记有一些共同特点：都放在BODY标记里面。常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等 字体标记 案例名称：使用字体标记案例名称：使用字体标记程序名称：程序名称：
4、2-03.htm本书的特色是以案例为主，全书有30个完整的案例。 图片标记案例名称：使用图片标记案例名称：使用图片标记程序名称：程序名称：2-04.htm超级链接案例名称：使用超级链接案例名称：使用超级链接程序名称：程序名称：2-05.htm其他文件上一个页面位于北京的清华大学列表案例名称：使用有序列表案例名称：使用有序列表程序名称：程序名称：2-06.htm有序列表 热爱祖国 热爱人民无序列表 热爱祖国 热爱党1.基本表格是表格的基本标记。代表表格的行，代表表格的列。 案例名称：基本表格案例名称：基本表格程序名称：程序名称：2-07.htm 第一行第一列第一行第二列 第二行第一列第二行第二列
5、 第三行第一列第三行第二列 表格的灵活应用 案例名称：跨行和跨列案例名称：跨行和跨列程序名称：程序名称：2-08.htm 跨两行 跨两列 1000 1000 3000 2000 4000 Cellpadding和Cellspacing属性Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的意思是单元格间距，指的是单元格之间的距离。 案例案例2-1：表格的样式：表格的样式案例名称：表格的样式案例名称：表格的样式程序名称：程序名称：StyleTable.htm序号大学师资评分学生评分设备评分1清华大学1001001002北京大学10010097表单 表单的
6、功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序（例如CGI，ASP，PHP，JSP等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。 表单头及其属性 案例名称：表单的基本使用方法案例名称：表单的基本使用方法程序名称：程序名称：2-10.htm用户名： 密码： 表单中常用控件 在常用的表单制作过程中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框
7、和下拉列表框，等等。 块级元素案例名称：使用块级元素案例名称：使用块级元素程序名称：程序名称：2-12.htm I am a layer!I am a Span!预排版标记包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。 设计网页框架 案例名称：上下框架案例名称：上下框架程序名称：程序名称：2-14.htm 使用框架 一般在工程应用中，都是由三个页面组成的框架组合，分成上框架，右框架和左框架 CSS编程技术 CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式单，是近几年
8、才发展起来的新技术1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。CSS概述 简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。CSS样式规则组成为：选择符 属性: 值 ，单一选择符的复合样式声明应该用分号隔开，如：选择符 属性1: 值1; 属性2: 值2 。使用使用CSS案例名称：使用案例名称
9、：使用CSS程序名称：程序名称：2-16.htmH1 FONT-SIZE: X-LARGE; COLOR: RED H2 FONT-SIZE: LARGE; COLOR: BLUE 中国，我的祖国！H1显示的中国，我的祖国！H2显示的加载CSS样式的三种方式 使用CSS来格式化网页，共有三种方式：在HEAD中引用在BODY中引用作为文件来引用 HEAD内引用案例名称：案例名称：HEAD内引用内引用程序名称：程序名称：2-17.htm H1 COLOR:GREEN;FONT-SIZE:37PX; P BACKGROUND:YELLOW; 北京大学，清华大学南京大学，复旦大学 BODY内引用案例名
10、称：案例名称：BODY内引用内引用程序名称：程序名称：2-18.htm 北京大学，清华大学南京大学，复旦大学 文件外引用案例名称：样式表文件案例名称：样式表文件程序名称：程序名称：mystyle.cssH1 COLOR:GREEN;FONT-SIZE:37PX;P BACKGROUND:YELLOW;案例名称：链接案例名称：链接CSS文件文件程序名称：程序名称：2-19.htm 北京大学，清华大学南京大学，复旦大学 文件外导入案例名称：导入案例名称：导入CSS文件文件程序名称：程序名称：2-20.htm IMPORT URL(MYSTYLE.CSS); 北京大学，清华大学南京大学，复旦大学 C
11、SS与标记对应的三种方式 标记选择符任何HTML元素都可以是一个CSS的选择符。上面所有的样式表都是采用标记选择符引入的。例如：P BACKGROUND:YELLOW;，这里用的标记选择符是P。类选择符 在STYLE标记定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式 案例名称：类选择符案例名称：类选择符程序名称：程序名称：2-21.htm.LITTLEREDCOLOR:RED;FONT-SIZE:18px.LITTLEGREENCOLOR:GREEN;FONT-SIZE:18px 这是红色，而且比较小！这是绿色，而且比较小！ID选择符定义ID选择符时，在样式名
12、之前加“#名字”，引用的时候使用“ID=名字”。 案例名称：案例名称：ID选择符选择符程序名称：程序名称：2-22.htm#SZG COLOR:RED 这是ID选择符号！定义超级链接样式 可以指定A标记以不同的方式显示。一个超级链接有几种不同的状态：未被访问链接（Link）已访问链接（Visited）鼠标移动过（Hover）可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“TEXT-DECORATION:NONE”将超级链接的下划线去掉。定义超级链接样式定义超级链接样式案例名称：定义超级链接样式案例名称：定义超级链接样式程序名称：程序名称：2-23.htmA:L
13、INKCOLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:VISITEDCOLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:HOVERCOLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE这是超级链接小结本章首先介绍本章首先介绍HTML的发展历史的发展历史然后介绍然后介绍HTML的基本框架的基本框架详详细细介介绍绍了了HTML的的各各种种常常用用标标记记：文文字字标标记、图片标记、超级链接标记，等等记、图片标记、超级链接标记，等等介介绍绍CSS的的基基本本使使用
14、用方方法法，如如何何让让CSS与与HTML协同工作协同工作本章习题2-1. 如何在网页中设置字体？有哪些字体可以使用？如何在网页中设置字体？有哪些字体可以使用？2-2. 如何引入一张图片？如何给图片加上边框？如何引入一张图片？如何给图片加上边框？2-3. 如何使用超级链接？如何将超级链接的下划线去掉？如何使用超级链接？如何将超级链接的下划线去掉？2-4. 如何定义跨行的表格？如何将表格的字体和边框的距如何定义跨行的表格？如何将表格的字体和边框的距离加大？离加大？2-5. 框架有几种基本形式？如何使用？框架有几种基本形式？如何使用？2-6. 加载加载CSS样式的方式有哪些？如何使用？样式的方式有哪些？如何使用？2-7. 编写编写E-mail注册的表单。（上机练习）注册的表单。（上机练习）
