3 html
Download
1 / 128

?3? HTML ?????? - PowerPoint PPT Presentation


  • 113 Views
  • Uploaded on

第3章 HTML 语言基本结构. 3.1 基本结构标记 3.2 文本格式标记 3.3 列表标记 3.4 超链接标记 3.5 加入音频、视频和图像 3.6 表格标记. 3.7 地址标记 3.8 其他标记 3.9 框架标记 3.10 表单标记 3.11 地图标记 习题. 3.1 基本结构标记. 3.1.1 开始和结束标记 HTML 文档的开始标记是< html>, 它告诉浏览器下面的内容是 HTML 文档,在 HTML 文档结束处要有对应的</ html> 标记,它告诉浏览器 HTML 文档结束了。

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '?3? HTML ??????' - cole


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
3 html

第3章 HTML语言基本结构

3.1 基本结构标记

3.2 文本格式标记

3.3 列表标记

3.4 超链接标记

3.5 加入音频、视频和图像

3.6 表格标记

3.7 地址标记

3.8 其他标记

3.9 框架标记

3.10 表单标记

3.11 地图标记

习题


3 html
3.1 基本结构标记

3.1.1 开始和结束标记

  • HTML文档的开始标记是<html>,它告诉浏览器下面的内容是HTML文档,在HTML文档结束处要有对应的</html>标记,它告诉浏览器HTML文档结束了。

  • 它的语法格式为

    <html>

    HTML文件的所有内容

    </html>


3 html

3.1.2 头部标记

  • HTML文档的头部标记是<head>,它告诉浏览器下面的内容是HTML文档的头部,显示在文本之前,而</head>标记告诉浏览器头部内容结束了。头部里面一般包括注释、Meta和标题。

  • 它的语法格式为:

    <head>

    HTML文档的头部内容

    </head>


3 html

3.1.3 标题标记

  • <title>和</title>标记中间所包含的文字将成为这个Web页面的标题,一般写在头部标记之中。标题文字会显示在Web浏览器最上面的title(标题)栏上。浏览器用户可以把标题加入收藏夹中。标题文字最好使用中文并且有明确的意义。

  • 它的语法格式为

    <title>Web页面的标题</title>

    下面用一个例子来看看用HTML语言是如何编写Web页面的,虽然有点麻烦,可是能帮助你弄清Web页面的真正面目。还要说明的是,文件3.1.htm是一个文本文件,可用任何编辑器编写。


3 html

[例3.1]头部标记和标题标记的使用。

<html>

<head>

<title> Web页面的标题</title>

Web页面的标题和头部标记练习

</head>

</html>

将上述语句保存为3\1.htm文件,在IE浏览器菜单“文件”(File)的下拉菜单中选择“打开”,通过选择可打开3.1.htm文件。头部标记在IE浏览器里的运行结果如图3.1所示。



3 html

3.1.4 主体标记

  • <body>标记是Web页面主体标记的开始,并对应结束符</body>。Web页面的主要内容都出现在<body>和</body>标记之中。

  • 它的语法格式为

    <body>

    主体内容

    </body>


3 html

[例3.2]HTML语言的主体标记。

<html>

<head>

<title> Web页面的标题</title>

</head>

<body>

这是使用HTML语言编写的Web页面文件

</body>

</html>

  • 例3\2在IE浏览器里的运行结果如图3.2所示。


3 html

图3.2

  • 说明: 从这四个标记可以看到HTML语言的标记是成对使用的,开始为<标记>,结束为</标记>,这一点在写HTML语言时一定要牢记。不过,也有个别的标记是单独出现的。标记里的英文字母大小写都可以,本书统一使用小写。


3 html

3.1.5 设定Web页面背景

  • <body>标记还具有一些可以设定Web页面背景色的属性,可使用图片/图像作背景,确定链接的颜色,设置文字的颜色等。

  • 它的语法格式为

    <body [bgcolor=#text=#link=#alink=#vlink=#background=图像文件名]>

    文档内容

    </body>


3 html

  • 其中,bgcolor指定HTML的背景颜色;text指定HTML文件中文字色彩属性;link指定HTML文件中待连接超链接对象的色彩属性;alink指定HTML文件中连接超链接对象的色彩属性;vlink指定HTML文件中已连接超链接对象的色彩属性;background指定HTML背景为平铺图像(这个功能最好不用,因为它会大大降低显示速度)。

  • 各属性的参数值可以是用英文描述的颜色,如“red”、“blue”、“yellow”等,也可以是#与6位十六进制数,每种颜色使用两位十六进制数,从00到FF,前两位设置红色的深浅,中间两位设置绿色的深浅,后两位设置蓝色的深浅。如红色可以表示为“#FF0000”,蓝色可以表示为“#0000FF”等。各属性可选择使用。

  • 注意: “[ ]”中的属性可选可不选,“”表示可同时选的属性。根据需要可以选择其中的一个、部分和全部。


3 html

[例3.3]改变文字的颜色和背景的颜色。

<html>

<head>

<title> Web页面的标题</title>

这是头部里的文字

</head>

<body Bgcolor=″red″ text=″#000000″>

这是主体里的文字并加入文字和背景颜色编写的Web页面文件

</body>

</html>


3 html

  • 例3-3在Web浏览器里的运行结果如图3.3所示。不过,颜色从本书上是看不出来的,可以亲手试一试。

图3.3


3 html

  • 注意: 在编写HTML文件时要采用“编写—存盘—浏览”三步曲,以此循环工作,否则会耽误时间的,千万要记住!

    3.1.6 说明信息标记

  • meta可以用来说明语言字符集的信息,例如:<meta httpequvi=“ContentType” content=“text/html;charset=#”>,属性httpequvi描述特征名,属性content描述特征值。

  • 常用的有#=xmacroman、gb2312、gb-231280、big5等。

  • Meta也用来描述文档的自身信息,如作者信息、过期时间、关键词列表等。例如:


3 html

<meta httpequvi=″ 作者″ content=″张驰″>

<meta httpequvi=″ 文档期限″ content=″2001/9/25″>

meta一般放在头部内。

3.1.7 注释标记

  • 为了使程序清楚、容易理解,可以添加注释标记“<!”与“>”(也可写为“<!--”与“-->”),在这对注释标记符号之间的内容将不会被浏览器显示出来。


3 html
3.2 文本格式标记

3.2.1标题字体

  • 标题字体是通过<h>与</h>标记实现的。夹在<h1>和</h1>中间的文字,是文章里的大号标题字体。依次可以标注出六个层级的子标题,从<h1>、<h2>到<h6>。差别在于标题数字小的文字会比数字大的标题的文字大些、粗些、更显眼。在下面的例子里可以看出它们之间的差别。每遇到一个标题时,当前段落就会被终止,标题前后各留出一定的空白。文本自动从下一行开始。


3 html

  • 它的语法格式为

    <hi>标题文字</hi> (i=1,2,…,6)

    [例3.4]不同的标题字体。

    <html>

    <body><h1>这是h1标题字体!!</h1>

    <h2>这是h2标题字体!!</h2><h4>这是h4标题字体!!</h4>

    <h5>这是h5标题字体!!</h5><h6>这是h6标题字体!!</h6>

    </body>

    </html>

  • 图3.4是例3.4在浏览器里的显示结果。



3 html

  • <h>的属性有color、align,分别标识标题的颜色和位置(左、右、中间)。

  • 它的语法格式为

    <hi color=# align=#>标题</hi> (i=1,2,…,6)


3 html

  • [例3.5]标题字体加入属性后的变化。

    <html>

    <body>不同的标题字体

    <h3>这是H3标题字体!!</h3>

    <h4 color=#ff0000 align= right >这是H4标题字体!!</h4>

    <h5 align=center>这是H5标题字体!!</h5>

    <h6 align= left >这是H6标题字体!!</h6>

    </body>

    </html>

  • 图3.5是例3.5在浏览器里的显示结果。



3 html

3.2.2 字体大小标记

  • 字体大小标记<font>与</font>能够改变包含的字符、单词、短语或指定范围文本的字号大小。

  • 它的语法格式为

    <font size=#>文字</font>

    #=1,2,3,4,5,6,7 or +#,-#,默认时为3号字体。


3 html

  • [例3.6]各种基本文字字体的大小。

    <html>

    <body>

    <font size=7>这是7号字体!!</font>

    <font size=5>这是5号字体!!</font>

    <font size=3>这是3号字体!!</font>

    <font size=2>这是2号字体!!</font>

    <font size=1>这是1号字体!!</font>

    </body>

    </html>

  • 图3.6是例3.6在浏览器里的显示结果。

  • 注意: 字体标记不会自动换行,这一点与标题字体不同。



3 html

3.2.3 段落标记与换行标记

  • 一个类似的标记元素是<br>。<br>这个标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距。

  • 它们的语法格式为

    <p>文本</p>

    文本<br>

  • 下面的例子可以看出二者的区别。


3 html

  • [例3.7]如何使用段落和换行标记。

    <html>

    <body>

  • 在HTML格式里不需要在意文章每行的宽度,不必担心文字是不是太长了而被截掉;(未加段落标记)

  • <p>(加段落标记)它会根据窗口的宽度做自动转折(加换行标记)<br>到下一行的工作。

  • 在HTML格式里不需要在意文章每行的宽度,不必担心文字

    </p>

    </body>

    </html>

  • 图3.7是例3.7在浏览器里的显示结果。


3 html

图3.7

  • 注意: <br>标记是单独使用的。


3 html

3.2.4 水平线标记

  • 使用水平线标记<hr>可以在Web页面中插入一条水平线。线的宽度和高度是可调的。这个标记对于美化页面是很有帮助的。它的属性有align、width、size和noshade,分别用于调整水平线的位置、长度、宽度和是否为实心线。

  • align表示水平线位置与前面类似,有right、center、left,默认时为居中。

  • width 表示水平线长度可以用满屏宽度的百分数表示,也可以用像素值指明,默认时为100%。

  • size 表示水平线宽度,可以用像素值2、4、8、16、32等指明,默认时为2,2也是最小值。


3 html

  • noshade表示水平线是实心线,默认时为一道阴影线。

  • 它的语法格式为

    <hr \[size=# align=#width=#noshade\]>

  • [例3.8]如何插入水平线。

    <html>

    <body>

    <br>

    插入水平线<hr ><br >

    插入水平线<hr size=2 align=left width=75%>

    插入水平线<hr size=6 align=center width=50%>

    插入水平线<hr size=8 align=right width=50% noshade>

    </body>

    </html>


3 html

图3.8


3 html

3.2.5 字符格式化标记

  • 个别的字或句子可以使用不同的字体,在NetScape中斜体用的是<i>或<em>强调,黑体用的是<b>或<strong>强调,添加下划线用<u>,选择打字机字体用<tt>。更多的格式标记还有

    <code>: 用于标记HTML指令;

    <dfn>: 用于标记定义的语句;

    <kbd>: 用于标记键盘字符;

    <samp>: 用于标记某个命令的例子;

    <var>: 用于标记程序变量。

  • 这些标记的语法格式都是成对出现的。


3 html

  • [例3.9]如何使用字符格式化标记。

    <html>

    <body>

    <i>斜体</i><em>(斜体)</em>

    <b>黑体</b><strong>(黑体)</strong><br>

    <tt>打字机字体</tt><var>程序变量xyz</var><br>

    <code>HTML指令</code><samp>例1</samp>

    <kbd>使用键盘字符时a%#@!()&*</kbd>

    </body>

    </html>

  • 图3.9是例3.9在浏览器里的显示结果。



3 html

3.2.6 原样显示标记

  • HTML在一般无标注的情况下会忽略文本文件中的空白字符和换行字符,但可以用<pre>和</pre>让空白字符和换行字符保存下来。在<pre>与</pre>之间的文字间隔、换行、空白会按照原来键入的模样显示。

  • 它的语法格式为

    <pre>原始文本</pre>

    [例3.10]如何使文本保持原有模样。

    <html>

    <head><title> Web页面制作</title></head>

    <body>

    <pre>


3 html

看看是怎样使文本保持原有模样的!

#!/bin/cshcd$SCR×*cfsgetmysrc.f:mycfsdir/mysrc.f

Fc-02-omya.outmysrc.fmya.out

</pre>

</body>

</html>

  • 图3.10是例3\10在浏览器里的显示结果。



3 html
3.3 列表标记

3.3.1 未标序的列表

  • 未标序的列表由三个标记组成,<ul>说明是未标序的列表,<li>标记于各列表项之前,最后加上列表结束符</ul>。未标序的列表在每一行的起始是 “●”或是“■”标记。要注意若使用不同的浏览器就可能会有不同的效果。

  • 它的语法格式为

    <ul>

    <li>

    <li>

    <li>

    </ul>


3 html

3.3.2 标序列表

  • 方法跟前者相似,先说明种类<ol>,再加上<li>标记于各项之前,最后加上列表结束符</ol>。在每一行列表的前面显示的是数字。

  • 它的语法格式为

    <ol>

    <li>

    <li>

    <li>

    </ol>


3 html

[例3.11]未标序的列表和标序列表。

<html><body>

<ul>

<li>第一章

<li>第二章

<li>第三章

</ul>

<ol>

<li>第一章

<li>第二章

<li>第三章

</ol>

</body></html>

  • 图3.11是例3\11在浏览器里的显示结果。



3 html

3.3.3 解释列表

  • 解释列表包括一系列名词及其解释。名词比解释的部分凸前,为独立的一行。解释的部分被视为一长串文字会自动折行。先标记<dl>说明为解释列表,要解释的名词放在<dt>的后面,解释的内容放在<dd>后面,最后以</dl>结尾。在<dt>和<dd>之间,可以包含其他的标记。

  • 它的语法格式为


3 html

<dl>

<dt>名词1

<dd>解释1

<dt>名词2

<dd>解释2

<dt>名词3

<dd>解释3

</dl>


3 html

[例3.12]解释列表。

<html>

<body>

<dl>

<dt> Web

<DD>Web是英文World Wide Web的简称,中文的意思是布满世界的蜘蛛网。

<dt> URL

<dd>URL称为统一资源定位器,它是Uniform Resource Locations的缩写。

</dl>

</body>

</html>

  • 图3.12是例3\12在浏览器里的显示结果。



3 html

3.3.4 综合列表

  • 方法跟前者相似,先说明种类<ol>,再加上<li>标记于各项之前,最后加上列表结束符</ol>。在每一行列表的前面显示的是数字。

  • 它的语法格式为

    <ol>

    <li>

    <li>

    <li>

    </ol>


3 html

[例3.13]各列表的嵌套使用。

<html>

<body>

<ul>

<li>第一章

<ul>

<li>第一节

<dl>

<dt>Web <dd>Web是英文World Wide Web的简称,中文的意思是布满世界的蜘蛛网。

<dt> URL <dd>URL称为统一资源定位器,它是Uniform Resource Locations的缩写。


3 html

</dl>

<li>第二节

</ul>

<li>第二章

<ol>

<li>历史

<li>简介

</ol>

</ul>

</body>

</html>


3 html

图3.13


3 html
3.4 超链接标记

3.4.1 链接至本机另一Web页面

  • 链接到本机上的Web页面很简单,只要把文件名和路径赋给href就可以了。

  • 它的语法格式为

    <a href=″filename.htm″>链接到filename</a>

  • 下面在浏览器中将看到“链接到filename”会变色并加下底线,当鼠标移到上面时,箭头会变成小手,它表示在这儿用鼠标按一下,会链接到同一机器同一路径的filename.htm 文件上。例如:<A href=“3.13.htm”>这里是“3.13.htm” Web页</A>。在浏览器中单击这里是″3.13.htm″Web页浏览器将打开3.13.htm文件。


3 html

3.4.2 链接到另外一台机器上的Web页面

  • 链接到另外一台机器上的Web页面也很简单,只要把目的地的URL地址赋给href就可以了。例如:想链接到“首都在线”的主页,可以写成:

    <a href=″http://www.263.net″>这里是首都在线的主页</a>

  • 它的语法格式为

    <a href=″URL″>这里是某地方</a>


3 html

[例3.14]如何链接到其他的Web页。

<html>

<head>

<title> Web页面制作</title>

</head>

<body>

  • 例如:可以链接到本机的

    <a href=″3.11.htm″>″3.11.htm″Web页</a>

    <p>链接到另外一台机器上的Web页面也很简单,只要把目的地赋给href就可以了。

    </p>


3 html

  • 例如:想链接到“首都在线”的主页,可以写成:例如:想链接到“首都在线”的主页,可以写成:

    <a href=″http://www.263.net″>只要在这里点一下</a>即可。

    <hr>

    <h4 align=center>

    <a href=″3.14.htm″>返回″3.14.htm″</a>

    <h4>

    </body>

    </html>

  • 图3.14是例3\14在浏览器里的显示结果。

  • 注意: 当链接到另一个HTML文件时,必须有一个返回到本页的链接才可回到初始页面。


3 html

图3.14例如:想链接到“首都在线”的主页,可以写成:


3 html

3.4.3 链接到同一文章的另一个段落例如:想链接到“首都在线”的主页,可以写成:

[例3.15]如何链接到同一Web页的其他段落。

<html>

<head>

<title> Web页面制作</title>

</head>

<body>

<a name=″第一章″>第一章</a>为“锚”标记。

<p>除了链接到另一个HTML文件,也可以在一篇文章内随心所欲地链接。

<br>


3 html

这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<br>再做到“锚”的链接。到“锚”的链接与平常相同。</p>

<p></p><p></p><p></p><hr>

<a href=″#第一章″>从这里可链接到第一章</a>

</body>

</html>

  • 图3.15是例3\15在浏览器里的显示结果。

  • 提示: 必须在不同的屏幕上才能看到链接效果,在同一屏幕看不出链接变化。


3 html

图3.15这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<


3 html

3.4.4 链接到不同文章的另一个段落这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<

  • 如果链接到不同的文件的一个段落,则表示的方法有些改变。假如在B1文章里建立链接“链接到第一章”,而锚标记“第一章”在B2文章中,则可写为

    <a href=″B2文章的文件名#第一章″>链接文字</a>

  • 这样一来,当在B1文章中点击“链接到第一章”就会跳到B2文章的“第一章”这几个字的位置,而不是B2文章中的其他地方。


3 html

[这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<例3.14]如何链接到其他的Web页。

<html>

<head>

<title> Web页面制作</title>

</head>

<body>[例3.16]如何链接到别的Web页的某一锚位置。

<html>

<head>

<title> Web页面制作</title>

</head>

<body>

<a href=″3.15.htm#第一章″>在这里点击一下</a>


3 html

就会跳到3.15.这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<htm文章的″第一章″这个位置。

</body>

</html>

  • 图3.16是例3.16在浏览器里的显示结果。

  • 提示: 除了用文字做链接以外,还可以用图像做链接。除了链接到Web服务器的页面以外,还可以链接到其他服务器上,如FTP、GOPHER、NEWS、TELNET以及FILE等。只要是URL地址即可。


3 html

图3.16这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<


3 html
3.5 这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<加入音频、视频和图像

3.5.1 加入音频和视频

  • 在Web页面中加入音频和视频会使页面变得更加生动、活泼。如何加入音频呢?在Web中加入音频文件的方法非常简单,只要把href指定的URL写上相应的音频文件名就可以了。例子如下:

    <a href=″yy.mid″>在这里欣赏音乐</a>

  • 视频的加入和音频类似,例如:

    <a href=″TEST.MPEG″>在这里欣赏视频</a>

  • 提示: 音频和视频的数据量较大,不可乱用。


3 html

3.5.2 图像标记这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<

  • 它的语法格式为

    <img src=图像的URL地址>

  • img告诉浏览器下面要插入一个图像,src指出图像的来源,即URL地址。

  • img的属性有:align(显示的位置)、alt(显示文字)、border(边框)、height(高度)和wdith(宽度)。当浏览器关闭显示图像的功能时,可通过alt属性显示Text(文字)代替屏幕上一片空白或碎图片。


3 html

  • align这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地,<的参数有top(顶)、middle(中间)、bottom(底)、left(左)和right(右),它们表示图像在屏幕上的位置。默认时图像放在文字的右边。如果图像很大,几乎充满整个窗口,可适当缩小。border可给图像加一个边框,其值取像素值,值为0时无边框。height(高度)和wdith(宽度)用来确定图像的实际大小,二者也取像素值。

  • 它的语法格式为

    <img src=图像的URLalign=# alt=文字 border=# height=# wdith=# >


3 html

[例3.17]如何插入一个图像和加入一个音频文件。[例3.17]如何插入一个图像和加入一个音频文件。

<html>

<head>

<title> Web页面制作</title>

</head>

<body>

<img src=3.gif align=left alt=人物>插入一个图像

<p><p><p>

加框并变小的图像<img src=2.gif border=2 height=165


3 html

wdith=200 alt=[例3.17]如何插入一个图像和加入一个音频文件。鲜花>

<br><p><p><a href=″1.gif″>单击这里可以看到一个图像</a><p>

<p><p><p><a href=″yy.mid″>单击这里可以欣赏音乐</a></body>

</html>

  • 结果显示如图3.17(a)所示。其图像为文字显示形式,右击图像,选择“显示图片”就会出现图3.17(b)中的图像。

  • 提示: 图像标记<img>没有结束标记。图像还可以作为链接的对象。不过,要用小图片,否则太浪费空间。当你的图形很大,或是希望读者选择性地看图时,你可以做一个链接,用几个文字或一个小图链接到另一个新的图形窗口(另一个文件)。


3 html

图3.17[例3.17]如何插入一个图像和加入一个音频文件。a


3 html

图3.17[例3.17]如何插入一个图像和加入一个音频文件。b


3 html
3.6 [例3.17]如何插入一个图像和加入一个音频文件。表格标记

  • 它的语法格式分为五部分:

    1. 表格标记

    <table>...</table>

    <table>表示下面是一个表格的内容的开始,</table>表示表格结束。

    2. 表格标题标记

    <caption align=#>表格标题</caption>

    表示一个表格的标题,也可不要。align可选择top(放在表格上面居中),bottom(放在表格下面居中),默认时标题放在表格上面居中。


3 html

3. 表格行标记[例3.17]如何插入一个图像和加入一个音频文件。

<tr>...</tr>

  • 表示表格一行的开始和结束。

    4. 字段名标记

    <th>字段名</ht>

  • 在<th>与</th>中间加入字段名,有几个字段名就加入几个字段名标记。

    5. 数据标记

    <td>数据</td>

  • 在<td>与</td>中间加入数据,一般有几个字段名就要加入几个数据标记。


3 html

  • 相关属性有:[例3.17]如何插入一个图像和加入一个音频文件。

    border=#表示表的边框,取像素值,默认时表格没有边框

    cellspacing=#表示格边宽,取像素值,默认值为2

    cellpadding=#表示边框和内容间的距离,取像素值,默认值为1

    colspan=#表示占用列数,默认值为1

    rowspan=#表示占用行数,默认值为1

    width=#% 表示表格宽度


3 html

[例3.18]加入两个普通的表格,一个不带框,一个带框。[例3.18]加入两个普通的表格,一个不带框,一个带框。

<html>

<table>

<caption>价格表</caption>

<tr><th>日期</th><th>香菇</th><th>青椒</th></tr>

<tr><td>9.2</td><td>28.00元</td><td>0.90元</td></tr>

<td><td>9.3</td><td>25.00元</td><td>0.93元</td></tr>

</table><hr >

<table BORDER=4 >

<caption>价格表</caption>

<tr><th>日期</th><th>香菇</th><th>青椒</th></tr>


3 html

<[例3.18]加入两个普通的表格,一个不带框,一个带框。tr><th>日期</th><th>香菇</th><th>青椒</th></tr>

<tr><td>9.2</td><td>28.00元</td><td>0.90元</td></tr>

<tr><td></td><td>25.00元</td><td>0.93元</td></tr>

</table>

</html>

  • 例3\18程序显示结果如图3.18所示。

  • 提示: 如果想加入一个空白格,在<th>与</th>或<td>与</td>之间不加内容就可以了,从例子里你发现了吗?表格的属性有很多,可以变宽度,可以建立链接,可以改变颜色等,你可以自己试一试。如果要使用表格,最好用编辑器的工具直接插入,会省事一点。


3 html

  • 注意: 在网页中使用太大的表格,会降低浏览速度。

图3.18


3 html
3.7 在网页中使用太大的表格,会降低浏览速度。地址标记

  • 这个标记一般用来告知大家本篇文件作者的联系地址、电话、Email信箱。经常是一个Email地址放在文件的最后面。<address>...</address>之间的字是斜体。

  • 它的语法格式为

    <address>地址、电话、Email信箱</address>


3 html

[ 在网页中使用太大的表格,会降低浏览速度。例3.19]如何留地址。

<html>

<head><title>地址练习</title>

<base target=″个人练习显示页面″>

</head>

<body>

<h6><h7><a href=″3.17.htm″>练习3.18</a>

</h6>

<h6><a href=″3.18.htm″>练习3.19</a>

</h6><h6>


3 html

< 在网页中使用太大的表格,会降低浏览速度。a href=″3.19.htm″>练习3.20</a>

</h6><address>

地址:北方交通大学信息管理系<br>

电话:62256622-3643<br>

Email信箱:<a href=″ mailto: ZHC@263.NET ″>ZHC@263.NET</a>

</address></body>

</html>

  • 例3\19程序结果显示如图3.19所示。


3 html

图3.19 在网页中使用太大的表格,会降低浏览速度。


3 html
3.8 在网页中使用太大的表格,会降低浏览速度。其他标记

3.8.1 会滚动的字标记

语法格式为

<marquee>滚动的字</marquee>

<marquee>的属性有

  • 方向: <direction=#> #=left,right

  • 方式: <bihavior=#> #=scroll一圈一圈绕着走,slide走一次就停,alternate来回走

  • 循环: <loop=#> #=次数;若未指定则循环不止

  • 速度: <scrollamount=#>,值越大速度越快


3 html

  • 延时: < 在网页中使用太大的表格,会降低浏览速度。scrolldelay=#>

  • 对齐方式: <align=#> #=top,middle,bottom对齐上沿、中间、下沿

  • 底色: <bgcolor=#> #=rrggbb 十六进制数码,或者是下列预定义色彩: black, red, blue, gray,white,green,silver,yellow等

  • 范围: <height=# width=#> 滚动范围,#的值与前面定义相同

  • 空白: <hspace=# vspace=#> 字与边框的距离,#的值与前面定义相同

  • 字号: <font size=#> #的值与前面定义相同


3 html

[例3.20]滚动的字。 在网页中使用太大的表格,会降低浏览速度。

<html>

<body>

<marquee>自由移动</marquee> <hr>

<marquee direction=left>从右向左滚动</marquee><hr>

<marquee direction=right>从左向右滚动</marquee><hr>

<marquee behavior=scroll>一圈一圈绕着滚动</marquee> <hr>

<marquee behavior=slide>只滚动一次就停了</marquee> <hr>

<marquee behavior=alternate>来回走滚动</marquee> <hr>


3 html

< 在网页中使用太大的表格,会降低浏览速度。marquee loop=3 width=50% behavior=scroll>滚动3次</marquee><hr>

<marquee scrollamount=20>快速滚动</marquee> <hr>

<font size=5>

<marquee scrolldelay=500 scrollamount=100>滚动一步,停一停

</marquee><hr>

<marquee align=# width=400>滚动范围的宽度</marquee><hr>

</font>


3 html

<marquee bgcolor=aaaaee> 在网页中使用太大的表格,会降低浏览速度。滚动范围的背景颜色</marquee>

<marquee HEIGHt=40 width=50% bgcolor=aaeeaa>滚动范围的宽/高度

</marquee>

<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>

空白的模样</marquee>

</body>

</html>

  • 例3\20程序结果显示如图3.20所示。

  • 提示: 滚动的字只在IE浏览器中可以显示,在Netscape浏览器中字不会滚动,只有文字显示。你把上例在IE浏览器中试一下就明白了。


3 html

图3.20 在网页中使用太大的表格,会降低浏览速度。


3 html

3.8.2 闪烁的字标记 在网页中使用太大的表格,会降低浏览速度。

  • 语法格式为

    <blink> 闪烁的字 </blink>

    3.8.3 分区标记

  • 语法格式为

    <div>一个分区的内容</div>

    3.8.4 块引用标记

  • 它的语法格式为

    <blockquote>引用文字</blockquote>

    <blockquote>与</blockquote>标记之间一般引用较长的文本,文本显示时会自动右移,左边空出几个格,将引用的文字区别出来。


3 html

3.8.5 特殊字符的写法 在网页中使用太大的表格,会降低浏览速度。

  • 在ASCII码中,有三个字符:大于(>)、小于(<)和(&),它们被当作HTML格式中的控制码,要在屏幕上显示“<”需在HTML文件中输入“&lt”,要显示“>”需输入“&gt”,要显示“&”需输入“&amp”。尚有其他特殊字符(ISO 8859—1),如要显示需输入“±”&ntilde,要显示“《”需输入&Egrave,这些可以从附录的列表中查到。


3 html
3.9 在网页中使用太大的表格,会降低浏览速度。框架标记

  • 框架网页的标记是通过<frameset>定义的,其语法格式为

    <frameset [rowcol]=″...″>

    ...

    <frame src=″filename″ >

    ...

    </frameset>

  • row和col是分别指明如何横向、纵向分割屏幕,所列出的参数值的个数为窗口的个数。引号内可以用百分数表示各窗口所占的屏幕比例;可以直接用像素值;也可用剩余值“*”表示,如果全是“*”将屏幕均分;也可以混合使用,如20%,30%,*。src属性指出各窗口所对应的HTML文件。


3 html

  • 其他属性还有 在网页中使用太大的表格,会降低浏览速度。

  • scorling: 确定窗口是否设滚动条,取值为:no(无)、yes(有)、默认或auto(根据窗口内容自动添加);

  • name: 定义一个窗口的名字,可区分不同的窗口;

  • nosize: 不可用鼠标调整窗口的大小;

  • target: 确定该页面链接的文件显示的窗口名字。

    [例3.21]如何使用框架标记。

    <html>

    <frameset rows=″17%,83%″ name=″标题栏″scrolling=″no″>

    <frame src=″标题栏.htm″ scrolling=″auto″ >


3 html

< 在网页中使用太大的表格,会降低浏览速度。frameset cols=″28%,*″>

<frame src=″3.19.htm″ scrolling=yes target=″个人练习显示页面″>

<frame src=″3.20.htm″ name=″个人练习显示页面″ scrolling=no >

</frameset>

</frameset>

</html>

  • 例3\21程序显示结果如图3.21所示。


3 html

图3.21 在网页中使用太大的表格,会降低浏览速度。


3 html


3 html
3.10 从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。表单标记

  • form表单标记可以为读者提供一种交互界面,让读者在窗口中输入信息,与其他程序(CGI或ASP程序,JavaScript)一起共同完成读者与Web服务器之间的信息交流。

  • 它的基本语法格式为

    <form method=″ ″ action=″ ″>

    <input type=″ ″ name=″ ″>

    ...

    </form>


3 html

3.10.1 简单输入文本框从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 简单输入文本框提供给读者输入简短一行回答的方式。其HTML语言也十分简单,只是在<form>标记后加入<input type=“text”>,并以</form>结束即可。如果你想自己控制文本框的窗口大小,可以输入属性size=N,N以字节为单位。否则浏览器就以默认值20设置。如果输入的字超过显示区域则会自动向左滚动,还可用属性maxlengh=N限制最多输入的字节。其中属性name的值“X”是将输入值传给其他程序时使用的输入信息的名字。


3 html

[例3.22]输入文本框。从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

<html>

<body>

<form>这是一个文本框<input type=″text″ name=x1 size=15>

</form>

</body>

</html>

  • 例3\22程序显示结果如图3.22所示。


3 html

图3.22从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.2 显示初始值的多个文本框从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 文字作为初始值可以出现在文本框里面,只需在<input>标记中加入属性value=“显示的文字”,引号中的字你可以随便选择。可以随意加入几个文本框,文本框的方式可以用前面介绍过的标记来确定,否则它们会排在一行。

    [例3\23]显示初始值的多个文本框。

  • <html>

  • <body>

  • <form>

  • 电话号码: <input type=″text″ Name=x1 value=″010 62256622 3463″><br>


3 html

姓名: <从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。input type=″text″ Name=x2 value=″lp″><P>

出生日期: <input type=″text″ Name=x3 value=″1978.08.18″></P>

</form>

</body>

</html>

  • 例3\23程序显示结果如图3.23所示。


3 html

图3.23从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.3 输入口令的文本框从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 如果需要使用者输入口令,又不想让别人看见,可将属性type的值换为password。

    [例3.24]显示输入口令文本框,这个口令最长为8位。

    <html>

    <body>

    <form>

    口令:<input type=″password″ Name=x1 size=8 maxlengh=8>

    </form>

    </body>

    </html>

  • 显示结果如图3.24所示。


3 html

图3.24从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.4 多行多列的文本框从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 如果希望读者多输入一些内容回答问题或进行讨论,可建立一个多行多列的文本框。只要

  • 在<form>标记后,插入一个类似这样的标记: <textarea cols= x rows=y>,而后,照常加

  • 上</textarea>和</form>标记。属性cols确定文本框的宽度,它指的是多行多列的文本框一

  • 行同时出现的文字个数。属性rows确定多行多列的文本框的高度,即一次出现的文字行数。


3 html

[从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。例3.25]输入一个多行多列的文本框。

<html>

<body>

<form>

一个多行多列的文本框<p>

<textarea cols=30 Name=x1 rows=8>

</textarea>

</form>

</body>

</html>

  • 例3\25程序显示结果如图3.25所示。


3 html

图3.25从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.5 提交及重置按钮从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 提交(submit)是为了把读者所输入的内容提交给发问的“人”,实际上是把输入的信息提交

  • 给相关程序,让服务器进行处理。重新设置按钮(reset button)是把读者所输入的内容清

  • 除掉,重新输入。这两个按钮的建立也很容易,在<form>标记下面再加入<input type=″s

  • ubmit″>和<input type=″reset″>即可。在input标记里,输入value的属性值可改变按钮

  • 上的字,否则它自动写上submit和reset。上面介绍的文本框实际上都需要配上提交及重置

  • 按钮才算完整。


3 html

[例3.26]创建提交及重置按钮。从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

<html>

<body>

<form>

电话号码: <input name=x1 type=″text″ ><br>

姓名: <input name=x2 type=″text″><p>

出生日期: <input name=x3 type=″text″ value=″1978.08.18″></P>

<input type=″submit″ value=″提交″>

<input type=″reset″>


3 html

</从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。form>

</body>

</html>

  • 例3\26程序显示结果如图3.26所示。


3 html

图3.26从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.6 单选框从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 单选框是提供给作者一些可选的内容,从中只能选择一项。要创建一个单选框(radio butt

  • on)非常容易,只需在<form>标记后加上<input type= ″radio″>,再以</form>结束即可。

    [例3.27]创建单选框。

    <html>

    <body>

    <form>

    <h3>单选框<br>

    <input type=″radio″ name=″x1″ value=″北京″> 北京


3 html

<input type=″radio″ name=″x1″ value=″从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。上海″>上海<br>

<input type=″submit″ value=″提交″>

<input type=″reset″ value=″重置″>

<form>

<h3>多选一<br>

<input type=″radio″ name=″x1″ value=″音乐″ checked>音乐<br>

<input type=″radio″ name=″x1″ value=″电影″>电影<br>

<input type=″radio″ name=″x1″ value=″小说″>小说<br>


3 html

<input type=″radio″ name=″x1″ value=″从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。电视″>电视<br></h3>

<input type=″submit″ value=″提交″>

<input type=″reset″ value=″重置″>

</form>

</body>

</html>

  • 例3\27程序结果显示如图3.27所示。

  • 注意: 单选框中Name的属性值“x1”是相同的,因为只选择了一个输入信息。如果你想让其中的某个按钮为默认值,只要在input标记中加入checked(已选择)属性即可。


3 html

图3.27从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.7 多选框 从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 创建多选框(checkbox)是为了让读者可以选择多项内容,读者只要用鼠标点几下就可以了。现在要做的是在<form>标记后加上<input type= ″checkbox″>,并以</form>标记结束。记住在每一个“checkbox”后面加入所要用于选择的文本内容或图像,可以再插入间隔划线或分段标记。如果在几个checkboxes里出现一个已划钩的选择项表示默认,只需在标记里加入一个checked(已选择)的属性。


3 html

[从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。例3.28]创建多选框。

<html>

<body>

<form>

<h3>多选框</h3><input type=″checkbox″ name=″x1″>北京<br>

<input type=″checkbox″ name=″x2″>上海<br>

<input type=″checkbox″ name=″x3″>天津<br>

<input type=″checkbox″ name=″x4″>重庆<br>


3 html

<从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。input type=″checkbox″ name=″x5″ checked>武汉(已被选择)<P>

<input type=″submit″ value=″提交″>

<input type=″reset″ value=″重置″>

</form>

</body>

</html>

  • 例3\28程序结果显示如图3.28所示。

  • 注意: 多选框中name的属性可为不同的值x1、x2、x3…,因为可以同时选择多个不同的输入信息。


3 html

图3.28从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

3.10.8 下拉菜单及滚动菜单从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

  • 跟所有forms一样,下拉菜单也是以<form>标记开始,再紧接<select>标记。<select>标记表明读者可以在一个给定的选择项范围内进行选择。所以接着就给出每一个选择项,选择项采用<option>标记。<option>标记需放在每个选择项之前。滚动菜单只是在<select>标记中加入multiple属性,允许读者一次选多个选项,类似多选框如<select multiple size=x>。

  • 如果缺省multiple,一次只能选择一项,类似于单选框。其中size=x是你想一次同时显示在菜单里的选择项(或选择行)数。菜单的宽度由最长的选择项确定。


3 html

[从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。例3.29]创建下拉菜单。

<html>

<body>

<form>

下拉菜单中任选一个<P>

<select name=x1>

<option>北京汽车站

<option>上海汽车站

<option>武汉汽车站

<option>重庆汽车站


3 html

</从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。select>

<P><input type=″submit″ value=″提交″>

<input type=″reset″ value=″重置″>

</form>

</body>

</html>

  • 例3\29程序显示结果如图3.29所示。


3 html

图3.29从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

[例3.30]创建滚动菜单。从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

<html>

<body>

滚动菜单可多选

<form>

<select name=x1 multiple size=5>

<option>苹果

<option>香蕉

<option>葡萄

<option>樱桃


3 html

<从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。option>草莓

<option>梨

</select>

<p><input type=″submit″ value=″提交″>

<input type=″reset″ value=″重置″>

</form>

</body>

</html>

  • 例3\30程序显示结果如图3.30所示。


3 html

图3.30从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。


3 html

  • 说明: 所有的从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。form都是以<form>标记开始,以</form>标记结束。每当新加入一个<form>标记时,浏览器就会产生新的段落。因此如果将一个下拉菜单或一个radio button放到语句的中间,应将<form>标记放在段落的开始处,而不是段落里。你可以将多个form元素(如check boxes或下拉菜单等)放在同一对<form>与</form>标记中,而不需加入一个元素就放上一对<form>与</form>标记。

  • 最后,不要忘了在完成下拉菜单的编写时,每个下拉菜单以</select>和</form>标记结束。


3 html
3.11 从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。地图标记

  • 使用地图可以帮助读者访问不同的资源,当单击了地图图像的任意一处时,浏览器将给读者输出与这个图像热区相关连的Web页面。

  • 它的语法格式为

    <img src=img.gif usemap=″MAP-Name″>

    <map name=″MAP-Name″>

    <area shape=″#″ coords=″#″ href=″url″>

    </map>


3 html

  • 属性从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。usemap指出地图文件的名字和显示的地方,usemap=″#″表示图像文件包含在HTML文档内,不带“#”表示图像为一个独立文件。<map>标记定义一个地图文件,必须带有name属性,name属性的值是一个地图文件的惟一名称。<area>定义图像的一部分区域为热区,可有任意个<area>标记项,属性shape=″rect″,表示热区形状为矩形,属性coords=″A,A′,B,B′″,(A,A′)为左上角坐标,(B,B′)为右下角坐标;shape=″circle″,表示热区形状为圆形,coords=″A,A′,R′″,(A,A′)为圆点坐标,R表示半径;shape=″poly″,表示热区形状为多边形,coords=″A,A′,B,B′,C,C′...″,(A,A′)表示第一个角坐标,(B,B′)为第二个角坐标,…… 第n个角坐标;shape=″default″,表示所有非热区区域。


3 html

[例3.31]编写一个地图文件。从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

<html>

<body><img src=″1.GIF″ usemap=″#Face″>

<map name=″Face″>

<area shape=″rect″ href=″3.30.htm″ coords=″10,16,127,116″>

<area shape=″rect″ href=″3.27.htm″ coords=″213,16,383,132″>

<area shape=″poly″ href=″3.28.htm ″coords=″10,163,84,163,190,304,2,306″>


3 html

<从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。area shape=″circle″ href=″3.29.htm″ coords=″186,151,110″>

</map>

</body>

</html>

  • 请在图3.31中用鼠标到处点一点,就会理解“地图”的意思了。


3 html
习 题从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

1. 使用word编写一个HTML文件,存为3\1.htm,并在浏览器中运行一遍。

2. 使用“附件”的“记事本”编写一个HTML文件,存为3\2.htm,并在浏览器中运行一遍。

3. 使用FrontPage工具编写或编辑一个HTML文件,存为3\3.htm,并在浏览器中运行一遍。

4. 编写一个带有表格、图片和文字的页面,添加背景颜色和背景音乐。


3 html
习 题从这个例子中可以看到屏幕首先被横向分割为上下两部分,上部分为17%,下部分为83%;下部分又被纵向分割为两部分。有两个窗口有滚动条,下面的窗口是自动产生的。三个窗口都能调整大小,你可以动手试一试。

5. 编写一个框架页面,分为三个窗口。分别在各窗口显示3\1.htm,3\2.htm,3\3.htm文件。

6. 编写一个带有表单的页面,包括文本框、口令框、单选框。

7. 编写一个带有map标记的页面。