web程序设计课件2

1、第二章 HTML语言2.1 HTML文档的基本构成 HTML的基本结构如下： 基本HTML页面以标签开始，以结束。 2.1 HTML文档的基本构成 【例】使用HTML设计一个简单的网页 (1) 打开Windows的附件中的记事本功能，输入下列内容，以hello.htm作为文件名保存。一个Hello网页 这是我的第一个网页！2.2.1 设置文本格式 1. 分段标记 段落是文档的基本信息单位。文档中原有的回车和换行均被忽略，分段标记定义一个新段落，换行并插入一个空行。 ALIGN=段落的水平对齐方式 其值如下: Left: 左对齐（默认值） center: 对中 right: 右对齐 justif

2、y: 两边对齐 省略该属性，则取默认值。下同。2换行标记换行标记强行规定了当前行的中断，使后续内容在下一次显示的。 2.2.1 设置文本格式【例】分段标记和换行标记的演示。输入下列内容，以pbr.HTM作为文件名保存： 分段标记和换行标记演示 第1行演示 第2行演示 第3行演示 第4行演示 2.2.1 设置文本格式3. 标题标记 标题标记用于设置文档中的标题和副标题标记表示字体最大的标题，标记表示字体最小的标题。 ALIGN=段落的水平对齐方式 其值如下： Left: 左对齐（默认值） center: 对中 right: 右对齐 Justify: 两边对齐 2.2.1 设置文本格式 【例】各种

3、标题标记大小演示。 输入下列内容，以h16.HTM作为文件名保存： H1-H6标题演示 下面是标题演示 H1标题演示 H2标题演示 H3标题演示/H3 H4标题演示 H5标题演示 H6标题演示 2.2.1 设置文本格式 4. 对中标记 标记中间的内容全部对中。【例】CENTER标记演示。 输入下列内容，以center.HTM作为文件名保存： CENTER标记演示 下面是CENTER标记演示 H1标题演示 H2标题演示 H3标题演示 H4标题演示 H5标题演示 H6标题演示 2.2.1 设置文本格式 5. 块标记 定义文档块。常用属性如下： ALIGN=段落的水平对齐方式 其值如下： Left:

4、 左对齐（默认值） center: 对中 right: 右对齐 【例】DIV标记演示。输入下列内容，以div.HTM作为文件名保存：DIV标记演示下面是DIV标记演示 H1标题演示 H2标题演示 H3标题演示H4标题演示H5标题演示 H6标题演示2.2.1 设置文本格式6. 水平线标记 HR标记在文档中添加一条水平线，用来分隔文档。常用属性如下：ALIGN=段落的水平对齐方式其值如下： Left: 左对齐（默认值） center: 对中 right: 右对齐COLOR=线的颜色NOSHADE=显示一条无阴影的实线SIZE=线的宽度(以像素为单位)WIDTH=线的长度(像素或百分比(占页面宽度的

5、百分数)。2.2.1 设置文本格式 【例】各种水平线的演示。 输入下列内容，以hr.HTM作为文件名保存； 各种水平线的演示 2.2.1 设置文本格式7. 字体标记 使用字体标记FONT来设置文本的字符格式，主要包括字体、字号和的颜色等。常用属性如下：FACE=“字体名表”(字体名之间用“,”分隔) 浏览器首先使用字体名表中的第1种字体来显示标记内的文本。如果在运行浏览器的计算机上没有安装第1种字体，则会尝试字体名表中的第2种字体，直至找到匹配字体。如果到达列表结束，仍然找不到匹配字体，浏览器将使用默认字体。SIZE=“字号值” SIZE属性指定字体的大小（字号），其值从17，默认值为3。SI

6、ZE值越大，显示的字号就越大。也可以使用+或号来指定相对字号，相对于基本字体（BASEFONT）的大小。COLOR=“颜色值” 颜色属性的值有3种表示方法： （1） 使用颜色名称来表示。 （2）使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。（3）RGB(r,g,b)函数表示。r,g,b的数值范围为0255或者0%100%。2.2.1 设置文本格式 【例】使用字体标记来设置文本的字体、字号和颜色。 输入下列内容，以E2_font.HTM作为文件名保存： 设置字体、字号和颜色 设置字体、字号和颜色 设置的中文字体 English FO

7、NT Demo. Good night! 晚安！ 2.2.1 设置文本格式8. 固体字体标记粗体斜体大字体小字体固定宽度字体9. 样式标记上标下标下划线删除线删除线2.2.1 设置文本格式 10. 原样显示标记 将包含其中的内容(包括回车和空格)原样显示出来。 2.2.1 设置文本格式 【例】特殊符号样式。 输入下列内容，以E2_schar.HTM作为文件名保存： 设置字符样式 Microsoft 解二元一次方程 aX2+bX+c=0 解不等式 x+y 2 x-y -1 2.2.2 列表标记 列表格式包括有序列表格式和无序列表格式。 1. 有序列表标记 列表项1 列表项2 列表项n 有序列表是

8、在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标记OL和列表项记LI来创建。 2.2.2 列表标记(1) OL标记 OL标记控制有序列表样式和起始值。有两个常用属性： START=数字序列的起始值(可以取整数值) TYPE=数字序列样式 其取值如下： 1：表示阿拉伯数字1、2、3等，此为默认值。 A：表示大写字母A、B、C等 a：表示小写字母a、b、c等 I：表示大写罗马数字I、II、III、IV等 i：表示小写罗马数字i、ii、iii、iv等 (2) LI标记 LI标记定义列表项。位于和标记之间。LI标记有两个常用属性： TYPE=数字样式(其取值与OL标记的TYPE属性相同) V

9、ALUE=新的数字序列起始值以获得非连续性的数字序列2.2.2 列表标记【例】创建有序列表。 输入下列内容，以E2_olli.HTM作为文件名保存： 有序列表示例 用数字表示的列表 电子管 晶体管 小规模集成电路 中规模集成电路 大规模集成电路 2.2.2 列表标记 2. 创建无序列表 无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记UL和列表项标记LI来创建。 列表项1 列表项2 列表项n 2.2.2 列表标记UL标记控制列表项前面显示的项目符号。常用属性如下： TYPE=列表项前面显示的项目符号 其取值如下： disc：使用实心圆作为项目符号（默认值） circ

10、le：使用空心圆作为项目符号 square：使用方块作为项目符号注意：在IE浏览器中，TYPE属性的值是区分大小写的。2.2.2 列表标记【例】创建无序列表。输入下列内容，以ulli.HTM作为文件名保存：无序列表计算机课程计算机导论操作系统计算机原理数据结构2.2.2 列表标记3. 描述性列表 列表描述项 列表项 列表项 列表描述项 【例】创建描述性列表。输入下列内容，以dldt.HTM作为文件名保存：描述性列表描述性列表江苏省 镇江市 常州市 扬州市山东省 济南市 青岛市2.2.3 多媒体标记 1. 图像标记 SRC=图像文件的URL地址 图像可以是JPEG文件、GIF文件或PNG文件。

11、ALT=图像的简单文本说明 在浏览器下不能显示图像或图像加载时间过长时显示该文本。 HEIGHT=显示图像的高度(像素或百分比) WIDTH=显示图像的宽度(像素或百分比)HSPACE=与左右相邻对象的间隔(像素) VSPACE=与上下相邻对象的间隔(像素) ALIGN=图像不到显示区域大小时的对齐方式 ALIGN属性的取值如下： top：图像与文本顶部对齐。 middle：图像与文本中央对齐。 bottom：图像与文本底部对齐也可以在图像的左右绕排文本，此时ALIGN属性的取值如下： left：图像居左文本居右right：图像居右文本居左2.2.3 多媒体标记 BORDER=图像边框点数。

12、CONTROLS：指定该选项后，若有多媒体文件，则显示一套视频控件。 DYNSRC=指定要播放的多媒体文件的URL。 在IMG标记中，dynSRC属性优先于SRC属性。 START=何时开始播放多媒体文件 其取值可以是fileopen或mouseover。 LOOP=多媒体文件的播放次数(整数) 如果不限播放次数，则应将该属性设置为关键字infinite。 LOOPDELAY=两次播放之间的延迟。 2.2.3 多媒体标记【例】网页中的多媒体。输入下列内容，以img.HTM作为文件名保存： 在网页中的多媒体2.2.3 多媒体标记2. 插入字幕标记 滚动显示的信息 在HTML语言中，用于水平或垂直

13、滚动显示文本信息。主要属性如下： ALIGN=字幕与周围文本的对齐方式其取值如下：top、middle、 bottomBEHAVIOR=文本动画的类型其取值如下：scroll：滚动slide：滑行alternate：交替BGCOLOR=字幕的背景颜色DIRECTION=文本的移动方向其取值如下：down、left(默认)、right、up2.2.3 多媒体标记【例】网页中插入一个字幕。输入下列内容，以E2_marquee.HTM作为文件名保存：在网页中插入一个自下而上移动的字幕2008年北京奥运会全世界将看到一个无比美丽的北京2.2.3 多媒体标记3. 插入背景音乐标记主要属性如下： LOOP

14、=声音播放的次数。0：播放一次；大于0的整数：播放指定的次数；-1：则声音反复播放，直到页面卸载。 SRC=播放的声音文件的URL。常用的声音文件类型：波形文件（.wav）MIDI文件（.mid） AIFF文件（.aif） AU文件(.au) MP3文件（*.mp3）2.2.3 多媒体标记【例】在网页中插入背景音乐。输入下列内容，以bgsound.HTM作为文件名保存：在网页中插入背景音乐当前网页正在演奏歌曲！2.2.4 使用表格 通过TABLE标记来定义表格；表格中的每一行通过TR标记来表示；行中的单元格通过TD或TH标记来定义，其中TH标记定义表格的列标题单元格；表格的标题说明通过CAPT

15、ION标记来定义。 表格标题文字第1列表头第2列表头第n列表头第1列数据第2列数据第n列数据第1列数据第2列数据第n列数据2.2.4 使用表格2.2.4 使用表格 1. 设置表格的属性 TABLE标记创建表格时，可以设置下列属性： ALIGN=表格的对齐方式 BACKGROUND=表格背景图片的URL地址 BGCOLOR=表格的背景颜色 BORDER=表格边框的宽度(像素)，默认值为0。 BORDERCOLOR=表格边框颜色，BORDER0时起作用。CELLPADDING=单元格内数据与单元格边框之间的间距(像素) CELLSPACING=单元格之间的间距(像素) WIDTH=表格的宽度(像素

16、或百分比) 2.2.4 使用表格 2. 设置行的属性 表格中的每一行是用TR标记来定义的，可以设置下列属性： ALIGN=行中单元格的水平对齐方式。取值为left（默认值）、center或right。 BACKGROUND=作为行的背景图像文件的URL BGCOLOR=行的背景颜色 BORDERCOLOR=行的边框颜色。只有当TABLE标记的BORDER0起作用。VALIGN=行中单元格内容的垂直对齐方式 其取值如下：top、 middle、bottom、baseline2.2.4 使用表格 3. 设置单元格的属性 表格的单元格通过TD标记来定义，标题单元格也可以通过TH标记来定义。TD标记和

17、TH标记可以设置下列属性： ALIGN=行中单元格的水平对齐方式。取值为left（默认值）、center或right。 BACKGROUND=单元格的背景的图像的URL BGCOLOR=单元格的背景颜色。 BORDERCOLOR=单元格的边框颜色。只有当TABLE标记的BORDER0起作用。COLSPAN=合并单元格时一个单元格跨越的表格列数。 ROWSPAN=合并单元格时一个单元格跨越的表格行数。 VALIGN=单元格中文本的垂直对方方式。 NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。 2.2.5 使用超链接 1. 创建文件链接 使用A标记来创建超链接，常用属性如下：

18、 HREF=目标端点的URL地址（可以包含一个或多个参数） 在浏览器中，如果要链接到的文件是一个HTML文档，则在当前窗口或其他目标窗口中装载该文档。 TARGET=窗口或框架的名称 目标文档将在指定的窗口或框架中打开。如果省略该属性，则目标文档当前窗口打开。TARGET属性的取值既可以是窗口或框架的名称，也可以是如下保留字： _blank：未命名的新浏览器窗口 _parent：父框架页或窗门中。如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中。 _self：所在的同一框架或窗口中 _top：整个浏览器窗口中，并删除所有框架。2.2.5 使用超链接【例】使用A标记创建超链接

19、。输入下列内容，以a.HTM作为文件名保存：FONT FACE=创建超链接下面是超链接示例内大 内蒙古大学2.2.5 使用超链接2. 创建锚点链接 锚点链接的目标端点是网页中的一个位置。创建锚点链接时，要在页面的某处设置一个位置标记（锚点），并给该位置指定一个名称，以便在同一页面或其他页面中引用。3. 创建邮件链接 通过邮件链接(E-mail链接)可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。 该标记的HREF属性应由3个部分组成：第1部分是电子邮件协议名称mailto。第2部分是电子邮件地址。第3部分是可选的邮件主题，其形式为“subje

20、ct=主题”。第1部分与第2部分之间用冒号( : )分隔，第2部分与第3部分之间用问号(?)分隔。2.1.6 表单及其控件标记 1. 表单标记 FORM标记具有以下属性： NAME=表单的名称。命名表单后，可以使用脚本语言来引用或控制该表单。 METHOD=表单数据传输到服务器的方法 其取值如下： post：在HTTP请求中嵌入表单数据 get：将表单数据附加到请求该页的URL中 2.1.6 表单及其控件标记ACTION=接收表单数据的服务器端程序或动态网页的URL地址。TARGET=目标窗口 其取值如下： _Blank：在未命名的新窗口中打开目标文档。 _parent：在显示当前文档的窗口的

21、父窗口中打开目标文档。 _self：在提交表单所使用的窗口中打开目标文档。 _top：在当前窗口内打开目标文档，确保目标文档占用整个窗门。2.1.6 表单及其控件标记 (1) 单行文本框创建单行文本框方法如下： 属性NAME=单行文本框的名称，通过它可以在脚本中引用该文本框控件。VALUE=文本框的值DEFAULTVALUE=文本框的初始值SIZE=文本框的宽度(字符数)MAXLENGTH=允许在文本框内输入的最大字符数Readonly=只读2.1.6 表单及其控件标记 (2) 密码文本框 密码文本框也是一个单行文本框。当站点访问者在这个框中键入数据时，大部分的Web浏览器都会以星号显示密码以

22、不让别人看到输入内容。 (type=“password”)(3) 隐藏域 表单中添加隐藏域站点访问者不能看见隐藏域的信息，每一个隐藏域都要有自己的名称和值。当提交表单时，隐藏域的名称和值就会与可见表单域的名称和值一起包含在表单结果中。(type=“hidden”) 2.1.6 表单及其控件标记 (4) 复选框 表单中添加复选框可以让站点访问者去选择一个或多个选项或不选项。创建复选框方法如下： 选项文本 属性 NAME=复选框的名称 VALUE=选中时提交的值 CHECKED：当第一次打开表单时该复选框处于选中状态。该复选框被选中，值为true，否则为false。该属性是可选的。 2.1.6 表

23、单及其控件标记(5) 单选按钮表单中添加单选按钮可以让站点访问者从一组选项中选择其中之一创建单选按钮方法如下：选项文本其中：NAME=单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项。VALUE=提交时的值CHECKED：当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。例如:2.1.6 表单及其控件标记 (6) 按钮 使用INPUT标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下： 属性 TYPE= submit：创建一个提交按钮。在表单中添加提交按钮后，站点访问者就可以在提交表单时，表单数据（包括提交按钮的名称和

24、值）以ASCII文本形式传送到由表单的ACTION属性指定的表单处理程序。 TYPE=reset：创建一个重置按钮。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。 TYPE=button：创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为按钮编写脚本。 NAME=按钮的名称 VALUE=显示在按钮上的标题文本2.1.6 表单及其控件标记【例】创建一个登录表单，其中包含有文本框、密码框、自定义按钮。输入下列内容，以input.HTM作为文件名保存：创建登录表单登录名：密码：2.1.6 表单及其控件标记 (7) 文件域 文件域由一个文本框和一个“浏览”按

25、钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。创建文件域方法如下： 其中： NAME=文件域的名称 VALUE=文件名 SIZE=文件名输入框的宽度2.1.6 表单及其控件标记【例】创建一个表单，其中包含文件域、提交按钮和重置按钮。输入下列内容，以input2.HTM作为文件名保存：文件域请选择文件：2.1.6 表单及其控件标记(8) 图像提交按钮 图像提交按钮与提交按钮在表单中的区别仅仅是提交按钮上用图像代替按钮文本标题。图像提交按钮使用INPUT标记来创建方法如下： 其中： SRC=所用图像的URL地址 VALUE=提供图像的替换

26、文本其他同提交按钮。 2.1.6 表单及其控件标记3. 其他表单控件(1) 滚动文本框 表单中添加滚动文本框可以接受站点访问者输入多于一行的文本。创建滚动文本框方法如下： 初始值其中： NAME=滚动文本框控件的名称 ROWS=控件的高度（以行为单位） COLS=控件的宽度（以字符为单位） READONLY：滚动文本框的内容不被用户修改 创建滚动文本框时，在和标记之间输入的文本将作为该控件的初始值。2.1.6 表单及其控件标记(2) 选项选单 表单中选项选单让站点访问者从列表或选单中选择选项。选单中可以选择一个选项，也可以设置为容许作多重选择。创建选项选单方法如下： 选项1 选项2 其中：NAME=选项选单控件的名称SIZE=在列表中一次可以看到的选项数目（默认为1）MULTIPLE：允许作多项选择SELECTED=该选项的初始状态为选中。当提交表单时，选单的名称会被包含至表单结果中，其后并有一份所有选项值的列表。2.1.6 表单及其控件标记2.1.7 多框架文档 框架网页通过一个FRMAESET(框架集)标记和多个FRAME(框架)