第2章超文本标记语言HTML.

第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文件的基本结构 HTML概述 HTML语法 HTML文件的基本结构

HTML概述 HTML是一种描述性语言，用HTML可以创建能在互联网上传输的信息页，即通常所称的主页或网页。 HTML语言使用描述性标记符（称为标记）来指明文本的不同内容。 HTML是一种语言，但并不算是“程序”语言。 HTML文档包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML标记。

HTML语法 <标记>受标记影响的内容</标记> <标记属性1=属性值属性2=属性值…>受标记影响的内容</标记> 例如，可以用字体标记<FONT>的字号属性size指定文字的大小，HTML语句如下： <FONT size=1>本行字将以较小字体显示</FONT>

2.1.3 HTML文件的基本结构 <HTML> <HEAD>
<TITLE>网页的标题</TITLE> </HEAD> <BODY> 文档主体，正文部分 </BODY> </HTML>

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_ ”> 通知浏览器本HTML文件使用了gb2312字符集，是简体中文网页。 <META http-equiv=”Refresh” content=”2” url=” 去，这就是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 文字和段落标记标题文字标记文字标记段落标记

标题文字标记<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>

文字标记<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>

段落标记强制换行标记强制换段标记设置段落标记水平线

强制换行标记<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无序列表无序列表中每一个表项的前面是项目符号（如■ 、 ● 等）。
建立无序列表使用<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=符号类型>
有序列表使用<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-10 无序列表中套无序列表。例2-11 有序列表中套无序列表。

2.4 图片标记网页中的图片图片标记设定图片的布局

网页中的图片 Web中图片的几种常用格式为GIF、JPEG和PNG，此外还可使用矢量格式。其中最常用的是GIF和JPEG格式，几乎所有浏览器都支持这两种格式。

图片标记图片标记<IMG>的格式为： <IMG src=”图片文件名” alt=”简单说明” width=”图片的宽度” height=”图片的高度” hspace=”水平方向空白” vspace=”垂直方向空白” border=”边框宽度” align=”对齐方式”>

设定图片的布局布局是图像放在网页中的位置以及图像与文本的排放关系。实现这种功能，除了利用<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. 设置图像与文本间的关系（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.5 表格标记建立简单表格表格的属性设置

2.5.1 建立简单表格一般格式为： <TABLE> </TABLE>
建立简单表格一般格式为： <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>

例一个简单的表格

表格的属性设置 1. 表格标记属性 2. 单元格的合并 3. 表格的分组显示 4. 表格边框和分隔线的显示控制

表格的属性设置 1. 表格标记属性（1）<TABLE>标记的属性设置（2）<TR>标记的属性设置（3）<TD>标记的属性设置

（1）<TABLE>标记的属性设置
表格的属性设置 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>标记的属性设置
表格的属性设置 1. 表格标记属性（2）<TR>标记的属性设置 <TR width=x或x% height=y或y% align=”水平对齐方式” valign=”垂直对齐方式” bgcolor=”背景颜色” bordercolor=”边框颜色”>

2.5.2 表格的属性设置 1. 表格标记属性（3）<TD>标记的属性设置
表格的属性设置 1. 表格标记属性（3）<TD>标记的属性设置 <TD width=x或x% height=y或y% colspan=”i” rowspan=”j” align=”对齐方式（水平）” valign=”对齐方式（垂直）” background=”背景图片” bgcolor=”背景颜色” bordercolor= ”边框颜色”>

例表格的属性设置

2.5.2 表格的属性设置 2. 单元格的合并 <TD colspan=”i” rowspan=”j”>
表格的属性设置 2. 单元格的合并 <TD colspan=”i” rowspan=”j”> 其中，i表示合并的列数，j表示合并的行数。

例表格单元格的合并

例表格单元格的随意合并

表格的属性设置 3. 表格的分组显示（1）按行分组（2）按列分组

2.5.2 表格的属性设置 3. 表格的分组显示（1）按行分组 <TABLE>
表格的属性设置 3. 表格的分组显示（1）按行分组 <TABLE> <THEAD>表头</THEAD> <TFOOT>表尾</TFOOT> <TBODY>表体1</TBODY> …… <TBODY>表体n</TBODY> </TABLE>

例2-18 按行组制作表格。

