第2章 超文本标记语言HTML
目 录 2.1 HTML文件的基本结构 2.2 文字和段落标记 2.3 列表标记 2.4 图片标记 2.5 表格标记 2.6 超链接标记 2.2 文字和段落标记 2.3 列表标记 目 录 2.4 图片标记 2.5 表格标记 2.6 超链接标记 2.7 表单标记 2.8 框架标记
2.1 HTML文件的基本结构 2.1.1 HTML概述 2.1.2 HTML语法 2.1.3 HTML文件的基本结构
2.1.1 HTML概述 HTML是一种描述性语言，用HTML可以创建能在互联网上传输的信息页，即通常所称的主页或网页。 HTML语言使用描述性标记符（称为标记）来指明文本的不同内容。 HTML是一种语言，但并不算是“程序”语言。 HTML文档包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML标记。
2.1.2 HTML语法 <标记>受标记影响的内容</标记> <标记 属性1=属性值 属性2=属性值…>受标记影响的内容</标记> 例如，可以用字体标记<FONT>的字号属性size指定文字的大小，HTML语句如下： <FONT size=1>本行字将以较小字体显示</FONT>
2.1.3 HTML文件的基本结构 <HTML> <HEAD> <TITLE>网页的标题</TITLE> </HEAD> <BODY> 文档主体，正文部分 </BODY> </HTML>
2.1.3 HTML文件的基本结构 HTML文件头 2. HTML文件主体
1. HTML文件头 TITLE 标记：<TITLE>标题名</TITLE> META标记：给浏览器、搜索引擎或其他应用程序提供本HTML文件的有关信息（如作者，终止日期，关键词列表等等）。
META标记的格式为： <META name=”选项名” http-equiv=”选项名” content=”字符串”>
name属性主要用于描述网页，其常用的选项有GENERATOR、Keywords、description、robots、author等。
http-equiv属性相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，其常用的选项有Content-Type、Expires、Refresh等等。 Content-Type用以说明网页所使用的字符集； Expires用于设定网页的到期时间；一旦网页过期，必须到服务器上重新传输； Refresh用于自动刷新并指向新页面。 Name属性和http-equiv属性不能在同一个标记中使用。
Content属性则根据name选项或http-equiv选项的定义来决定此项填写什么样的字符串。例如： <META name=”keywords” content=”science, education, culture, politics, economics, relationships, entertainment, human”>向搜索引擎说明本网页的关键词。 <META name=”description” content=”This page is about the meaning of science, education, culture 。”>告诉搜索引擎本网站的主要内容。
<META http-equiv=”Content-Type” content=”text/html” charset=”gb_2312-80”> 通知浏览器本HTML文件使用了gb2312字符集，是简体中文网页。 <META http-equiv=”Refresh” content=”2” url=”http://www.ncbuct.edu.cn”>可以使当前网页在2秒后自动转到北京化工大学北方学院的主页（http://www.ncbuct.edu.cn） 去，这就是META的刷新作用，在Content中，2代表设置的时间（单位为秒），而URL就是在指定的时间后自动连接的网页地址。如果网页地址就是本页的地址，那么就是自动刷新。
使用META标记，还可以在进入网页或者离开网页时实现动画效果。 例如<META http-equiv=”Page-Enter” content=”revealTrans (duration=5, transition=9) ”>的意思是，进入本页面（http-equiv=”Page-Enter”）时，页面将按水平百叶窗（transition=9）的形式展开，整个展开过程历时3秒（duration=3）。 <META http-equiv=”Page-Exit” content=”revealTrans (duration=5,transition=2) ”>的意思是离开本网页时，页面将按圆形收缩的形式切换成其他网页，并且整个切换时间为5秒。
2. HTML文件主体 HTML文件主体标记的格式为： <BODY backgrongd=”文件名” bgcolor=”颜色值” text=”颜色值” link=”颜色值” vlink=”颜色值” alink=”颜色值”>网页的内容</BODY>
Background：设置网页的背景图像； Bgcolor：设置网页的背景色； Text：设置文本的颜色 Link：设置尚未被访问过的超文本链接的颜色； Vlink：设置已被访问过的超文本链接的颜色； Alink：设置超文本链接在被访问瞬间的颜色。
颜色的表示方法 以命名方式定义常用的颜色，如RED、blue等。 以RGB值表示，如#FF0000表示red，#0000ff表示blue。
常用16种色彩的英文名和RGB值对照 预定义色彩 RGB值 Aqua #00FFFF gray #808080 Navy #000080 silver #C0C0C0 Black #000000 green #008000 Olive #808000 teal #008080 Blue #0000FF lime #00FF00 Purple #800080 yellow #FFFF00 Fuchsia #FF00FF maroon #800000 Red #FF0000 white #FFFFFF
例2-1 一个简单的HTML文件 <HTML> <HEAD> <TITLE>一个简单的HTML示例</TITLE> </HEAD> <BODY> 我是中国人，我热爱我的祖国。 </BODY> </HTML>
2.2 文字和段落标记 2.2.1 标题文字标记 2.2.2 文字标记 2.2.3 段落标记
2.2.1 标题文字标记<Hn>
标题文字标记的格式为： <Hn align=对齐方式>标题文字</Hn> 属性n用来指定标题文字的大小，可以取1～6的整数值，取1时文字最大，6时文字最小。在一个标题行中无法使用不同大小的字体。 属性align用来设置标题在页面中的对齐方式，有left（左对齐）、center（居中）和right（右对齐）三种选择。
例2-2 用<Hn>设置标题 <HTML> <HEAD> <TITLE>设置标题</TITLE> </HEAD> <BODY> <H1>第1级标题——H1</H1> <H2 align=left>第2级标题——H2</H2> <H3 align=center>第3级标题——H3</H3> <H4 align=right>第4级标题——H4</H4> </BODY> </HTML>
2.2.2 文字标记<FONT>
文字标记的格式为： <FONT size=数字 face=字体名 color=颜色> 被设置的文字 </FONT>
属性size用来设置文字的大小。数字的取值范围从1～7，size取1时文字最小，取7时文字最大。 属性face用来设置字体。如黑体、宋体、楷体_GB2312、仿宋_Gb312、隶书、Times New Roman等。 属性color用来设置文字颜色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，参见表2-1。
例2-3 用<FONT>设置文字的大小、字体和颜色。 <HTML> <HEAD> <TITLE>用FONT标记设置文字大小、字体和颜色</TITLE> </HEAD> <BODY> 普通文字<br> <FONT size=1>1号字</FONT> <FONT size=7>7号字</FONT><br> <FONT size=4 face=宋体>宋体4号字</FONT> <FONT size=3 face=华文彩云>华文彩云3号字</FONT><br> <FONT color=red>红色</FONT> <FONT size=6 face=隶书 color=#0000FF>蓝色隶属6号字</FONT> </BODY> </HTML>
表2-2 设置各种字型的标记 <B>受影响的文字</B> 粗体 <I>受影响的文字</I> 斜体 <U>受影响的文字</U> 加下划线 <TT>受影响的文字</TT> 标准打印机字体 <BIG>受影响的文字</BIG> 大型字体 <SMALL>受影响的文字</SMALL> 小型字体 <BLINK>受影响的文字</BLINK> 闪烁效果 <SUB>受影响的文字</SUB> 下标 <SUP>受影响的文字</SUP> 上标 <STRIKE>受影响的文字</STRIKE> 加删除线
例2-4 设置字型 <HTML> <HEAD><TITLE>设置字型</TITLE></HEAD> <BODY> 普通文字 <B>加粗字</B> <I>斜体字</I> <U>加下划线</U> <BIG>大型字体</BIG><SMALL>小型字体</SMALL> <STRIKE>加删除线</STRIKE><BR> X<SUP>2</SUP>+Y<SUP>2</SUP>=Z<SUP>2</SUP> </BODY> </HTML>
2.2.3 段落标记 强制换行标记 强制换段标记 设置段落标记 水平线
强制换行标记<BR> 强制换行的格式为： 文字<BR>
例2-5 强制换行标记的使用 <HTML> <HEAD> 例2-5 强制换行标记的使用 <HTML> <HEAD> <TITLE>强制换行标记的使用</TITLE> </HEAD> <BODY> 登鹤雀楼 白日依山尽 黄河入海流 欲穷千里目， 更上一层楼。<br <B>登鹤雀楼</B><BR> 白日依山尽，<br> 黄河入海流。<br> 欲穷千里目，<br> 更上一层楼。<br> </BODY> </HTML>
2. 强制换段标记 段落标记<P>放在一段文字的末尾，就定义了一个新段落的 开始。<P>标记不但能使后面的文字换到下一行，还可以是 两段之间留一空行。由于一段的结束意味着新一段的开始， 所以使用<P>也可省略结束标记。 强制换段标记的格式为： 文字<P> 强制换段标记可以看作两个强制换行标记<BR><BR>
设置段落标记 设置段落标记的格式为： <P align=对齐方式>文字</P> 其中属性align用来设置段落的对齐方式，可以为left、center 或right，分别表示段落左对齐、段落居中、段落右对齐。默 认为left。
例2-6 段落标记的使用。 <HTML> <HEAD> 例2-6 段落标记的使用。 <HTML> <HEAD> <TITLE>段落标记的使用</TITLE> </HEAD> <BODY> <P>登鹤雀楼</P> <P align=center>白日依山尽，<br> 黄河入海流。</P> <P align=right>欲穷千里目，<br> 更上一层楼。</P> </BODY> </HTML>
4. 水平线 水平线标记的格式为： <HR align=”对齐方式” size=”横线粗细” width=”横线长度” color=”横线颜色” noshade>。
Align属性： 设定线条放置的位置，可选择left、right或 center。 Size属性： 设定线条厚度，以像素作单位，默认为2。 Width属性： 设定线条长度，可以是绝对值或相对值， 默认值为100%。 Color属性： 设定线条颜色，默认为黑色。 Noshade属性：设定线条为平面显示（没有三维效果），若 缺省，则有阴影或立体效果。
例2-7 水平线标记的使用 <HTML> <HEAD> 例2-7 水平线标记的使用 <HTML> <HEAD> <TITLE>水平线标记的使用</TITLE> </HEAD> <BODY> <HR> <HR align="right" size="2" width="70%" color="#0000FF" noshade> <HR align="center" size="6" width="70" color="#008000"> </BODY> </HTML>
2-3 列表标记 2.3.1 无序列表 2.3.2 有序列表 2.3.3 列表的嵌套
2.3.1无序列表 无序列表中每一个表项的前面是项目符号（如■ 、 ● 等）。 建立无序列表使用<UL>标记和<LI>表项标记。格式为： <UL type=符号类型> <LI type=符号类型> 第一个列表项 <LI type=符号类型> 第二个列表项 …… </UL>
<LI>标记：是单标记，即一个表项的开始，就是前一个表 项的结束。 Type： 指定每个表项左端的符号类型，可为 disc（实心圆点●）、 circle（空心圆点○）、 square（方块□）， 还可以自己设置图片， 如<LI img src=mygraph.gif>默认为实心圆点。
例2-8 无序列表标记的使用 <HTML> <HEAD> 例2-8 无序列表标记的使用 <HTML> <HEAD> <TITLE>无序列表标记的使用</TITLE> </HEAD> <BODY> <FONT size=4>网络的拓扑结构</FONT> <UL> <LI>总线结构 <LI type="circle">星型结构 <LI type="square">环型结构 </UL> </BODY> </HTML>
2.3.2 有序列表 使用<OL>标记可以建立有序列表，表项的标记仍为LI，格式为： <OL type=符号类型> 2.3.2 有序列表 使用<OL>标记可以建立有序列表，表项的标记仍为LI，格式为： <OL type=符号类型> <LI type=符号类型>第一个表项 <LI type=符号类型>第二个表项 …… </OL>
type属性可设定5种序号： 数字（type=1）、 大写英文字母（type=A）、 小写英文字母（type=a）、 大写罗马字母（type=I）、 小写罗马字母（type=i）， 缺省的序号标记是数字。
例2-9 有序列表标记的使用。 <HTML> <HEAD> 例2-9 有序列表标记的使用。 <HTML> <HEAD> <TITLE>有序列表标记的使用</TITLE> </HEAD> <BODY> 通过拨号网络连接Internet的步骤 <OL> <LI>安装调制解调器 <LI>创建拨号连接 <LI type="A">设置拨号网络 <LI type="i">设置拨号网络 </OL> </BODY> </HTML>
2.3.3 列表的嵌套 列表嵌套可以把网页分为多个层次，例如书的目录，给人以 很强的层次感。有序列表和无序列表不仅可以自身嵌套，而 且可以互相嵌套。
例2-10 无序列表中套无序列表。 例2-11 有序列表中套无序列表。
2.4 图片标记 2.4.1 网页中的图片 2.4.2 图片标记 2.4.3 设定图片的布局
2.4.1 网页中的图片 Web中图片的几种常用格式为GIF、JPEG和PNG，此外还 可使用矢量格式。其中最常用的是GIF和JPEG格式，几乎 所有浏览器都支持这两种格式。
2.4.2 图片标记 图片标记<IMG>的格式为： <IMG src=”图片文件名” alt=”简单说明” width=”图片的宽度” height=”图片的高度” hspace=”水平方向空白” vspace=”垂直 方向空白” border=”边框宽度” align=”对齐方式”>
2.4.3 设定图片的布局 布局是图像放在网页中的位置以及图像与文本的排放关系。 实现这种功能，除了利用<IMG>标记的align属性外，还有 <CENTER>、<P>等标记。 1. 设置图像的对齐方式 2.设置图像与文本间的关系
1. 设置图像的对齐方式 图像可放在页面的左边（left）、中间（center）和右边 （right）。 使用<P>标记的align属性可实现图像的居左、居中和居右。 格式为： <P align=left 或center或right ><IMG src=”图像文件名”></P> 另外，实现图像居中还可以使用<CENTER>标记，格式为： <center><IMG src=”图像文件名”> </center>
例 2-12 设置图像的对齐方式
2. 设置图像与文本间的关系 （1）设置图像与文本之间的空白 （2）文本与图像在垂直方向上的对齐 （3）文本环绕图像
2. 设置图像与文本间的关系 （1）设置图像与文本之间的空白 <IMG>标记的hspace和vspace属性可实现该功能。
2. 设置图像与文本间的关系 （2）文本与图像在垂直方向上的对齐 文本 <IMG src=“图片文件名”align=“对齐方式”> 文本 其中align的值可取： top文本与图像的顶部对齐； middle文本与图像的中央对齐； bottom文本与图像的底部对齐。
2. 设置图像与文本间的关系 （3）文本环绕图像 <IMG src=“图片文件名”align=“对齐方式”>文本 （3）文本环绕图像 <IMG src=“图片文件名”align=“对齐方式”>文本 其中align的值可取： left 图像居左，文本在图像的右边； right 图像居右，文本在图像的左边。 使用该标记设置文本环绕方式后，将一直有效，直到遇到下 一个设置标记。如果想取消文本环绕图像，可用<BR clear> 标记，其后的文本将不再环绕图像。其格式为： <BR clear=left 或 right或all>
例 2-13 设置图像与文本间的关系
2.5 表格标记 2.5.1 建立简单表格 2.5.2 表格的属性设置
2.5.1 建立简单表格 一般格式为： <TABLE> </TABLE> 2.5.1 建立简单表格 一般格式为： <TABLE> <CAPTION align=left | right | center | top | bottom valign= top | bottom>标题</CAPTION> <TR><TH>表头1</TH> <TH>表头2</TH>…<TH>表头n</TH></TR> <TR><TD>表项11</TD><TD>表项12</TD><TD>表项1n</TD></TR> … <TR><TD>表项m1</TD><TD>表项m2</TD>…<TD>表项mn</TD></TR> </TABLE>
例 2-14 一个简单的表格
2.5.2 表格的属性设置 1. 表格标记属性 2. 单元格的合并 3. 表格的分组显示 4. 表格边框和分隔线的显示控制
2.5.2 表格的属性设置 1. 表格标记属性 （1）<TABLE>标记的属性设置 （2）<TR>标记的属性设置 （3）<TD>标记的属性设置
（1）<TABLE>标记的属性设置 2.5.2 表格的属性设置 1. 表格标记属性 （1）<TABLE>标记的属性设置 <TABLE border=”n” width=x或x% height=y或y% cellspacing=”i” cellpadding=”j” align=”水平对齐方式” valign=”垂直对齐方式” background=”背景图片” bgcolor=”背景颜色” bordercolor= ”边框颜色”>
2.5.2 表格的属性设置 1. 表格标记属性 （2）<TR>标记的属性设置 2.5.2 表格的属性设置 1. 表格标记属性 （2）<TR>标记的属性设置 <TR width=x或x% height=y或y% align=”水平对齐方式” valign=”垂直对齐方式” bgcolor=”背景颜色” bordercolor=”边框颜色”>
2.5.2 表格的属性设置 1. 表格标记属性 （3）<TD>标记的属性设置 2.5.2 表格的属性设置 1. 表格标记属性 （3）<TD>标记的属性设置 <TD width=x或x% height=y或y% colspan=”i” rowspan=”j” align=”对齐方式（水平）” valign=”对齐方式（垂直）” background=”背景图片” bgcolor=”背景颜色” bordercolor= ”边框颜色”>
例 2-15 表格的属性设置
2.5.2 表格的属性设置 2. 单元格的合并 <TD colspan=”i” rowspan=”j”> 2.5.2 表格的属性设置 2. 单元格的合并 <TD colspan=”i” rowspan=”j”> 其中，i表示合并的列数，j表示合并的行数。
例 2-16 表格单元格的合并
例 2-17 表格单元格的随意合并
2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 （2）按列分组
2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 <TABLE> 2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 <TABLE> <THEAD>表头</THEAD> <TFOOT>表尾</TFOOT> <TBODY>表体1</TBODY> …… <TBODY>表体n</TBODY> </TABLE>
例2-18 按行组制作表格。
2.5.2 表格的属性设置 3. 表格的分组显示 （2）按列分组 <COLGROUP>标记可一次设定列组中的列数以及各列属性。 2.5.2 表格的属性设置 3. 表格的分组显示 （2）按列分组 <COLGROUP>标记可一次设定列组中的列数以及各列属性。 其格式为：<COLGROUP span=x width=y> <COL>标记可以设定一列的属性，它可以放在<COLGROUP>中使用， 也可单独用于定义列组以外列的属性，但它不能构造列组。 其格式为：<COL span=x width=y>
例2-19 设置列组。
2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 （1）边框的显示可以通过在<TABLE>标记中设置frame属性来控制。 其方法为：<TABLE frame=属性值> 属性值box（显示所有4个边框）、above（只显示上边框）、below（只 显示下边框）、hsides（只显示上、下边框）、vsides（只显示左、右边 框）、lhs（只显示左边框）、rhs（只显示右边框）和void（不显示任何 边框）。
2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 （2）分隔线的显示可以通过在<TABLE>标记中设置rules属性来控制。 其方法为：<TABLE rules=属性值> 属性值可以为all（显示所有分隔线）、groups（只显示组与组之间的分 隔线）、rows（只显示行与行之间的分隔线）、cols（只显示列与列之 间的分隔线）、none（不显示任何分隔线）。
2.6 超链接标记 2.6.1 超链接标记 2.6.2 页面链接 2.6.3 书签链接 2.6.4 电子邮件链接
2.6.1 超链接标记 <A href =”地址” name=”书签名” target=”打开窗口方式”>热点</A> 属性href为超文本引用，它的值为一个URL地址，是目标资源的有效地址。 可以是相对路径或者绝对路径。 属性name指定当前文档内的一个字符串，作为链接时可以使用的有效的 目标资源的地址。 属性target用于设定链接被按后结果所要显示的窗口。可选值为_blank （或new）、_parent、_self、_top、框架名称。
2.6.2 页面链接 <A href=”url”>字符串</A> <A href=url><IMG arc=图像文件名></A>
2.6.3 书签链接 ① 首先在目标位置设置标记，称为书签，设置格式为： 2.6.3 书签链接 ① 首先在目标位置设置标记，称为书签，设置格式为： <A name=”书签名称”>text</A> ②在跳转调用处定义超链接，格式为： <A href=”#书签名称”>text</A> 如果在一个网页中（如A页面）要建立指向其他页面（如B页面）中某一处的超链 接，方法为：在B页面中要跳转到的目标位置设置标记，格式为： <A name=“记号名”></A> 在A页面中定义超链接，格式为： <A href=”B 文件的URL#记号名”>text</A>。
2.6.4 电子邮件链接 <A href= “mailto: E-mail地址”>热点文本</A>
例2-21 超链接标记的使用。
2.7 表单标记 2.7.1 表单的标记 2.7.2 常用的表单域
2.7.1 表单的标记 HTML中与设计表单有关的常用标记有<form>、<input>、 <option>、<select>、<textarea>等标记。
2.7.1 表单的标记 （1）<Form> <form>表单标记的主要作用是设定表单的起止位置，并指定处理表单数 2.7.1 表单的标记 （1）<Form> <form>表单标记的主要作用是设定表单的起止位置，并指定处理表单数 据程序的URL地址。其基本格式为： <FORM action=”url” method=”get|post” name=”value” onsubmit= ”function” onreset=”function” target=”window”> …… </FORM>
2.7.1 表单的标记 （1）<Form> Action 属性用于设定处理表单数据程序的URL地址。这样的程序通常是ASP之类 2.7.1 表单的标记 （1）<Form> Action 属性用于设定处理表单数据程序的URL地址。这样的程序通常是ASP之类 的应用程序，采用电子邮件方式时，用action=”mailto：指定的电子邮件地址”。 Method 属性指定数据传送到服务器的方式。有两种主要的方式，其中POST方式 较为常用。当method=get 时，将输入数据加在action指定的地址后面传送到服务 器；当method =post 时则将输入数据按照HTTP传输协议中的post传输方式传送 到服务器，用电子邮件接收用户信息采用这种方式。 Name 属性用于设定表单的名称。 Onsubmit 和 onreset 主要针对“submit”按钮和“reset”按钮来说的，分别设 定在按下相应的按钮之后要执行的子程序。 Target 属性指定输入数据结果显示在哪个窗口，这需要与<frame>标记配合使用。
2.7.1 表单的标记 （2）<INPUT> <INPUT>标记在表单中使用最频繁，大部分表单内容需要用到此标记。 2.7.1 表单的标记 （2）<INPUT> <INPUT>标记在表单中使用最频繁，大部分表单内容需要用到此标记。 它主要用来设计表单中提供给用户的输入形式。 其基本格式为： <INPUT name=”value” type=”form area type” value=”value” src=”url” checked maxlength=”n” size=”n”>
2.7.1 表单的标记 （2）<INPUT> name属性设定当前表项的名称，主要在处理表单时起作用。 2.7.1 表单的标记 （2）<INPUT> name属性设定当前表项的名称，主要在处理表单时起作用。 type 属性决定了表单中表项的类型。其选项较多，有text、password、 checkbox、radio、submit、reset、file、hidden、image、button等。 value属性用于设定输入默认值，即如果用户不输入的话，就采用此默认值。 src属性是针对type=image的情况来说的，设定图像文件的URL地址。 checked属性表示选择框（单选钮或复选框）中，此项被默认选中。 maxlength属性表示在输入单行文本的时候，最大输入字符个数。 size属性用于设定单行文本区域的宽度。
2.7.2 常用的表单域 文本框和密码框 单选钮和复选框 列表框 多行文本框 按钮
2.7.2 常用的表单域 文本框和密码框 （1）单行文本框的基本格式为： 2.7.2 常用的表单域 文本框和密码框 （1）单行文本框的基本格式为： <INPUT type=text name=string1 walue=string2 size=x maxlength=y> （2）密码框的基本格式为： <INPUT type=”password” name=”pass_name”> 在密码框中输入的表单内容将以“*”显示。
2.7.2 常用的表单域 单选钮和复选框 （1）单选钮就是从一组选择项中选取一项。其基本格式为： 2.7.2 常用的表单域 单选钮和复选框 （1）单选钮就是从一组选择项中选取一项。其基本格式为： <INPUT type=”radio” name=”radio_name” value=”string”> 注意同组单选钮必须具备相同的name名称。 （2）复选框就是可以从一组选择项中选取多项。其基本格式为： <INPUT type=”checkbox” name=”checkbox_name” value=”string”> 同组复选框也必须具备相同的name名称。在其中还可以加入checked属性表示默认选定值。
2.7.2 常用的表单域 3 . 列表框 一个列表框的基本格式为： 2.7.2 常用的表单域 3 . 列表框 一个列表框的基本格式为： <SELECT name=nametext size=n multiple> <OPTION selected value=value>选项1 <OPTION>选项2 …… <OPTION>选项n </SELECT>
2.7.2 常用的表单域 4 . 多行文本框 基本格式为： <TEXTAREA name=name cols=n rows=n wrap=off | hard | soft>
2.7.2 常用的表单域 按钮 按钮包括“提交”按钮（type=submit）、“重置”按钮（type=reset）和普通按钮（type=button）。“提交”按钮是将表单内容提交给服务器的按钮，“重置”按钮是将表单内容全部清除，让浏览者重新填写的按钮。 按钮的基本格式为： <INPUT type=”submit | reset | button” name=”name” value=”text”>
例2-22 表单的使用。
2.8 框架标记 2.8.1 建立框架 2.8.2 框架的属性设置 2.8.3 框架间的链接
2.8.1 建立框架 一个框架的基本结构为： <FRAMESET cols=”50%,*”> 2.8.1 建立框架 一个框架的基本结构为： <FRAMESET cols=”50%,*”> <FRAME name=”hi” src=”left.html”> <FRAME name=”content” src=”main.html”> </FRAMESET> 1. <FRAMESET>标记 2.<FRAME>标记 3. <NOFRAMES>标记
2.8.1 建立框架 1. <FRAMESET>标记 基本格式为： 2.8.1 建立框架 1. <FRAMESET>标记 基本格式为： <FRAMESET rows=”数值” cols=”数值” frameborder=”0/1” border=”像 素数” bordercolor=”颜色” framespacing=”值”>
2.8.1 建立框架 2.<FRAME>标记 <FRAME>标记是一个单标记，其格式为： 2.8.1 建立框架 2.<FRAME>标记 <FRAME>标记是一个单标记，其格式为： <FRAME name=”框架名” src=”源文件名” marginwidth=”x” marginheight=”y” scrolling=”yes | no | auto ” frameborder=”0或1” framespacing=”z” bordercolor=”颜色” noresize >
2.8.1 建立框架 3. <NOFRAMES>标记。例如： <FRAMESET rows=”80, *”> 2.8.1 建立框架 3. <NOFRAMES>标记。例如： <FRAMESET rows=”80, *”> <NOFRAMES> <BODY> 很抱歉，您使用的浏览器不支持框架功能，请转用新的浏览器。 </BODY> </NOFRAMES> <FRAME name=”top” src=”a.html”> <FRAME name=”bottom” arc=”b.html”> <FRAMESET>
例2-23 框架的嵌套。
2.8.2 框架的属性设置 1. 设定框架的有无和颜色 2．固定边框 3．页面空白区域的设置 4．滚动条的设置
2.8.2 框架的属性设置 1. 设定框架的有无和颜色 （1）frameborder属性可以设定有无边框。格式为： 2.8.2 框架的属性设置 1. 设定框架的有无和颜色 （1）frameborder属性可以设定有无边框。格式为： <FRAMESET frameborder=”0或1”> 或 <FRAME frameborder=”0或1”> （2）bordercolor属性可以给边框着色。格式为： <FRAMESET bordercolor=”颜色”> <FRAME bordercolor=”颜色”>
2.8.2 框架的属性设置 2．固定边框 在缺省情况下，浏览者可用鼠标拖动边框改变页面的大小。使用 2.8.2 框架的属性设置 2．固定边框 在缺省情况下，浏览者可用鼠标拖动边框改变页面的大小。使用 <FRAME>标记的noresize属性可以固定边框的位置。其格式为： <FRAME noresize> Noresize属性没有属性值，加入noresize属性则固定边框。
2.8.2 框架的属性设置 3．页面空白区域的设置 <FRAME>的marginhigh和marginwidth属性可以设置框架内容与框架的 边框之间的空白，其中marginhight属性设置框架内容与上下边框间保留 的空间，marginwidth属性设置框架内容与左右边框间保留的空间。 <FRAMESET>标记中的framespacing属性可以用来设置各个框架窗口之 间的空白。
2.8.2 框架的属性设置 4．滚动条的设置 在<FRAME>标记中的属性scrolling用来设置滚动条，它可以取“yes”、 2.8.2 框架的属性设置 4．滚动条的设置 在<FRAME>标记中的属性scrolling用来设置滚动条，它可以取“yes”、 “no”和“auto”3种值，分别表示始终有滚动条、始终没有滚动条和自 动启动滚动条，默认值是自动启动滚动条。
例2-24 框架嵌套修改后的页面。
2.8.3 框架间的链接 在很多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单 2.8.3 框架间的链接 在很多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单 击其中的某项，在另一个框架中显示相应的内容。这些目录是热点文本， 需要在框架之间建立超链接，并指明显示目标文件的框架。 使用<A>标记的target属性就是可以控制目标文件在哪个框架内显示。当 单击热点文本时，目标文件就会出现在由target指定的框架内。
例2-25 框架间的链接。 图2-25 框架间的链接
例2-25 框架间的链接。 图2-26 单击热点“李白”后的显示效果
例2-25 框架间的链接。 图2-27 单击热点“送孟浩然之广陵”后的显示效果
谢 谢 同 学 们