第3章 静态网页开发技术概要1.pptVIP

Java Web开发技术教程 第3章 静态网页开发技术 主要内容 使用HTML标签语言完成基本的页面显示、实现表单的编写。 编写简单的JavaScript脚本完成客户端行为的控制。 通过CSS层叠样式表实现对页面的美化。 HTML简介 HTML（超文本标记语言） HTML是Hypertext Marked Language(超文本标记语言)的缩写，是一种用来描述超文本文档的标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，Windows等）。所谓超文本文档，是指在其中可以加入图片、声音、动画、影视等内容，并且它可以利用超链接非常方便地从一个文件跳转到网络上其他主机的另一个文件。 　　HTML文档在普通文件中文本上加上标签，使其达到预期的显示效果。当一个浏览器打开一个HTML文档时，会根据标签的含义显示HTML文档中的文本。标签是由“标签名字　属性”来表示。例如： body background＝back-ground.gif This is my first html file. p /body HTML标签的结构形态 标签元素/标签 其中/标签表示标签的结束，标签的作用范围到/标签为止。 标签 属性名＝“属性值”元素/标签 其中属性往往表示标签的一些附加信息，一个标签可以包含多个属性，各属性之间无先后次序用空格分开。 标签 指标签单独出现，只有开始标签，没有结束标签。也称为空标签。 HTML文件结构 超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 html 　　　head头 部 信 息，如标题/head 　　　body 正 文 部 分 /body /html 　　 其中html在最外层， 表示这对标记间的内容是HTML文档。一些HTML文档省略了html标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。head 之间包括文档的头部信息，如文档的标题等，若不需头部信息则可省略此标记。body 标记一般不省略， 表示正文内容的开始。 一个简单的超文本文档的源代码 html标签 【功能】 通知浏览器该文件是html文件 【说明】 html/html标签任意删去一个或全部，不会影响显示效果。 html和/html标签的前后任意加一些字符是错误的。 【例3-1】 html.html body标签 （1）text属性（设定文字颜色） 【例3-2】bodytext.html （2）bgcolor属性（设定背景色） 【例3-3】bodybgcolor.htm 【说明】在HTML中颜色可以用“#RRGGBB”形式的16进制数码，或者是下列预定义色彩：Black黑色，Olive橄榄色 ，Teal黑绿色 ，Red红色，Blue蓝色，Maroon绛紫色 ，Navy藏蓝色 ，Gray灰色，Lime草绿色 ，Fuchsia紫红色 ，White白色，Green绿色，Purple紫色，Silver银灰色，Yellow黄色，Aqua海蓝色。 　　一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签Hn,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： H1…/H1　　　　　第一级标题 H2…/H2　　　　　第二级标题 H3…/H3　　　　　第三级标题 H4…/H4　　　　　第四级标题 H5…/H5　　　　　第五级标题 H6…/H6　　　　　第六级标题 【例3-4】hn.html p标签和br标签 （1）p标签 为了排列的整齐、清晰，文字段落之间，我们常用p/p来做标记。文件段落的开始由p来标记，段落的结束由/p来标记，/p是可以省略的，因为下一个p的开始就意味着上一个p的结束。 　　p标签还有一个属性align，它用来设置段落中的文本的对齐方式，一般对齐方式有center（居中）、left（居左）、right（居右）三种。 【例3-5】p.html （2）br标签 br标签的作用 链接 超文本中的链接是其最重要的特性之一，利用它使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下： 【格式】a href=URL文本/a 【说明】 （1）标签a表示一个链接的开始，/a表示链接的结束； （2）属性“href”定义了这个链接所指的地方； （3）通过点击“文本”可以到达指定的文件。 【示例】 a href=/list.asp建议或意见/a 浏览器读到这个标签时，会用蓝色显示文本“建议或意见”,单击这行文本，页面会跳转到URL为/list.asp的页面。 HTML中的表格  表格是HT