1第3章JSP动态网页设计基础2了解和掌握HTML语法、CSS语法掌握JSP注释、变量和方法的声明掌握JSP指令、JSP动作(Action)语法学习目标3学习内容HTML语法CSS语法JavaScript脚本JSP注释变量、方法的声明JSP指令JSP动作(Action)语法JSP脚本4HTML文件的一般格式:htmlheadtitle网页标题/title/headbody网页正文/body/html5htmlheadtitle使用标题标签/title/headbodyH1align=center欢迎学习JSP!!!/H1H2align=center欢迎学习JSP!!!/H2H3align=center欢迎学习JSP!!!/H3/body/html6加入超级链接1、锚点标记格式:Ahref=“地址”name=“字符串”target=“打开窗口方式”热点/A例如:AHREF=“”山东农业大学/A7加入表单一个表单至少应该包括:表单标签:处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域:文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:提交按钮、复位按钮和一般按钮81.表单标记FORMaction=mailto:mail地址或网址method=get|postINPUTtype=“表项名”name=“名”size=xmaxlenth=y…../FORMaction属性:E-MAIL地址或网址。method属性:GET/POSTINPUT标记:表单中提供给用户的输入形式。92、文字和密码的输入:type属性为text:输入文本以标准的字符显示。type属性为password:输入文本显示为“*”。3、重置和提交INPUTtype=“reset”value=“按钮名”INPUTtype=“submit”value=“按钮名”104、复选框和单选钮INPUTtype=“radio”name=“控制名”value=“控制初值”checkedINPUTtype=“checkbox”name=“控制名”value=“控制初值”checked表示是否为默认选中项。11head部分包含元素及描述:title:文档标题。meta:描述非html标准的一些文档信息。link:描述当前文档与其他文档之间的连接关系。base:定义体试时默认的外部资源。script:脚本程序内容style:样式表内容121、title:title包含的内容将会被显示在浏览器窗口的标题栏中。语法格式:title…………/title在省略号处加入的文字或符号,都将显示在浏览器的标题栏中。132、meta:下面是meta的几种用法:(1)定义搜索关键字:metaname=keywordscontent=html,css,javascriptmetaname=descriptioncontent=网页制作meta元素提供的信息是用户不可见的,只是提供给那些搜索引擎使用。14(2)控制页面缓存:metahttp-equiv=pragmacontent=no-cache在用户下次打开网页时,浏览器直接调用硬盘上缓存的上次临时版本。如果每次打开网页的时看到最新版本,就加上该语句!15(3)定义语言:metahttp-equiv=“content-type”content=“text/html;charset=GB2312”设定语言的编码方式。便于浏览器正确的选择语言,不需要人工选取。16(4)自动刷新页面METAhttp-equiv=“Refresh”content=“秒数;url=新页面”注意:META标识必须放置在head…/head中http-equiv属性值设置为“Refresh”时,要求显示URL指定的文件。173、script:用来在页面中加入脚本程序。scriptlanguage=脚本语言…………/script在language中一定要指定脚本语言的种类。如VBScript等。184、style:用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。193.2CSS语法CSS简介CSS基本语法CSS基本属性20一、CSS简介CSS(CascadingStyleSheet-“层叠样式表”或“级联样式单”)制作网页时采用CSS技术,可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精确的控制,可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。21“Cascading”即在同一个Web文档中可以有多个样式表存在,根据所在的位置,拥有不同的优先级。优先级越高,就会被最后在显示时采用。从样式表插入的形式来看可以分为三种:1、内联式样式表:利用现有的HTML标记把特殊的样式加入到那些由标记控制的信息中。222、嵌入式样式表:嵌入到HTML文件的头部中去(html和body标记之间),使用Style…/Style容器装载,例如:stylep{color:blue;font-weight:bold}/style对页面中所有p标记都起作用。233、外部式样式表:一种保存在外部的样式表文件,外部文件以.CSS为扩展名,例如:linkrel=stylesheethref=main-sheet.csstype=text/css24CSS扩展HTML但不能脱离HTML,仅是一项辅助工具。减少图形文件使用。CSS提供很多文字样式,可轻松取代原来图形表现的视觉效果。集中管理样式信息。CSS可将网页要展示内容与样式设定分开。设定共享样式。CSS样式信息存成独立文件,让多个网页文件共同使用。样式分类使用。在一份HTML网页文件上套用多个CSS样式文件。25二、CSS基本语法CSS的基本语法:基本格式、注释语句、选择符等是开发CSS基础。通常,样式表的定义分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value).格式:选择符{属性:属性值}26格式:选择符{属性:属性值}开发人员可以在CSS中插入注释来说明代码含义。CSS注释以“/*”开头,以“*/”结尾。CSS中,选择符可以分为:HTML标记选择符(HTMLselector)、类选择符(Classselector)ID选择符(IDselector)。27htmlheadstyletype=text/css!--.m{font-family:隶书;font-size:18px;color:#ff0000;text-decoration:line-through;}--/style/headbodypclass=m这里是FIF制作小组/paclass=mhref=#这里是FIF制作小组/a/body/html281.类选择符styletype=text/css.m{font-family:隶书;font-size:18px;color:#ff0000;text-decoration:line-through;}/stylebodypclass=“m”请注意/paclass=mhref=#这里是FIF制作小组/a/body/html29htmlheadstyletype=text/cssa{font-size:36px;color:#ff0000;text-decoration:line-through;}/style/headbodyp这里是FIF制作小组brahref=#这里是FIF制作小组/a/body/html2、HTML标记选择符30htmlheadstyletype=text/css#5{font-size:24px;color:#0000ff;text-decoration:line-through;}/style/headbodypid=5这里是FIF制作小组braid=5href=#这里是FIF制作小组/a/body/html3、ID选择符31pstyle=“font-size:48;font-style:bold;color:red;”hongen/p这里Style是内嵌到P中来定义该段落内的格式的。在BODY中用STYLE=直接定义。这种定义方法非常适用于编写的代码比较多的情况。而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。32怎样编写CSS?1、把CSS文档放到head文档中:styletype=“text/css”……/style其中style中的“type=‘text/css’”的意思是style中的代码是定义样式表单的。332、把CSS样式表写在HTML的行内。如:pstyle=“font-size:14pt;color:blue”蓝色14号文字/p采用Style=“”的格式把样式写在html中的任意行内,这样比较方便灵活。343、把编辑好的CSS文档保存成“.CSS”文件,然后在head中定义。定义格式:headlinkrel=stylesheethref=“style.css”……/head“href=‘style.css’”指需要连接的文件地址。353.3JavaScript脚本语言JavaScript语言概况JavaScript基本数据结构JavaScript程序构成基于对象的JavaScript语言创建新对象使用内部对象系统窗口及输入输出WEB页面信息的交互363.3.1JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用目的是与HTML语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互,从而开发客户端应用程序。它通过嵌入或调入在标准的HTML语言中实现的。373.3.2JavaScript和JavaJava是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为扩展NetscapeNavigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。38Java是一种面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它是一种基于对象(ObjectBased)和事件驱动(EventDriver)的编程语言。它本身提供丰富的内部对象供设计人员使用。39Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。403.3.3JavaScript基本数据结构一、JavaScript代码的加入直接将JavaScript脚本加入HTML文档:ScriptLanguage=“JavaScript”JavaScript语言代码;JavaScript语言代码;..../Script41二、基本数据类型数值(整数和实数)、字符串型(用“”号或‘’括起来的字符或数值)、布尔型(True或False)和空值。JavaScript采用弱类型的形式,因而一个数据的变量或常量不必首先作声明,而