1、JSP,实用教程,课件制作者：吴剑云,（耿祥义、张跃平编著）,（清华大学出版社）,附加A： HTML基础知识,回忆以前知识点： 一、 Web浏览器的工作原理 二、 URL 三、 HTML 四、 HTTP,Web浏览器的工作原理（和Http协议）,Web浏览器与Web服务器连接Web浏览器请求一个文档Web服务器将请求的文档传回Web浏览器显示文档Web浏览器关闭与Web服务器的连接,URL（ Uniform Resource Locator ）,它是文件名的扩展。在单机系统中，如果找一个文件，需要知道文件的路径和文件名。在Internet中相同，还必须知道文件存放在哪个网络的哪台主机中。两者的
2、区别： 在单机系统中文件由统一的OS来管理，所以不必给出访问该文件的方法； 在Internet，每个网络，每台主机的OS都不同，所以必须制定访问该文件的方法。,一个Url包括以上所有的信息，构成格式: Protocol:/machine.name:port/directory/filename,HTML,超文本：1969年提出，实际上是一种解决菜单与信息分离的机制，把可选菜单项嵌入文本中的概念成为“超文本”。例如链接。它采用指针连结的网状交叉索引方式，对不同来源的信息加以链接，即，一个文本文件，含有多个指针，而指针可以指向任何形式的文件。,HTTP,超文本传输协议 4个步骤： 客户机与服务器建
3、立连接 客户机向服务器发送请求，在请求中指明所要求的特定的文件 如果请求被接纳，那么服务器便发挥一个应答。 客户机与服务器断开连接。无状态协议，即从一个请求到另一个请求不保留任何有关的连接信息。每次连接，只完成一个请求。,一、 定义：HTML（Hyper Text Markup Language，即超文本标记语言）是一种用来制作超文本文档的简单标记语言。二、 HTML文档用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。用于描述网页的格式设计和它与WWW上其它网页的链接信息。 HTML文档（即网页的源文件）是一个放置了标记的ASCII文本文
4、件，通常它带有.html或.htm的文件扩展名。生成一个HTML文档主要有以下三种途径：,A.1 HTML基础知识,（1） 手工直接编写 （2） 通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。 （3）借助专用制作工具软件，如Frontpage、Dreamweaver等进行设计与制作。三、 HTML文件组成HTML是标记语言，HTML文件由元素组成，即标记符号标记通常放在文本块的两边。这些文本块和它们的两端的标记被称为元素。而IE等Web浏览器则通过分析这些元素，以决定在屏幕上显示的内容和如何显示。,主要内容: 标记：总的框架、字符格式、字体、行、对齐方式、图象、
5、链接、列表 表格 框架 表单 CSS,HTML容器标记字符格式编排标记字体标记行格式编排标记和 标记对齐方式属性和标记列表标记图象和链接,A.1.1 HTML 容器标记 下面通过示例说明常用标记的用法。1-1Hello World!说明：每一个元素都有一个开始和结束标记， 格式：开始标记：, 结束标记为：,执 行 结 果,基本结构：标签具有相同的结构：内容 例如：黄色背景 ,Listing 2-2This is some bold text. This is some italic text. This is some underlined text. This is some striket
6、hrough text. This is some fixed-width text. This is some subscripted text. This is some superscripted text.,A.1.2 字符格式编排标记,A.1.3 字体标记Listing 2-3Color! Size! Typeface! Many Changes!,A.1.4 行格式编排标记Listing 2-4This is an example of a paragraph.This is another paragraph.This is a level-1 heading.This is a
7、 level-2 heading.This is not followed by a break.This is followed by a break.This is not followed by a break.This is not followed by a break.,和 标记将一个文本定义为一个段落，其中是可选的，如果IE遇到一个新的标记,它会自动结束前面的段落。标记定义了段落的标题标记定义了一个行分隔符。思考： Html 输出是基于窗口的，因而Html文件在输出时都要重新排版，即把文本上任何额外的字符（如空格）都忽略，若确实不需要重新排版的内容，可以用？标记,A.1.5 和
8、标记Listing 2-5,This is an example of some preformatted text.Notice how the page is displayed with the same spacing andline breaks as the code.One of these lines uses no-break and one does not.One of these lines uses no-break and one does not. ,A.1.6 对齐方式属性和标记Listing 2-6This text is left-aligned. This
9、 text is centered. This text is right-aligned. This text is also entered. ,A.1.7 列表包括无序列表和有序列表 一、无序列表 是一个项目的列表，此列项目使用粗体圆点等进行标记。 无序列表始于 标签。每个列表项始于 。,不同类型的无序列表：设置type属性,A.1.7 列表 二、有序列表 有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 标签。每个列表项始于 标签。,不同类型的有序列表： 设置type属性,A.1.8 图像和超链接标记Listing 2-7Here is an image .This ima
10、ge has been given an alignment. This causes the image to be removed from the flow of the text and displayed at a particular location relative to the surrounding text., Here is a link to Microsoft.The next link has a picture and text and links to a local file.textThis final link points to a bookmark
11、in the file “other.htm“.Link to bookmark,说明： 用来把一幅图像放在网页上。结束标记是可 选的。图像是一个内嵌的元素，可以随着文本移动。SRC属性指定了图象的来源，包括存放图像源文件的路径。WIDTH指定图象的宽度,象素值HEIGHT指定图象的高度,象素值ALT：提示语句BORDER：边框线的宽度 :之间的文本是超链接的标记，HREF 定义了IE 应该访问的位置，可以是任何有效的Web 网址。,相对路径还 是绝对路径,同一个文件中多次使用同 一个图象时使用什么路径,A.2 表格,A.2.1 表的基础知识: 表是由和来标记的。 在表标记内在使用表的行标记和
12、定义数据行。 每行内单元格由表的数据标记和定义。 BORDER为边框属性。, Listing 3- 1 R1, D1Row 1, Data 2Row 2, Data 1This is Row 2, Data Column 2,Listing 3-2 R1,D1Row 1, Data 2Row 2, Data 1This is Row 2, Data Column 2,R1,D1Row 1, Data 2Row 2, Data 1This is Row 2, Data Column 2,CELLPADDING:控制单元格的文本和边框之间的距离；CELLSPACING：控制单元格之间的距离；BAC
13、KGROUND：能够使得单元格或表的后面显示一幅图象；,BGCOLOR： 控制背景颜色；BORDERCOLOR：边框颜色；BORDERCOLORLIGHT：边框颜色亮度；BORDERCOLORDARK：边框颜色暗度；,A.2.2 不同大小的单元格COLSPAN：设置单元格的列宽 (跨列) ROWSPAN：设置单元格的行宽（跨行）Listing 3-3 Row 1, Data 1Row 2, Data 1Row 2, Data 2,表格基本结构,在HTML中，定义一个表格要用到元素table、caption、th、tr和td元素table定义整个表格 元素caption定义表格标题 元素tr定义
14、表格的行 元素th定义表格表头单元格 元素td定义表格单元, 表格标表头单元格1表头单元格2单元1单元2 ,Fruit SalesStore 1Store 2Apples Day140 25, Day230 30Oranges Day1 4025Day230 30,A.2.3 嵌入式表在一个表中包含或嵌入另一个表及其它内容。VALIGN属 性控制单元格的竖对齐。Listing 3-5 1ABCD,EFGH2,A.3 框架 一、定义：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。 框架集是 HTML 文件，它定义一组框架的布局和属性，包括框架的
15、数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容，但 noframes 部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 (数据库和表),要在浏览器中查看一组框架，请输入框架集文件的 URL；浏览器随后打开要显示在这些框架中的相应文档。 注意：框架不是文件。您很可能会以为当前显示在框架中的文档是构成框架的一部分，但该文档实际上并不是框架的一部分 - 任何框架都可以显示任何文档。 （相当于结构） 如果一个站点在浏览器中显示为包含三个框架的单个页面，则它实际上至少由四个单独的 HT
16、ML 文档组成：框架集文件以及三个文档，这三个文档包含在这些框架内初始显示的内容。在 设计使用框架集的页面时，必须保存全部这四个文件，以便该页面可以在浏览器中正常工作。,二、举例Listing 3-8,和为框架标记 FRAMESET两个主要属性 ROWS：指明每一个框架在屏幕分配的总行数。例如：ROWS=“50，*”：设置一个包含两行的框架。可以使用象素值、百分比以及*表示。 COLS：指明每一个框架在屏幕分配的总列数。设置网页的分栏数和每栏所占的宽度。例如上例中，第一栏占浏览窗口的50%，第二栏占70个像素的宽度，第三栏占剩余的全部空间。同表一样，框架设置支持嵌入或嵌套，一个框架可包含或可以
17、嵌入其他框架中。,Listing 3-9,FRAMESPACING属性控制着框架之间的空间 FRAMEBORDER：打开（yes/1）或者关闭（no/0）框架边框 border表示边框的浓度 FRAME标记：6个属性：SRC:指明框架内显示文档的URL NAME:为框架命名。通过名称可以实现一个框架定位到另一个框架的方法。 MARGINWIDTH:可选项，用来设置左右页边距。 MARGINHEIGHT: 同上，上下页边距。象素值 SCROLLING：决定滚动条是否及何时出现在框架中。值有YES,NO,Auto选项。 NORESIZE:可选项，标记用户不能改变框架的大小.,A.3.2 跨框架定位
18、从某一框架内容为其他框架定位。利用此项功能可以创建导航栏，导航框架中的定位标记应能定位框架设置中的其他框架。(最常用的方法) 例如：nav.htm 包含了一系列连接。见案例index.htm,nav.htm文件如下： Go to Frame 1Go to Frame 2Go to Frame 3,TARGET：可以设置不同的值，表示建立一个从某个框架到一个不在框架中的页上的链接。以下是特殊值(见index_other.htm._blank 在一个新建的空窗口中读取文档；_self 在包含连接的窗口中读取文档；_parent 在包含连接的父窗口中读取文档；若没有父窗口，则同_self _top
19、将HREF中指定的Url装载到整个浏览器中，因而即是去掉任何框架,A.4 表单、其它HTML标记 A.4.1 表单 类似于VB中的form。作为HTML控件的容器用。,Listing 41 This page contains a form.A text field follows.,一、表单标记 1. 定义了表单的范围，并且支持多种属性。 NAME：表单的名称 ACTION：为传递信息的表格指定URL。 METHOD：指定将表单提交给服务器的方式。 get(获得）：在URL的末尾附加要向服务器发送的输入到表单中的信息 ，它是缺省的。 post (邮递)：它发送给服务器的输入到表单中的信息作为
20、一个数据体。,2. 和：输入标记，使用TYPE属性，可以指定控件的类型。 3. 工作原理：当读者按submit按钮时，表单的内容将以数据流的形式发送给HTTP服务器，其格式为 action? txtFld =value,This text is next to check box 1.This text is next to check box 2.This text is next to the first radio button.This text is next to the second radio button. , 标记是创建HTML控件的工具。TYPE属性指定控件类型。 单行文
21、本框：TEXT 复选框：CHECKBOX 单选按钮：RADIO 口令域:PASSWORD 文件选择对话框：FILE 图象域：IMAGE 按钮：BUTTON 特殊按钮：SUBMIT 和 RESET 隐藏域：HIDDEN,三、 文本区域标记(多行文本显示)Listing 4-3This text is inside TEXTAREA 1. Note how lines of code areautomatically wrapped .This text is inside TEXTAREA 2. Note how lines of code are not automatically wrapp
22、ed , 标记允许输入多行文本。 COLS=一行输入的字符数 ROWS=无须使用滚动条允许输入的行数 WRAP=“off/soft/hard”off-关闭掉文本换行功能（ 默认值）soft（ virtual ）-软回车hard（ physical ）-硬回车 hard 则会强迫浏览器在送资料到Web服器端時必须将实际文字中的换行一并输出； soft 则送出连续成串的字除非使用者按了鍵盤的 RETURN / ENTER）。,四、 选择和选项标记 Listing 4-4Select one item:Text of option 1Text of option 2Text of option 3
23、Text of option 4Text of option 5,Select one item:Text of option 1Text of option 2Text of option 3 Text of option 4Text of option 5Select multiple items:Text of option 1Text of option 2Text of option 3 Text of option 4Text of option 5,支持两种类型的列表：组合框和列表框。定义了列表框中的一项。结束标记可以省略 MULTIPLE ：允许选择多项 当提交时，以NAME=
24、value 方式返回被选上的文本。综合例子：表单/first.htm,一、 注释标记Listing 4-5This is a normal block of HTML. The rest of the HTML on this page does not display because it is disabled, or “commented out,“ through the use of comments.,A.4.2 其他HTML标记,line of HTML is commented out in both browsers.This type of comment is part
25、of HTML 4.0.This one comments out some more HTML.This is yet more commented out HTML. This type of comment tag does not work in Netscape 3 and 4.,二、图像地图：原来的图像链接指针每幅图只能指向一个地点， 而图像地图可以把图像分成多个区域，每个区域指向不同的地点。,MicrosoftW3CMicrosoft Press,用户端图像地图的格式为：src=“url“ 用于指定用作图像地图的图像。 usemap属性指明这是客户端图像地图。 其中的“#myma
26、p”是图像文件说明部分的标记名，浏览器寻找名字为mymap的元素并从中得到图像地图的分区信息。 客户端地图的分区信息用元素说明，图像地图的各个区域用说明，MAP包含任意个AREA元素 shape属性用rect指定矩形，circ指定圆形，poly指定多边形。 coords属性，对于圆，前两位是圆心坐标，第3位是半经；对于矩形，分别是左上角和右下角坐标；对于多边形，每一对数字都是顶点坐标。,三、和HTML只是赋予内容的手段，大部分HTML标签都有其意义（标签p创建段落，h1标签创建标题等等）的，然而span和div标签似乎没有任何内容上的意义。但是和CSS结合被用得十分广泛,举例：,Here is
27、 some text in a SPAN. Here is some text in a DIV.,span和div的不同之处在于span是内联的，用在一小块的内联HTML中，而div（想想division是什么意思）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码。,Span_div.htm,四、 标记。 该标记与PRE标记所起的作用相似，除了可以将显示的文本格式定义为与HTML文本相同的间隔之外，还能够将HTML的源文件显示到屏幕上。, This paragraph contains bold, italic, and underline tags.This parag
28、raph contains bold, italic, and underline tags.,Xmp.htm,A.5 级联式样式表CSSCascading Style Sheet 一、 CSS优点 1. 分离：只修改一个.css文件就可以改变页数不定的网页外观和格式，通过样式表将样式和HTML标记分离，只要修改样式表就可以改变与之相关联的HTML标记所标记的内容的样式。 2 .自由：可以自由地控制页面布局和外观 3. 兼容：在所有浏览器和平台间具有较好的兼容性 4. 精简：精简网页，提高下载速度，可精简HTML代码。,二、 CSS语法 CSS的定义是由三个部分构成: 选择器(selector
29、)，属性(properties)和属性的取值(value)。 属性和值被冒号分开，并由花括号包围，即一个完整的样式声明：语法: selector property: value (选择器属性:值),提示：如果值为若干单词，则要给值加引号,提示：如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。 然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。,应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样： p text-align:
30、center; color: black; font-family: arial; ,html标签选择器 类选择器 Id 选择器 关联选择器 组合选择器,三、样式表的选择器,可分为以下五种,任何HTML元素都可以是一个CSS的选择符。选择符仅仅是指向特别样式的元素。例如， P color: red当中的选择符是P。这就决定了此页面中所有p标签的样式。,1 html标签选择器,A:针对所有类的选择器，类的声明也可以无须相关的元素:在这个例子，名为note的类可以被用于任何元素。.note font-size: x-large;color:#0000FF类选择器样式可以被用于任何元素的用法 类选择
31、器样式可以被用于任何元素的用法,2 类选择器,2 类选择器,B：针对特定标签的类选择器 单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。 p.one color: #191970 p.two color: #4b0082 以上的例子建立了两个类，one和two，供HTML的p标签元素使用，而且只能对p标签起作用。p.one color:#00FFCC p.two color:#0000FF针对特定标签的类选择器的用法 针对特定标签的类选择器的用法,ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符“#“在名字前
32、面。例如，ID选择符可以指定如下:#svp94O text-indent: 3em 文本缩进3em,3 Id 选择器,关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符 P EM background: yellow 是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。如：p embackground: yellow;color: #00FF99;关联选择器样式可以被用于任何元素的用法,4 关联选择器,他与p.one类选择器的区别是P EM中
33、em一定是可以嵌入在p标签中的标签，而p.one中的one是用户自己定义的，然后在p标签的class属性中引用即可。,为了减少样式表的重复声明，组合的选择符声明是允许的。 例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 color: redH1, H2, H3, H4, H5, H6 color: red; font-family: sans-serif; 组合选择器样式可以被用于任何元素的用法 组合选择器样式可以被用于任何元素的用法,5 组合选择器,A.5 级联式样式表CSS 四、CSS分类,层叠样式表， 包含二层意思， 第一它是样式表， 第
34、二是样式可以层叠,这种分类的标准是从html页面怎么引用css样式的角度出发的，主要有四种：,内联式样式表 嵌入式样式表 外部式样式表 导入式样式表,什么是内联式样式表呢？就是直接在标签中加入样式。内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性, 这是内联式样式表的用法,优点：是可以精确地控制某个标签的样式； 缺点：如果这种样式被很多其他标签引用，那就要在页面中写很多重复的样式代码；,怎么解决这种问题呢，能不能把相同的样式写到一处让页面中引用呢？可以的，采用嵌入式样式表。,可以在HTML文档的标记之间插入一个.块对象。, p color:#00FF00;backgro
35、und-color:#FF0099;font-size: 18px;张三：嵌入式表的用法,优点：是在同一页面中可以共享相同的样式表了； 缺点：但是在真正的项目中有很多的页面，如果不同的页面都想要引用相同的样式那怎么办呢？,当然可以在每个页面中copy相同的样式，能不能把每个页面都想要的样式放到一个单独的文件中，然后让想要此样式的页面引入呢？可以的。这就可以采用“外部式样式表”。,外部式样式表：把样式放到一个单独的文件中，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部。,如把上面的样式放到文件test.css中： test.css:p color
36、:#00FF00; background-color:#FF0099; font-size: 18px; , test张三：外部式表的用法,文件不能包含任何的 html标签。样式表应该以 .css 扩展名进行保存。,优点：是可以对所有的页面进行规化， 需求：比如项目中写了多个样式，能否对他们进行组合呢,这时多个样式相当于各个样式模块，这也就是能否对这些样式模块进行组合、重用等，可以的，采用“导入式样式表”。,在自己的样式表中导入其他的样式表，这里导入只能导入其他样式表的文件,import url(test.css);张三：导入式表的用法,这是在嵌入样式表中加导入样式表，当然也可以在外部式样式表
37、中加入导入样式表。,例子：.head2 font-size: 24px;font-style: italic;font-weight: bold;color: red; bodyfont-family: Verdana, Arial, Helvetica, sans-serif;font-size: 15px;background-color: #FbFbFb; a:link color: #0000FF ;text-decoration: none; a:visited color: #00FF00;text-decoration: none; a:active color: #FF0000
38、;text-decoration: none; a:hover text-decoration: underline; ,CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。需要通过伪类（令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内）来控制这些效果。, This text is red! This text is black! This text is green! 青岛大学 青岛信息港见案例link_css.html,五.CSS样式规则的优先级,当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下
39、面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。浏览器缺省设置 外部样式表 内部样式表（位于 标签内部） 内联样式（在 HTML 元素内部）,六. CSS的注释,CSS注释以“/*“ 开头，以“*/“ 结尾，如下： /* 定义段落样式表 */p text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ ,A.6 多媒体效果,会动的文字 播放音乐 播放视频,会动的文字,标记 会移动的文字 ，见示例marquee.htm,（1）方向 #=left,ri
40、ght,up,down 缺省是left 例如： 从右向左移！,会动的文字,（2）方式(滚动的类型)#=scroll,slide, alternate,两端 来回 弹动,从屏幕的一边开始显示文本，并在滚动文本框中不断移动直到屏幕的另一端,从屏幕的一边开始显示文本，并在滚动文本框中移动文本直到文本碰到屏幕的另一端,（3）循环 #=次数，若未指定则循环不止或者值为-1（4）滚动文本框的速度 控制滚动文本框每次重画间隔的象素值设置了重画间的延迟,嵌入多媒体标记和：需要安装相应的插件1、背景音乐 三种方式： yinyue.htm、 yinyue2.htm、 yinyue3.htm,2、插入视频剪辑：两种方法 嵌入用插件播放的视频 IE内嵌avi视频，使用img标签，dynsrc格式何时播放视频：start格式： #=fileopen, mouseover 缺省值是 #=fileopen，即在加载完毕时开始播放AVI。 mouseover 是指把鼠标移到AVI播放区域之上时才开始播放AVI。,总结： 各种标记：见程序通用标记（表格，格式的输出等） 框架：见程序框架 表单：见程序表单 CSS：见程序css 多媒体效果,