2.5.2 表格的属性设置 3. 表格的分组显示（2）按列分组 <COLGROUP>标记可一次设定列组中的列数以及各列属性。
表格的属性设置 3. 表格的分组显示（2）按列分组 <COLGROUP>标记可一次设定列组中的列数以及各列属性。其格式为：<COLGROUP span=x width=y> <COL>标记可以设定一列的属性，它可以放在<COLGROUP>中使用，也可单独用于定义列组以外列的属性，但它不能构造列组。其格式为：<COL span=x width=y>

例2-19 设置列组。

2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制
表格的属性设置 4. 表格边框和分隔线的显示控制（1）边框的显示可以通过在<TABLE>标记中设置frame属性来控制。其方法为：<TABLE frame=属性值> 属性值box（显示所有4个边框）、above（只显示上边框）、below（只显示下边框）、hsides（只显示上、下边框）、vsides（只显示左、右边框）、lhs（只显示左边框）、rhs（只显示右边框）和void（不显示任何边框）。

2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制
表格的属性设置 4. 表格边框和分隔线的显示控制（2）分隔线的显示可以通过在<TABLE>标记中设置rules属性来控制。其方法为：<TABLE rules=属性值> 属性值可以为all（显示所有分隔线）、groups（只显示组与组之间的分隔线）、rows（只显示行与行之间的分隔线）、cols（只显示列与列之间的分隔线）、none（不显示任何分隔线）。

2.6 超链接标记超链接标记页面链接书签链接电子邮件链接

超链接标记 <A href =”地址” name=”书签名” target=”打开窗口方式”>热点</A> 属性href为超文本引用，它的值为一个URL地址，是目标资源的有效地址。可以是相对路径或者绝对路径。属性name指定当前文档内的一个字符串，作为链接时可以使用的有效的目标资源的地址。属性target用于设定链接被按后结果所要显示的窗口。可选值为_blank （或new）、_parent、_self、_top、框架名称。

页面链接 <A href=”url”>字符串</A> <A href=url><IMG arc=图像文件名></A>

2.6.3 书签链接 ① 首先在目标位置设置标记，称为书签，设置格式为：
书签链接 ① 首先在目标位置设置标记，称为书签，设置格式为： <A name=”书签名称”>text</A> ②在跳转调用处定义超链接，格式为： <A href=”#书签名称”>text</A> 如果在一个网页中（如A页面）要建立指向其他页面（如B页面）中某一处的超链接，方法为：在B页面中要跳转到的目标位置设置标记，格式为： <A name=“记号名”></A> 在A页面中定义超链接，格式为： <A href=”B 文件的URL#记号名”>text</A>。

电子邮件链接 <A href= “mailto: 地址”>热点文本</A>

例2-21 超链接标记的使用。

2.7 表单标记表单的标记常用的表单域

表单的标记 HTML中与设计表单有关的常用标记有<form>、<input>、 <option>、<select>、<textarea>等标记。

2.7.1 表单的标记（1）<Form> <form>表单标记的主要作用是设定表单的起止位置，并指定处理表单数
表单的标记（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之类
表单的标记（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）<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）<INPUT> name属性设定当前表项的名称，主要在处理表单时起作用。 type 属性决定了表单中表项的类型。其选项较多，有text、password、 checkbox、radio、submit、reset、file、hidden、image、button等。 value属性用于设定输入默认值，即如果用户不输入的话，就采用此默认值。 src属性是针对type=image的情况来说的，设定图像文件的URL地址。 checked属性表示选择框（单选钮或复选框）中，此项被默认选中。 maxlength属性表示在输入单行文本的时候，最大输入字符个数。 size属性用于设定单行文本区域的宽度。

常用的表单域文本框和密码框单选钮和复选框列表框多行文本框按钮

2.7.2 常用的表单域文本框和密码框（1）单行文本框的基本格式为：
常用的表单域文本框和密码框（1）单行文本框的基本格式为： <INPUT type=text name=string1 walue=string2 size=x maxlength=y> （2）密码框的基本格式为： <INPUT type=”password” name=”pass_name”> 在密码框中输入的表单内容将以“*”显示。

2.7.2 常用的表单域单选钮和复选框（1）单选钮就是从一组选择项中选取一项。其基本格式为：
常用的表单域单选钮和复选框（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 . 列表框一个列表框的基本格式为：
常用的表单域 3 . 列表框一个列表框的基本格式为： <SELECT name=nametext size=n multiple> <OPTION selected value=value>选项1 <OPTION>选项2 …… <OPTION>选项n </SELECT>

