Transcript pps
Slide 1
第二章 HTML基础
教学内容
2.1
HTML文档的结构
2.2
设置文本格式首 页
2.3
使用图像
2.4
字幕和背景音乐
2.5
使用表格
2.6
使用超链接 退 出
2.7
使用表单
退
网页设计与制作
出
上 页
下 页
Slide 2
知识要点：
• 基本的HTML语法结构
• 常用的HTML 标记的使用
首 页
上 页
下 页
退 出
Slide 3
2.1 HTML文档的结构
2.1.1 标记基础
• 1. 基本的HTML语法
• (1) 在HTML语言中，所有的标记都必须用尖括号
（即小于号“<”和大于号“>”）括起来。例如，
、、等。
• (2) 大部分标记都是成对出现的，包括开始标记和
结束标记，开始标记和相应的结束标记定义了标记
所影响的范围；结束标记与开始标记名称相同，但
结束标记总是以一个斜线符号开头的。例如，
和、和等。
• (3) HTML标记不区分大小写，但通常约定使用大
写字母来表示，以利于HTML文档的维护。
首 页
上 页
下 页
退 出
Slide 4
•
•
2. 标记符的属性
大多数标记都拥有一个属性集，通
过这些属性可以对作用的内容进行
更多的控制。在HTML语言中，所有
属性都放置在开始标记的尖括号内。
"2">心想事成。
首 页
上 页
下 页
退 出
Slide 5
2.1.2 HTML文档的基本结构
•
•
•标题文字
•
•
• 文本、图像、动画、HTML其它元素等
•
•
首 页
上 页
下 页
退 出
Slide 6
• 实例2.1利用HTML标记、首部标记和正文标记，在记事本
（或在DeamweaverMX2004的代码编写窗口）中编写一个简
单的HTML文档，将文件名指定为2-01.htm，并保存在CH1
目录下。图2-2 第一个网页的效果
• ------2-01.htm-----•
•
•这是我制作的第一个网页
•
•
• 万丈高楼平地起，制作网页刚开始。
•
•
首 页
上 页
下 页
退 出
Slide 7
2.2 设置文本格式
2.2.1 分段与换行
1.
分段标记
•
分段与换行标记的使用
•
•
•
•
•
边区的太阳红又红，
•
边区的太阳红又红。
•
•
首 页
上 页
下 页
退 出
Slide 8
3. 标题标记
其中n的取值是1－6
实例2.3 演示各种标题标记的使用方法，源代码如下：图2-4 各种标题标记效果
• ------ 2-03.htm -----•
•
•标题标记的使用
•
•
•
•
•
•
•
•
•
•
•
首 页
上 页
下 页
退 出
Slide 9
4. 水平线标记
•
标记用于在文档中添加一条水平线，以分
开文档的两个部分。该标记有以下属性：
•
(1) ALIGN：指定线的对齐方式，取值为left（左
对齐）、center（居中对齐）或right（右对齐），
默认值为center。
•
(2) COLOR：指定线的颜色。
•
(3) NOSHADE：若指定该项，则显示一条无阴影
的实线。
•
(4) SIZE：指定线的宽度，以像素为单位。
•
(5) WIDTH：指定线的长度，单位可以是像素或
百分比（占页面宽度的百分比）。
首 页
上 页
下 页
退 出
Slide 10
图2-5 插入水平线效果
实例2.4 在网页中通过
标记的各种属性来控制水平线的显示效果，源代码如下所示：
•
------ 2-04.htm -----•
•
•
水平线的显示效果
•
•
•
以下是默认的水平线：
•
•
以下是SIZE为6、WIDTH为300像素的水平线：
•
•
以下是SIZE为1、WIDTH为页面宽度80%的实线水平线：
•
•
以下是WIDTH = 90%的红色水平线：
•
•
•
首 页
上 页
下 页
退 出
Slide 11
2.2.2 设置段落对齐方式
• 在网页中有四种段落对齐方式：左对齐、右对齐、
居中对齐和两端对齐。在HTML语言中，可以使
用ALIGN属性来设置段落的对齐方式。
• ALIGN属性可以应用于多种标记，例如：分段标
记… 以及水平线
标记
等。
• ALIGN属性的取值可以是：left（左对齐）、
center（居中对齐）、right（右对齐）以及justify
（两边对齐）。两边对齐是指将一行中的文本在排
满的情况下向左右两页边对齐，以避免在左、右两
边处出现锯齿状。
首 页
上 页
下 页
退 出
Slide 12
实例2.5 使用ALIGN属性来控制段落的对齐方式，源代码如下所示：
•
------ 2-05.htm -----•
•
•
设置段落的对齐方式
•
•
•
•
•
•
•
•
图2-6 段落对齐效果
•
•
•
•
•
•
•
首 页
上 页
下 页
退 出
Slide 13
2.2.3 设置字体、字号和颜色
• 在HTML语言中，可以使用字体标记…来设置文本的字
符格式，为此可以将文本置于和标记之间，并通过FACE、
SIZE和COLOR属性来设置文本的字体、字号和颜色。FACE属性指定一种
字体，例如：
• 超文本标记语言
• ASP动态网页设计
• COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制
RGB格式表示。例如：
• 超文本标记语言
• 电子商务网页设计
首 页
上 页
下 页
退 出
Slide 14
实例2.6 使用字体标记来设置文本的字体、字号和颜色，源代码如下所示------ 2-06.htm -----
设置字体、字号和颜色
首 页
上 页
下 页
退 出
Slide 15
•
•
•
•
•
•
•
•
•
•
•
•
2.2.4 设置字符样式
通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、
下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：
…
粗体
…
大字体
…
斜体
…
删除线
… 小字体
… 删除线
…
上标
…
下标
…
固定宽度字体
…
下划线
首 页
上 页
下 页
退 出
Slide 16
实例2.7 使用各种标记来设置字符的样式，源代码如下所示：
-- 2-07.htm -----•
•设置字符样式
•
•
•
•
•
•
•
•
首 页
上 页
下 页
退 出
Slide 17
2.3 使用图像
2.3.1插入图像标记![]()
1. 标记格式:
• 其中: 图片可以是*.gif；*.jpg格式的图片，地址可以是相对地
址或绝对的地址。
• 主要属性有：
• Alt： 用于设置鼠标移上去显示的文本信息。
• Hight和Width：用于设置图片的高度或宽度。如width=200。
• Borter：用于设置图象边框的宽度。如Borter=4。
• Hspace和Vspace：用于设置图片与文本之间的距离。
• Align：用于设置图文混排时的对齐方式。如align=“right”。
首 页
上 页
下 页
退 出
Slide 18
2. 实例2.8 使用IMG标记在网页中插入一个图像，源代码如下所示：图
2-9 插入图像效果
• ------ 2-8.htm -----•
•
•插入图像示例
•
•
• 美丽的海滨城市---青
岛
•
•
•
•
首 页
上 页
下 页
退 出
Slide 19
2.3.2 播放多媒体文件
•![]()
标记不仅用于在网页中插入图像，也可以用于播
放Video for Windows的多媒体文件（*.avi）。若要
在网页中播放多媒体文件，应在![]()
标记中设置以下
属性：
• (1) CONTROLS：显示一套视频控件。
• (2) DYNSRC：指定要播放的多媒体文件的URL。
• (3) START：指定何时开始播放多媒体文件，其取值可
以是fileopen或mouseover。
• (4) LOOP：整数，指定多媒体文件的播放次数。如果
不限播放次数，则应将该属性设置为关键字infinite。
• (6) LOOPDELAY：整数，指定两次播放之间的延迟，以
毫秒为单位。
首 页
上 页
下 页
退 出
Slide 20
•
•
•
•
•
•
•
•
•
•
实例2.10 在网页中播放多媒体文件，源代码如下所示：
------ 2-10.htm -----
播放多媒体文件示例
![]()
"infinite" START = "fileopen">
•
•
首 页
上 页
下 页
退 出
Slide 21
2.4 使用字幕和背景音乐
•
•
•
•
•
•
•
•
•
•
•
•
2.4.1滚动字幕标记
•
•
•
首 页
上 页
下 页
退 出
Slide 23
2.4.2背景音乐标记
• 1. 标记格式：
•
•
• ……
•
首 页
上 页
下 页
退 出
Slide 24
实例2.12 在网页中插入背景音乐。源代码如下所示：
• ------ 2-12.htm -----•
•
•在网页中插入背景音乐
•
•
•
•
•
•
首 页
上 页
下 页
退 出
Slide 25
2.5 使用表格
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
1. 格式：
首 页
上 页
下 页
退 出
Slide 26
实例2.13 使用HTML语言创建一个基本表格，源代码如下所示：
•
•
•
创建基本表格
•
•
•
•
首 页
上 页
下 页
退 出
Slide 27
2.6 使用超链接
• 2.6.1 什么是超链接
• 超链接是由源端点到目标端点的一种
跳转。源端点可以是网页中的一段文
本或一幅图像或一个按钮等。目标端
点可以是任意类型的网络资源，例如
可以是一个网页、一幅图像、一首歌
曲、一段动画或一个程序等。
首 页
上 页
下 页
退 出
Slide 28
• 2.6.2 超链接标记
• 在HTML语言中，可以使用标记来创建超链接，标记格
式如下：
• 示文本”>文本
• 标记的属性有：
• (1) HREF：该属性是必选项，用于指定目标端点的URL地址，
可以包含一个或多个参数。
• (2) TITLE：该属性也是可选项，用于指定指向超链接时所显
示的标题文字。
• (3) TARGET：该属性是可选项，用于指定一个窗口或框架的
名称，目标文档将在该窗口或框架中打开。TARGET属性的
取值 ：
首 页
上 页
下 页
退 出
Slide 29
• “_blank” 指定将链接的目标文件加载到未命
名的新浏览器窗口中；
• “_parent” 指定将链接的目标文件加载到包
含链接的父框架页或窗口中，如果包含链
接的框架不是嵌套的，则链接的目标文件
加载到整个浏览器窗口中；
• “_self” 指定将链接的目标文件加载到链接
所在的同一框架或窗口中；
• “_top” 指定将链接的目标文件加载到整个
浏览器窗口中，并由此删除所有框架。
首 页
上 页
下 页
退 出
Slide 30
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
实例2.15 使用标记创建超链接，源代码如下所示：
------ 2-15.htm -----
创建超链接示例
创建超链接示例
图2-14 创建超链接效果
首 页
上 页
下 页
退 出
Slide 31
2.7 使用表单
什么是表单？表单是用来收集访问者信
息的域集。表单用于用户收集信息，
然后将这些信息提交给服务器进行处
理。表单可以包含允许用户进行交互
的各种控件，例如文本框、列表框、
复选框和单选按钮等。
首 页
上 页
下 页
退 出
Slide 32
•
•
•
•
•
•
•
•
•
•
•
•
FORM标记的常用属性有：
(1) NAME：指定表单的名称，以标识表单。如：NAME = “biao1" 。
命名表单后，可以使用脚本语言（如VBScript或JScript）来引用或
控制该表单。
(2) METHOD：指定将表单数据传输到服务器的方法，其取值可以
是：
post：在HTTP请求中嵌入表单数据。
get：将表单数据附加到请求该页的URL中。
如：METHOD = "post“ （或者 methot=“get”）
(3) ACTION：指定将要接收表单数据的服务器端程序或动态网页的
网址。
如：ACTION = "字符串"
(4) onSubmit：指定提交表单时调用的事件处理程序。
(5) onReset：指定重置表单时调用的事件处理程序。
(6) TARGET：指定一个目标窗口
首 页
上 页
下 页
退 出
Slide 33
•
•
•
•
•
•
•
•
2.7.2 使用输入型表单控件
为了让用户通过表单输入数据，可以使用标记创建各种输
入型表单控件。通过将标记的TYPE属性设置为不同的值，
可以创建不同类型的输入型表单控件，包括单行文本框、密码框、
复选框、单选按钮、文件域以及按钮等。
1. 在表单中添加单行文本框
在之间添加一个标记，并将其TYPE
属性指定为“text”。
其标记格式为：
= “宽度” MAXLENGTH = “字符数”>
2. 在表单中添加密码域
在之间添加一个标记，并将其TYPE
属性指定为“password”。
首 页
上 页
下 页
退 出
Slide 34
• 3. 在表单中添加按钮
• 使用标记可以在表单中添加三种类型的按钮：即提
交按钮、重置按钮和自定义按钮。
• 其标记格式为：
• VALUE = "字符串" OnClick = "过程">
• 对该标记的属性说明如下：
• (1) TYPE：指定按钮的类型，取值可以是：
• submit：创建一个提交按钮。
• reset：创建一个重置按钮。
• button：创建一个自定义按钮。
• (2) NAME：指定按钮的名称。
• (3) VALUE：指定显示在按钮上的标题文本。
首 页
上 页
下 页
退 出
Slide 35
•
•
•
•
•
•
•
•
•
•
•
•
•
•
实例2.16 创建一个登录表单，其中包含有文本框、密码框、提交按钮和重置
按钮，源代码如下所示： 图2-15 登录表单效果
登录表单演示
首 页
上 页
下 页
退 出
Slide 37
首 页
谢
谢！
上 页
下 页
退 出
第二章 HTML基础
教学内容
2.1
HTML文档的结构
2.2
设置文本格式首 页
2.3
使用图像
2.4
字幕和背景音乐
2.5
使用表格
2.6
使用超链接 退 出
2.7
使用表单
退
网页设计与制作
出
上 页
下 页
Slide 2
知识要点：
• 基本的HTML语法结构
• 常用的HTML 标记的使用
首 页
上 页
下 页
退 出
Slide 3
2.1 HTML文档的结构
2.1.1 标记基础
• 1. 基本的HTML语法
• (1) 在HTML语言中，所有的标记都必须用尖括号
（即小于号“<”和大于号“>”）括起来。例如，
、、等。
• (2) 大部分标记都是成对出现的，包括开始标记和
结束标记，开始标记和相应的结束标记定义了标记
所影响的范围；结束标记与开始标记名称相同，但
结束标记总是以一个斜线符号开头的。例如，
和、和等。
• (3) HTML标记不区分大小写，但通常约定使用大
写字母来表示，以利于HTML文档的维护。
首 页
上 页
下 页
退 出
Slide 4
•
•
2. 标记符的属性
大多数标记都拥有一个属性集，通
过这些属性可以对作用的内容进行
更多的控制。在HTML语言中，所有
属性都放置在开始标记的尖括号内。
"2">心想事成。
首 页
上 页
下 页
退 出
Slide 5
2.1.2 HTML文档的基本结构
•
•
•
•
•
• 文本、图像、动画、HTML其它元素等
•
•
首 页
上 页
下 页
退 出
Slide 6
• 实例2.1利用HTML标记、首部标记和正文标记，在记事本
（或在DeamweaverMX2004的代码编写窗口）中编写一个简
单的HTML文档，将文件名指定为2-01.htm，并保存在CH1
目录下。图2-2 第一个网页的效果
• ------2-01.htm-----•
•
•
•
•
• 万丈高楼平地起，制作网页刚开始。
•
•
首 页
上 页
下 页
退 出
Slide 7
2.2 设置文本格式
2.2.1 分段与换行
1.
分段标记
2.
换行标记
实例2.2 显示分段标记和换行标记的用法以及它们的区别，源代码如下：图2-3
分段标记的效果
•
------ 2-02.htm -----•
•
•
•
•
•
高楼万丈平地起，
•
蟠龙卧虎高山顶，
•
边区的太阳红又红，
•
边区的太阳红又红。
•
•
首 页
上 页
下 页
退 出
Slide 8
3. 标题标记
其中n的取值是1－6
实例2.3 演示各种标题标记的使用方法，源代码如下：图2-4 各种标题标记效果
• ------ 2-03.htm -----•
•
•
•
•
•
这是一级标题（最大）
•
这是二级标题
•
这是三级标题
•
这是四级标题
•
这是五级标题
•
这是六级标题（最小）
•
这是普通文字。
•
•
首 页
上 页
下 页
退 出
Slide 9
4. 水平线标记
•
标记用于在文档中添加一条水平线，以分
开文档的两个部分。该标记有以下属性：
•
(1) ALIGN：指定线的对齐方式，取值为left（左
对齐）、center（居中对齐）或right（右对齐），
默认值为center。
•
(2) COLOR：指定线的颜色。
•
(3) NOSHADE：若指定该项，则显示一条无阴影
的实线。
•
(4) SIZE：指定线的宽度，以像素为单位。
•
(5) WIDTH：指定线的长度，单位可以是像素或
百分比（占页面宽度的百分比）。
首 页
上 页
下 页
退 出
Slide 10
图2-5 插入水平线效果
实例2.4 在网页中通过
标记的各种属性来控制水平线的显示效果，源代码如下所示：
•
------ 2-04.htm -----•
•
•
•
•
•
以下是默认的水平线：
•
•
以下是SIZE为6、WIDTH为300像素的水平线：
•
•
以下是SIZE为1、WIDTH为页面宽度80%的实线水平线：
•
•
以下是WIDTH = 90%的红色水平线：
•
•
•
首 页
上 页
下 页
退 出
Slide 11
2.2.2 设置段落对齐方式
• 在网页中有四种段落对齐方式：左对齐、右对齐、
居中对齐和两端对齐。在HTML语言中，可以使
用ALIGN属性来设置段落的对齐方式。
• ALIGN属性可以应用于多种标记，例如：分段标
记
…
、标题标记标记
等。
• ALIGN属性的取值可以是：left（左对齐）、
center（居中对齐）、right（右对齐）以及justify
（两边对齐）。两边对齐是指将一行中的文本在排
满的情况下向左右两页边对齐，以避免在左、右两
边处出现锯齿状。
首 页
上 页
下 页
退 出
Slide 12
实例2.5 使用ALIGN属性来控制段落的对齐方式，源代码如下所示：
•
------ 2-05.htm -----•
•
•
•
•
•
•
这是左对齐的效果。
•
这是居中对齐的效果。
•
这是右对齐的效果。
•
春夜喜雨
•
图2-6 段落对齐效果
•
•
•
春眠不觉晓，处处闻啼鸟。
•
夜来风雨声，花落知多少。
•
•
•
首 页
上 页
下 页
退 出
Slide 13
2.2.3 设置字体、字号和颜色
• 在HTML语言中，可以使用字体标记…来设置文本的字
符格式，为此可以将文本置于和标记之间，并通过FACE、
SIZE和COLOR属性来设置文本的字体、字号和颜色。FACE属性指定一种
字体，例如：
• 超文本标记语言
• ASP动态网页设计
• COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制
RGB格式表示。例如：
• 超文本标记语言
• 电子商务网页设计
首 页
上 页
下 页
退 出
Slide 14
实例2.6 使用字体标记来设置文本的字体、字号和颜色，源代码如下所示------ 2-06.htm -----
设置字体、字号和颜色
电子商务网页设计
电子商务网页设计
电子商务网页设计
电子商务网页设计
首 页
上 页
下 页
退 出
Slide 15
•
•
•
•
•
•
•
•
•
•
•
•
2.2.4 设置字符样式
通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、
下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：
…
粗体
…
大字体
…
斜体
删除线
… 小字体
…
上标
…
下标
…
固定宽度字体
…
下划线
首 页
上 页
下 页
退 出
Slide 16
实例2.7 使用各种标记来设置字符的样式，源代码如下所示：
-- 2-07.htm -----•
•
•
•
粗体字：电子商务网页设计
•
大字体：电子商务网页设计
•
斜体字：电子商务网页设计
•
上标示例：
• a2+b2=c2
•
下标示例：H2SO4
•
•
首 页
上 页
下 页
退 出
Slide 17
2.3 使用图像
2.3.1插入图像标记
1. 标记格式:
• 其中: 图片可以是*.gif；*.jpg格式的图片，地址可以是相对地
址或绝对的地址。
• 主要属性有：
• Alt： 用于设置鼠标移上去显示的文本信息。
• Hight和Width：用于设置图片的高度或宽度。如width=200。
• Borter：用于设置图象边框的宽度。如Borter=4。
• Hspace和Vspace：用于设置图片与文本之间的距离。
• Align：用于设置图文混排时的对齐方式。如align=“right”。
首 页
上 页
下 页
退 出
Slide 18
2. 实例2.8 使用IMG标记在网页中插入一个图像，源代码如下所示：图
2-9 插入图像效果
• ------ 2-8.htm -----•
•
•
•
•
• 美丽的海滨城市---青
岛
•
•
•
•
首 页
上 页
下 页
退 出
Slide 19
2.3.2 播放多媒体文件
•
放Video for Windows的多媒体文件（*.avi）。若要
在网页中播放多媒体文件，应在
属性：
• (1) CONTROLS：显示一套视频控件。
• (2) DYNSRC：指定要播放的多媒体文件的URL。
• (3) START：指定何时开始播放多媒体文件，其取值可
以是fileopen或mouseover。
• (4) LOOP：整数，指定多媒体文件的播放次数。如果
不限播放次数，则应将该属性设置为关键字infinite。
• (6) LOOPDELAY：整数，指定两次播放之间的延迟，以
毫秒为单位。
首 页
上 页
下 页
退 出
Slide 20
•
•
•
•
•
•
•
•
•
•
实例2.10 在网页中播放多媒体文件，源代码如下所示：
------ 2-10.htm -----
播放多媒体文件
•
•
首 页
上 页
下 页
退 出
Slide 21
2.4 使用字幕和背景音乐
•
•
•
•
•
•
•
•
•
•
•
•
2.4.1滚动字幕标记
•
•
•
首 页
上 页
下 页
退 出
Slide 23
2.4.2背景音乐标记
• 1. 标记格式：
•
•
• ……
•
首 页
上 页
下 页
退 出
Slide 24
实例2.12 在网页中插入背景音乐。源代码如下所示：
• ------ 2-12.htm -----•
•
•
•
•
•
•
当页面被打开时，你将会听到美妙的背景音乐。
•
•
首 页
上 页
下 页
退 出
Slide 25
2.5 使用表格
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
1. 格式：
| 标题1 | 标题2 | …标题n |
|---|---|---|
| 数据11 | 数据12 | …数据1n |
| 数据21 | 数据22 | …数据2n |
| 数据n1 | 数据n2 | …数据nn |
首 页
上 页
下 页
退 出
Slide 26
实例2.13 使用HTML语言创建一个基本表格，源代码如下所示：
•
•
•
•
•
•
•
| 第1列标题 | 第2列标题 | 第3列标题 | 第4列标 题 |
|---|---|---|---|
| 春游芳草地 | 夏赏绿河池 | 秋饮黄花酒 | 冬听 白雪诗/TD> |
| 春游芳草地 | 夏赏绿河池 | 秋饮黄花酒 | 冬听白雪 诗 |
| 春游芳草地 | 夏赏绿河池 | 秋饮黄花酒 | 冬听白雪 诗 |
首 页
上 页
下 页
退 出
Slide 27
2.6 使用超链接
• 2.6.1 什么是超链接
• 超链接是由源端点到目标端点的一种
跳转。源端点可以是网页中的一段文
本或一幅图像或一个按钮等。目标端
点可以是任意类型的网络资源，例如
可以是一个网页、一幅图像、一首歌
曲、一段动画或一个程序等。
首 页
上 页
下 页
退 出
Slide 28
• 2.6.2 超链接标记
• 在HTML语言中，可以使用标记来创建超链接，标记格
式如下：
• 示文本”>文本
• 标记的属性有：
• (1) HREF：该属性是必选项，用于指定目标端点的URL地址，
可以包含一个或多个参数。
• (2) TITLE：该属性也是可选项，用于指定指向超链接时所显
示的标题文字。
• (3) TARGET：该属性是可选项，用于指定一个窗口或框架的
名称，目标文档将在该窗口或框架中打开。TARGET属性的
取值 ：
首 页
上 页
下 页
退 出
Slide 29
• “_blank” 指定将链接的目标文件加载到未命
名的新浏览器窗口中；
• “_parent” 指定将链接的目标文件加载到包
含链接的父框架页或窗口中，如果包含链
接的框架不是嵌套的，则链接的目标文件
加载到整个浏览器窗口中；
• “_self” 指定将链接的目标文件加载到链接
所在的同一框架或窗口中；
• “_top” 指定将链接的目标文件加载到整个
浏览器窗口中，并由此删除所有框架。
首 页
上 页
下 页
退 出
Slide 30
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
实例2.15 使用标记创建超链接，源代码如下所示：
------ 2-15.htm -----
创建超链接示例
图2-14 创建超链接效果
首 页
上 页
下 页
退 出
Slide 31
2.7 使用表单
什么是表单？表单是用来收集访问者信
息的域集。表单用于用户收集信息，
然后将这些信息提交给服务器进行处
理。表单可以包含允许用户进行交互
的各种控件，例如文本框、列表框、
复选框和单选按钮等。
首 页
上 页
下 页
退 出
Slide 32
•
•
•
•
•
•
•
•
•
•
•
•
FORM标记的常用属性有：
(1) NAME：指定表单的名称，以标识表单。如：NAME = “biao1" 。
命名表单后，可以使用脚本语言（如VBScript或JScript）来引用或
控制该表单。
(2) METHOD：指定将表单数据传输到服务器的方法，其取值可以
是：
post：在HTTP请求中嵌入表单数据。
get：将表单数据附加到请求该页的URL中。
如：METHOD = "post“ （或者 methot=“get”）
(3) ACTION：指定将要接收表单数据的服务器端程序或动态网页的
网址。
如：ACTION = "字符串"
(4) onSubmit：指定提交表单时调用的事件处理程序。
(5) onReset：指定重置表单时调用的事件处理程序。
(6) TARGET：指定一个目标窗口
首 页
上 页
下 页
退 出
Slide 33
•
•
•
•
•
•
•
•
2.7.2 使用输入型表单控件
为了让用户通过表单输入数据，可以使用标记创建各种输
入型表单控件。通过将标记的TYPE属性设置为不同的值，
可以创建不同类型的输入型表单控件，包括单行文本框、密码框、
复选框、单选按钮、文件域以及按钮等。
1. 在表单中添加单行文本框
在之间添加一个标记，并将其TYPE
属性指定为“text”。
其标记格式为：
= “宽度” MAXLENGTH = “字符数”>
2. 在表单中添加密码域
在之间添加一个标记，并将其TYPE
属性指定为“password”。
首 页
上 页
下 页
退 出
Slide 34
• 3. 在表单中添加按钮
• 使用标记可以在表单中添加三种类型的按钮：即提
交按钮、重置按钮和自定义按钮。
• 其标记格式为：
• VALUE = "字符串" OnClick = "过程">
• 对该标记的属性说明如下：
• (1) TYPE：指定按钮的类型，取值可以是：
• submit：创建一个提交按钮。
• reset：创建一个重置按钮。
• button：创建一个自定义按钮。
• (2) NAME：指定按钮的名称。
• (3) VALUE：指定显示在按钮上的标题文本。
首 页
上 页
下 页
退 出
Slide 35
•
•
•
•
•
•
•
•
•
•
•
•
•
•
实例2.16 创建一个登录表单，其中包含有文本框、密码框、提交按钮和重置
按钮，源代码如下所示： 图2-15 登录表单效果
首 页
上 页
下 页
退 出
Slide 37
首 页
谢
谢！
上 页
下 页
退 出