搜索 秦石磊jsp课件 可得到整套ch02

第二章HTML语言和JavaScript语言前面第一章中，我们学习了如何来配置JSP的运行环境，如果我们希望做一个比较完善的网站，我们还需要学习一些有关网页的基础知识，包括HTML语言、JavaScript语言等。下面我们来介绍这些内容。2.1网页的工作机制网页的工作机制实际上并不复杂，书上给出了大家四种浏览网络地址的情况，我们这里只需明白第四种执行情况，也就是JSP网页的执行情况，而这部分前面我们已经介绍过，希望大家能掌握。2.2HTML语言前面我们给大家的那个简单JSP的例子中，已经涉及到了html语言，这里我们就不在叙述。2.2.1HTML注释html语言的注释格式如下：!--注释内容--2.2.2HTML文本的基本结构在HTML文档中，标签（也就是我们书中说的标记）是用来规定Web文档的逻辑结构并控制文档的显示格式。可以使用HTML标签来设置链接、标题、段落、列表等等。一般HTML标签格式是这样的：标签名相应内容／标签名注意：(1)标签名用尖括号括起来，不区分大小写。(2)HTML标签一般成对出现。(3)某些HTML元素只有起始标签而没有相应的结束标签，例如换行标签，由于不包括相应的内容，所以只使用〈BR〉就可以了。下面我们就来编写一个简单的html网页，这里我们用记事本来编辑。大家要注意，在编完之后一定要用保存为扩展名为“html”或者“htm”的存文本文件。我们可以采用IE—工具—查看原代码来看我们编写的文件.2.2.3文字格式的设置上节介绍的是一个很简单的html网页，实际上要掌握好html语言，我们必须熟悉它的其它标记的用法。这节我们来介绍如何来设置文字信息。2.2.3.1设置标题标题元素有6种，分别为h1,h2,…h6，用于表示文章中的各种题目。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：H1一级标题标记变粗变大加宽，程度与级数反比H2二级标题标记将字体变粗变大加宽H3三级标题标记将字体变粗变大加宽H4四级标题标记将字体变粗变大加宽H5五级标题标记将字体变粗变大加宽H6六级标题标记将字体变粗变大加宽设置字体在HTML语言中，我们使用font…/font来设置字体，包括字体的字号、大小、颜色等。它的格式为：fontface=?Size=?Color=?…/fontface表示采用什么字体，size表示字体大小，color表示字体颜色当然这些属性不需要全部设置。fontface=“TimesNewRoman,Times,serif”hello/font这个表示face属性设置了组合字体，在选择时首选第一个，当然如果没有face属性，表示将采用系统的默认设置。其它字体标记当然有时候我们可能需要将某段文字加粗、以斜体显示或者别的特殊效果时，我们可以通过下面的文字标记。文字版面标记这里讲到的文字版面标记，主要是指设置换行、文字分段和对齐等标记。2.2.4.1换行标记在HTML语言中，换行标记为：br,值得注意的是换行标记是一个单独标记，不是成对标记。另外对应换行标记，也有一个不换行标记：nobr…/nobr下面我们给大家一个例子，来示范这两个标记的效果。段落标记格式：p…/p它标识一个段落，并在段前段后各添加一个空行，其中的文字不受影响。2.2.4.3对齐标记可以使用一些标记将文字按某种方式对齐，如居中对齐、居左对齐等。我们直接看例子：创建表格表格是一种能够有效的描述信息的组织方式，由行、列和单元格组成。它可以将文字和图片等按照行和列排列起来，可以很好地控制页面布局。在浏览器中显示时，表格的整体外观是由TABLE标签的属性决定的。HTML中使用TABLE/TABLE标签创建表格，其基本格式为：TABLE表格内容/TABLETH.../TH标签用来定义表格的表头。TR.../TR标签用来定义表格的某一行。TD.../TD标签用来定义表格的单元格，或者叫列标记。注意：对于表格的Border的属性值为非负数，0表示表格边框不可见，但是内容可见。ch2\sample7.html2.2.6设计表单表单的制作有两个部分，首先，你必须使用Form…/Form标记和input标记建立表单的输入界面，其次才是表单的后端处理。2.2.6.1插入表单与按钮制作表单网页的首要步骤是在html文件中使用Form…/Form标记插入表单，然后使用input标记来插入按钮。我们首先来认识一下两个按纽，也是我们经常要用到的，“提交”（Submit)和“重新输入”(Reset)”，当我们按下“提交”按纽的时候，浏览器会将浏览者输入的数据返回服务器，当我们点取“重新输入”的时候，浏览器会清除浏览者输入的数据，使表单恢复至原始数据。2.2.6.2插入单行文本框FORM姓  名：INPUTTYPE=TEXTNAME=UserNameSIZE=40BRE-Mail：INPUTTYPE=TEXTNAME=UserMailSIZE=40VALUE=username@mailserverBR/FORM文本框的作用不言而喻，不过这里有几点要注意一下：1、单行文本框的名称限英文且唯一，实际上同一个表单中的所有字段必须以英文命名，且不能重复。2、单行文本框默认是空白，不显示数据，若要显示数据在在input标记的value属性中设置(中英文均可）3、可以利用input标记的maxlength属性来设置浏览者输入的字符数2.2.6.3插入单选按钮年  龄：INPUTTYPE=RADIONAME=UserAgeVALUE=Age1未满20岁INPUTTYPE=RADIONAME=UserAgeVALUE=Age2CHECKED20~29INPUTTYPE=RADIONAME=UserAgeVALUE=Age330~39INPUTTYPE=RADIONAME=UserAgeVALUE=Age440~49INPUTTYPE=RADIONAME=UserAgeVALUE=Age550岁以上BR“单选按纽”就像只允许单选的选择题一样，我们通常会利用这个组件列出数个选项，这里面也有几点值得大家注意：1、同一组单选按纽的名称（name)应该相同，并且限英文同时也应该是唯一的。2、同一组中各个单选按纽的数值(value)必须是不同的，这里面中英文均可。2.2.6.4插入复选按钮INPUTTYPE=CHECKBOXNAME=UserPhoneVALUE=诺基亚CHECKED诺基亚INPUTTYPE=CHECKBOXNAME=UserPhoneVALUE=摩托罗拉摩托罗拉INPUTTYPE=“CHECKBOX”NAME=“UserPhone”VALUE=“爱立信”爱立信INPUTTYPE=CHECKBOXNAME=UserPhoneVALUE=三星三星BR“复选框”就象复选的选择题一样，它允许浏览者同时选取多个选项。这里面也要注意的是同一组复选按纽的名称（name)应该相同，并且限英文，同时也应该是唯一的。2.2.6.5插入多行文本框Form你使用手机时最常碰到哪些问题？BRTEXTAREANAME=UserTroubleCOLS=45ROWS=4线路太忙/TEXTAREABR/FORM“多行文本框”允许浏览者输入多行的文字说明，如个人意见等信息。我们可以使用TextArea…/TextArea标记在表单中插入多行文本框。它必须放在Form…/Form标记之间，多行文本框默认是空白不显示任何数据，如果要在多行文本框中间显示数据，可以将数据放在TextArea…/TextArea标记之间。其中cols和rows两个属性分别设置文本框的宽度和高度,书上还给出了一个wrap属性，来设置自动换行的，这个大家了解一下就可以，一般不用设置。2.2.6.6插入下拉式菜单SELECTNAME=UserNumberSIZE=4MULTIPLEOPTIONVALUE=中国电信中国电信OPTIONVALUE=中国联通SELECTED中国联通OPTIONVALUE=远传远传OPTIONVALUE=铁路网铁路网OPTIONVALUE=其他其他/SELECTBR“下拉式”菜单允许浏览者从下拉式菜单中选择项目，我们可以利用select…/select标记搭配option标记来制作下拉式菜单。而option标记是用来指定下拉式菜单的选项。值得我们注意的是select…/select标记必须结合option标记来指定下拉式菜单的选项。其中可以利用size属性来设置下拉式菜单的高度，利用multiple来设置浏览者可以在下拉式菜单中选取多个选项。option标记放在select…/select之间以指定下拉式菜单的选项我们最后一起来看一个例子ch02/12.html书上给出的例子是ch02/sample8.html,里面有些地方是有问题的。2.2.7其他标记2.2.7.1超文本链接标记ahref=urltext/ahref属性用来设定链接到哪个网页上去。如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。一般常用的是“_self”表示在原来页面上的窗口打开。而“_blank”表示在浏览器的一个新窗口打开。ahref=urltarget=“_selftext/a2.2.7.2图象标记通过图象标记，可以在HTML文件中插入图象，其格式为：img…这个标记一般单独出现，书上有点错误。我们来看个例子ch2/sample9.html,它里面的超级链接为sample10.html其中，图片src地址采用相对路径，“./image/02_1.jpg”,其中“./”表示当前目录。2.3JavaScript语言前面我们介绍了html语言，它主要用来设置一些文字格式、创建表格、和设计表单等。如果我们想利用它来检测表单中的文本输入框是否为空，此时它将显得无能为力，这时就要借助我们下面要学习的JavaScript来设置。2.3.1JavaScript简介JavaScript语言的前身叫做LiveScript，它是由NetScape公司来设计出来的。它有很多优点(1)简单易学。它主要采用HTML文本中嵌入小程序段的方式，开发过程非常简单。(2)响应速度快(3)最关键的是它是一种与平台无关的语言，只要浏览器能执行，它就可以运行，而与操作系统无关。2.3.1.1JavaScript与Java区别很多人认为JavaScript就是基于Java语言的编程语言，实际上它们是完全两个公司开发的产品，下面我们来看看它们之间的区别。(1)它们相同之处是二者都是与平台无关的语言。(2)两者的处理方式不同，JAVA程序必须经过编译，然后在JAVA的虚拟机上执行，而JavaScript语言则是通过浏览器边解释边执行。(3)JAVA中如果需要个变量，在使用之前必须声明，而JavaScript语言不必事先声明就可以使用。(4)JavaScript是一种嵌入式语言，它通过在html文件中使用scr