常用的表单域 4 . 多行文本框基本格式为： <TEXTAREA name=name cols=n rows=n wrap=off | hard | soft>

常用的表单域按钮按钮包括“提交”按钮（type=submit）、“重置”按钮（type=reset）和普通按钮（type=button）。“提交”按钮是将表单内容提交给服务器的按钮，“重置”按钮是将表单内容全部清除，让浏览者重新填写的按钮。按钮的基本格式为： <INPUT type=”submit | reset | button” name=”name” value=”text”>

例2-22 表单的使用。

2.8 框架标记建立框架框架的属性设置框架间的链接

2.8.1 建立框架一个框架的基本结构为： <FRAMESET cols=”50%,*”>
建立框架一个框架的基本结构为： <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>标记基本格式为：
建立框架 1. <FRAMESET>标记基本格式为： <FRAMESET rows=”数值” cols=”数值” frameborder=”0/1” border=”像素数” bordercolor=”颜色” framespacing=”值”>

2.8.1 建立框架 2.<FRAME>标记 <FRAME>标记是一个单标记，其格式为：
建立框架 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, *”>
建立框架 3. <NOFRAMES>标记。例如： <FRAMESET rows=”80, *”> <NOFRAMES> <BODY> 很抱歉，您使用的浏览器不支持框架功能，请转用新的浏览器。 </BODY> </NOFRAMES> <FRAME name=”top” src=”a.html”> <FRAME name=”bottom” arc=”b.html”> <FRAMESET>

例2-23 框架的嵌套。

框架的属性设置 1. 设定框架的有无和颜色 2．固定边框 3．页面空白区域的设置 4．滚动条的设置

2.8.2 框架的属性设置 1. 设定框架的有无和颜色（1）frameborder属性可以设定有无边框。格式为：
框架的属性设置 1. 设定框架的有无和颜色（1）frameborder属性可以设定有无边框。格式为： <FRAMESET frameborder=”0或1”> 或 <FRAME frameborder=”0或1”> （2）bordercolor属性可以给边框着色。格式为： <FRAMESET bordercolor=”颜色”> <FRAME bordercolor=”颜色”>

2.8.2 框架的属性设置 2．固定边框在缺省情况下，浏览者可用鼠标拖动边框改变页面的大小。使用
框架的属性设置 2．固定边框在缺省情况下，浏览者可用鼠标拖动边框改变页面的大小。使用 <FRAME>标记的noresize属性可以固定边框的位置。其格式为： <FRAME noresize> Noresize属性没有属性值，加入noresize属性则固定边框。

框架的属性设置 3．页面空白区域的设置 <FRAME>的marginhigh和marginwidth属性可以设置框架内容与框架的边框之间的空白，其中marginhight属性设置框架内容与上下边框间保留的空间，marginwidth属性设置框架内容与左右边框间保留的空间。 <FRAMESET>标记中的framespacing属性可以用来设置各个框架窗口之间的空白。

2.8.2 框架的属性设置 4．滚动条的设置在<FRAME>标记中的属性scrolling用来设置滚动条，它可以取“yes”、
框架的属性设置 4．滚动条的设置在<FRAME>标记中的属性scrolling用来设置滚动条，它可以取“yes”、 “no”和“auto”3种值，分别表示始终有滚动条、始终没有滚动条和自动启动滚动条，默认值是自动启动滚动条。

例2-24 框架嵌套修改后的页面。

2.8.3 框架间的链接在很多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单
框架间的链接在很多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应的内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示目标文件的框架。使用<A>标记的target属性就是可以控制目标文件在哪个框架内显示。当单击热点文本时，目标文件就会出现在由target指定的框架内。

例2-25 框架间的链接。图2-25 框架间的链接

例2-25 框架间的链接。图2-26 单击热点“李白”后的显示效果

例2-25 框架间的链接。图单击热点“送孟浩然之广陵”后的显示效果

谢谢同学们

第2章超文本标记语言HTML.

Similar presentations

Presentation on theme: "第2章超文本标记语言HTML."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

第2章 超文本标记语言HTML.

Similar presentations

Presentation on theme: "第2章 超文本标记语言HTML."— Presentation transcript:

Similar presentations

About project

反馈

第2章超文本标记语言HTML.

Presentation on theme: "第2章超文本标记语言HTML."— Presentation transcript: