第三章 超文本标记语言HTML
Download
Report
Transcript 第三章 超文本标记语言HTML
第３章
超文本标记语言HTML
本章共分21个实例，主要内容包括HTML
创建与测试、html的文档结构、常用标记的使
用、表格和层的使用技灵活掌握等内容。
第３章
超文本标记语言HTML
本章内容
3.1 HTML基础
3.2 基本标记
3.3 超链接
3.4 表格
3.5 层
3.6 表单
3.7 框架
（习题）
第３章
超文本标记语言HTML
3.1 HTML基础
实例3-1 认识html
实例3-2 HTML文档结构
第３章
超文本标记语言HTML
实例3-1 认识html
一、要求与目的：
– 了解html的基本常识和工作原理
– 掌握如何使用“记事本”编辑网页
– 了解两类常用的网页制作工具
– 掌握html的语法规范
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－4
运行结果
第３章
超文本标记语言HTML
过程与步骤：
１.通过依次单击任务栏上的【开始】→【程序】→【附
件】→【记事本】菜单命令打开记事本
２.在记事本的编辑面板中输入以下代码，如图3－1所示。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
这是我的第一个web页面。
<b>这段话是被加粗的。</b>
</body>
</html>
第３章
超文本标记语言HTML
图3－1 网页编辑窗口
3.
将此文件保存为“myfirst.htm”，如图3－2所示。
图3－2 “另存为”对话框
第３章
超文本标记语言HTML
*提示*：HTML文件的扩展名必须为.htm或者.html。
4. 启动浏览器。
在文件菜单中选择“打开”（或者“打开页面”），这
时将出现一个对话框。选择“浏览”（或者“选择文
件”），定位到你刚才创建的HTML文件——
“myfirst.htm”，选择它，单击“打开”。然后在对话框中，
你将看到这个文件的地址，比如说：“C:\MyDocuments\
myfirst.htm”。单击“确定”，浏览器将显示此页面，如图
3－3所示。
第３章
超文本标记语言HTML
图3－3 打开对话框
第３章
超文本标记语言HTML
* 提示*：用鼠标双击myfirst.htm也可运行。
5.运行结果，如图3－4所示。
三、 涵盖的知识点：
1．HTML的概念
HTML (HyperText Markup Language，超文本标记语言)
是表示网页的一种规范(或者说是一种标准)，他通过标记符定
义了网页内容的显示。例如，用<table>标记符在网页上定义一
个表格。
2．HTML的语法
刚刚接触超文本，遇到的最大的障碍就是一些用“<”和
“>”括起来的句子，我们称它为标签，是用来分割和标记文本
的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。
HTML的语法其实比较简单，即使没有任何计算机语言(如C语
言、BASIC语言等)的
第３章
超文本标记语言HTML
基础也很容易学。在HTML中，所有的标记符都用尖括号括
起来。例如，<HTML>表示HTML标记符。某些标记符，例
如换行标记符<BR>，只要求单一标记符号。但绝大多数标
记符都是成对出现的，包括开始标记符和结束标记符。开始
标记符和相应的结束标记符定义了标记符所影响的范围。
单标签
某些标记称为“单标签”，因为它只需单独使用就能完整
地表达意思，这类标记的语法是：
<标签名称> 最常用的单标签是<BR>, 它表示换行。
第３章
超文本标记语言HTML
双标签
另一类标记称为“双标签”，它由“始标签”和“尾
标签”两部分构成，必须成对使用，其中始标签告诉Web
浏览器从此处开始执行该标记所表示的功能，而尾标签告
诉Web浏览器在这里结束该功能。始标签前加一个斜杠
（/）即成为尾标记。这类标记的语法是：
<标签> 内 容</ 标签>
其中“内容” 部分就是要被这对标记施加作用的部分。
例如你想突出对某段文字的显示，就将此段文字放在一
<EM> </EM>标记中：<EM>第一：</EM>
标签属性
许多单标记和双标记的始标记内可以包含一些属性，
其语法是：
< 标签名字 属性1 属性2 属性3 … >
第３章
超文本标记语言HTML
各属性之间无先后次序，属性也可省略（即取默认值），例如
标题标记<H1>表示文本以标题1的格式显示。带一些属性：
<h1 align=center color=red>大家生活愉快！</h1>
其中align属性值表示文本居中显示，color的属性值表示
文本以红色显示。
*提示*：HTML标记符是不区分大小写的，但通常约定使用大
写标记符，这有利于HTML文档的维护。
3．工作原理
如果在浏览器中任意打开一个网页，然后在窗口中空白位
置单击鼠标右键，选择“查看源文件”命令(或者选择“查看”
菜单中的“源文件”命令)，则系统会启动“记事本”，其中
包含一些文本信息，这些文本其实就是网页的本质——
HTML 源代码，也就是我们在记事本中编辑的代码，如图3
－1。
第３章
超文本标记语言HTML
在HTML文档中通过使用标记符可以告诉浏览器如何显
示网页，即确定内容的显示格式。浏览器按顺序读取HTML文
件，然后根据内容周围的HTML标记符解释和显示各种内容。
例如，如果为某段内容添加<b></b>标记符,则浏览器会以粗体
字显示该段内容，如图3-4所示。
HTML中的超文本功能，也就是超链接功能，使网页之间
可以链接起来。网页与网页的链接构成了网站，而网站与网站
的链接就构成了多姿多彩的WWW。
标准(几乎所有浏览器都支持),但HTML4.0也已逐渐普及。
最新的标准是HTML4.01，它对HTML4.0作了一些小的修正。
对于基本的标记符，3.2与4.0基本一致在本书中不作区分，但
本书中的主要内容是以4.0为基础的。
第３章
超文本标记语言HTML
4．常用网页编辑工具
Macromedia Dreamweaver MX 2004——用于制作具有
动态HTML动画的网页，用于对Web站点、Web页和Web应
用程序进行设计、编码和开发。由于Dreamweaver提供了非
常友好的用户界面和强大的功能，现已成为专业用户和普通
用户首选的网页开发工具。
Microsoft FrontPage 2004——用于制作功能强大的网页。
微软公司的FrontPage是一款优秀的网页制作和管理软件。
作为Office家族的新成员，FrontPage继承了Office系列软件
界面通用、操作简单的特点，十分适合初学者使用。
但是假如你想成为一名熟练的网络开发者，我们强烈推
荐你用纯文本编辑器编写代码，这有助于学习HTML基础。
第３章
超文本标记语言HTML
实例3-2 HTML文档结构
一、 要求与目的：
– 了解html的文档结构
– 掌握如何使用meta标记
– 掌握如何使用bgsound标记
第３章
超文本标记语言HTML
二、实例结果，如图所示
标题
图3－5 背景音乐
图3－6 跳转后的页面
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>我的第二个页面</title>
<meta http-equiv="refresh" content="30;URL=myfirst.htm">
<bgsound src="2002年的第一场雪.mp3" loop=2 >
第３章
超文本标记语言HTML
</head>
<body>
<p>我们听音乐。</p>
</body>
</html>
3．将此文件保存为“yinyue.htm”。
4．运行结果，如图3－5和3－6所示。
运行yinyue.htm，首先出现图3－5，同时响起背景音乐，30秒
后，自动转到图3－6。
第３章
超文本标记语言HTML
三、涵盖的知识点：
html的文档结构
任何HTML文档都包含的基本标记符包括：HTML标记
<HTML>和</HTML>、首部标记<HEAD>和</HEAD>以及
正文标记<BODY>和</BODY>。
HTML标记
<HTML>和</HTML>是Web页的第一个和最后一个标记
符，Web页的其他所有内容都位于这两个标记符之间。虽然
HTML标记符的开始标记符和结束标记符都可以省略(因
为.htm或．html扩展名已经告诉浏览器该文档为HTML文
档)，但为了保持完整的网页结构，建议包含该标记。另外，
HTML标记符通常不包含任何属性。
第３章
超文本标记语言HTML
3.首部标记
首部标记<HEAD>和</HEAD>位于Web页的开头，其中
不包括Web页的任何实际内容，而是提供一些与Web页有
关的特定信息。例如，可以在首部标记中设置网页的标题、
定义样式表、插入脚本等。
首部标记中的内容也用相应的标记符括起来。例如，样
式表(CSS)定义位于<STYLE>和</STYLE>之间；脚本定
义位于<SCRIPT>和</SCRIPT>之间。
第３章
超文本标记语言HTML
4. TITLE标记符
在首部标记中,最基本、最常用的标记符是标题标记符
<TITLE>和</TITLE>,用于定义网页的标题。网页标题可
被浏览器用作书签和收藏清单。当网页在浏览器中显示时，
网页标题将在浏览器窗口的标题栏中显示。如案例2中：
<title>我的第二个页面</title>
效果如图3－5所示。
第３章
超文本标记语言HTML
5. META标记符
在首部标记符中另外一个比较常用的标记符是META，
又名元标记，向浏览者提供某一页面的附加信息，另外用于
帮助一些搜索引擎进行页面分析，使导出的页面正确放入合
适的目录中，元标记的种类包括两类：
HTTP-EQUIV
HTTP-EQUIV的一个主要功能：可驱使浏览器在同一窗
口中打开另一个页面，格式如下：
<META HTTP-EQUIV="Refresh"
CONTENT="#;URL=http://www.domain.com/webpage.htm
">
第３章
超文本标记语言HTML
其中: "#"代表所设定的时间，即在URL后的指定页面被
打开之前，当前页面在浏览器中的显示时间。如案例2中：
<meta http-equiv="refresh"
content="30;URL=myfirst.htm">表示30秒后页面转到
myfirst.htm，效果如图3－5和图3－6所示。
*提示*：要实现以上效果，必须使“URL”后指定的HTML
文档存在。在该例子中，我们指定跳转的目标为当前目录的
某个文件。在实际使用此功能时，也可以直接指定一个完整
的URL地址(例如http://somebody.yeah.net)。有关文件路径
及ULR地址指定的详细信息，请参见本书第3章。
第３章
超文本标记语言HTML
NAME
NAME的格式如下：
<META NAME="A" Contents="B">
其中"A"是关于此元标记的描述，而"B"是从属于"A"部分的
附加信息。通常，两个主要的元标记是页面描述和关键词。
如：
<META Name="Description" Contents="教育科研">
<META Name="Keywords" Contents="教育科学、科
研……">
提示：1、关键词以逗号隔开，不要超过255字符，重要的放在
前面。
2、Keywords中的关键词一般不要重复多于5次。
3、关键词可适当使用一些2至3字的词组，如webpage creation
比webpage, creation好。
第３章
超文本标记语言HTML
6．BGSOUND标记符
InternetExplorer还支持另外一个用于头部的标记符——
BGSOUND，它可用予指定网页的背景音乐。BGSOUND标记符只
有开始标记符，没有标记符。它的基本属性是src，用于指
定背景音乐的源文件。另外一个常用属性是loop，用于指定
背景音乐重复的次数，如果不指定该属性，则背景音乐无限
循环。
例如，在案例中以下语句将使网页播放“2002年的第一场雪”
作为背景音乐，并且在播放两次后结束：
<bgsound src="2002年的第一场雪.mp3" loop=2 >
第３章
超文本标记语言HTML
提示：BGSOUND标记符必须位于HEAD标记符内，并且src所指定
的问件必须存在。例如，在刚才的语句中，必须使“2002年
的第一场雪.mp3”这个文件位于网页所在的目录,才能正确
地播放背景音乐。
第３章
超文本标记语言HTML
3.2 基本标记
实例3-3 文本标记的使用
实例3-4 排版标记的使用
实例3-5 特殊字符和块标记
实例3-6 字符级标记
实例3-7 字体和图像标记
实例3-8 列表标记
第３章
超文本标记语言HTML
实例3-3 文本标记的使用
一、 要求与目的：
– 掌握段落标记<p>和换行标记<br>的使用
– 掌握水平线标记<hr>的使用
– 掌握标题标记<h1>~<h6>的使用
– 掌握相关属性的设置
第３章
超文本标记语言HTML
二、实例结果，如图所示。
图3－7 文本标记的使用
从本案例结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>文本标记的使用1</title>
</head>
<body>
<p align=center>第一段，人生最可贵的品质是诚实。</p>
第３章
超文本标记语言HTML
<p>第二段，人生最珍贵的礼物是宽容。</p>
人生最大的敌人是自己。人生最大的破产是绝望。在这里换
行<br>
开始画线：<br>
<hr size=10 align=left width="75%" noshade>
<p>标题标记的使用：</p>
<h1>这是标题1</h1>
<h3>这是标题3</h3>
<h6>这是标题6</h6>
</body>
</html>
3．将文件保存为wenben.htm。
第３章
超文本标记语言HTML
三、 涵盖知识点：
1．段落标记
段落标记符用于将文档划分为段落，包括开始标记符<p>
和结束标记符</p>，通常结束标记符可省略，HTML自动在
一个段落前后各添加一个空行。<P>标签还有一个属性
ALING，它用来指名字符显示时的对齐方式，一般值有
CENTER、LEFT、RIGHT三种。如本案例中：
<p align=center>第一段，人生最可贵的品质是诚实。</p>
<p>第二段，人生最珍贵的礼物是宽容。</p>
第３章
超文本标记语言HTML
2．换行标记符<br>
当需要结束一行，并且不想开始新段落时，使用<br>标记。
<br>标签不管放在什么位置，都能够强制换行。它只有一个
单独的标记<br>没有结束标记符。如本案例中：
人生最大的敌人是自己。人生最大的破产是绝望。在这里换行
<br>
3．水平线标记<hr>
在文档当前位置画一条水平线（horizontal line），需要使
用<hr>标记，一般是从窗口中当前行的最左端一直画到最右
端。
第３章
超文本标记语言HTML
它可以带一些属性能画出自定义的水平线，在本案 例中：
<hr size=10 align=left width="75%" noshade>
其中SIZE属性定义线的粗细，属性值取整数，缺为1；
ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），
CENTER（居中），RIGHT（右对齐）；WIDTH 属性定
义线的长度，可取相对值，（由一对 " "号括起来的百分数，
表示相对于充满整个窗口的百分比），也可取绝对值（用整
数表示的屏幕像素点的个数，如WIDTH=300），缺省值是
"100%"。Noshade指定水平线不带阴影，为实心线段，缺
省带阴影。
第３章
超文本标记语言HTML
4．标题标记<hn>
一般文章都有标题、副标题、章和节等结构，HTML中也
提供了相应的标题标签<Hn>,其中n为标题的等HTML总共
提供六个等级的标题，n越小，标题字号就越大，以下列出
所有等级的标题：
<H1>…</H1>
第一级标题
<H2>…</H2>
第二级标题
<H3>…</H3>
第三级标题
<H4>…</H4>
第四级标题
<H5>…</H5>
第五级标题
<H6>…</H6>
第六级标题
第３章
超文本标记语言HTML
实例3-4 排版标记的使用
一、 要求与目的：
– 掌握如何使用html的注释
– 掌握<center>标记的使用
– 掌握三种排版标记的使用
– 熟悉段落的相关属性设置
第３章
超文本标记语言HTML
二、实例结果，如图所示。
缩 进
显示
居 中
显示
原样
显示
斜
体
图3－8 排版标记的使用
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程 序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码： <html>
<head>
<title>排版标记的使用</title>
</head>
<body>
<!—练习排版标记的使用，这里是注释-->
第３章
超文本标记语言HTML
<center>我们为了共同的目标而来。</center>
<p>没有缩进之前，这是一个真实的故事。</p>
<blockquote>
人生最可贵的品质是诚实、
最珍贵的礼物是宽容、
最佩服的实上进。
</blockquote >
<pre>
第一段，人生最可贵的品质是诚实。
第二段，人生最珍贵的礼物是宽容。
</pre>
<address>兰州石化职业技术学院</address>
</body>
</html>
3．将文件保存为paiban.htm。
第３章
超文本标记语言HTML
三、 涵盖知识点：
注释
在html中和其他语言一样支持注释，“<!—”表示注释的开
始，“-->”表示注释的结束。如果单行文本进行注释也可以
采用“//”标记进行对当前行的注释。
注释的内容不再浏览器里显示的，在本案例中：
<!—练习排版标记的使用，这里是注释-->
此内容为注释部分，不予以显示的。
居中对齐标记
这个很简单，成组使用即可，格式：
第３章
超文本标记语言HTML
<center>内容</center>，在本案例中：
<center>我们为了共同的目标而来。</center>
3．三种段落级标记
– <blockquote>
blockquote将被修饰的对象往右边缩退，记作：<blockquote>内
容</blockquote>，以下效果是这样的语法实现的（用了两个
缩进单位）：<blockquote><blockquote>虚拟在线动
力……</blockquote></blockquote>
虚拟在线动力是一个综合性网站，有“PC动力”、“原创大
厅”、“情感小屋”、“读书天地”、“音画时尚”和“音
乐岛”六个栏目，网站还开设有听歌台主站。
第３章
超文本标记语言HTML
当然，你也可以用空格符号实现缩进（代码记作：
），但它只管左边的，对右边没有影响，而
blokcquote标签是有的。在本案例中：
<blockquote>
人生最可贵的品质是诚实、
最珍贵的礼物是宽容、
最佩服的实上进。
</blockquote >
效果从结果中可以看出。
第３章
超文本标记语言HTML
– <pre>
这是非常有用的一个标签，它可以使得最终显示效果
以原始格式实现。即文本在浏览器中的显示时遵循在
HTML源文档中定义的格式。有时我们需要精确地对齐某
些元素，pre标签能够帮上大忙，它能令效果比在“设计”
模式下用空格符移动显示符号更准确。在本案例中：
<pre>
第一段，人生最可贵的品质是诚实。
第二段，人生最珍贵的礼物是宽容。
</pre>
第３章
超文本标记语言HTML
运行结果如图3－8所示。
<address>
<address>标记用于显示诸如html文档的作者、地址和签名等信
息，通常显示为斜体字。如本案例中的：
<address>兰州石化职业技术学院</address>
总之，HTML的排版不同于Word的直观排版概念，它不是所见
即可得的。但是，最终追求的结果是一样的：令终端页面的
外观像我们预设的一样显示出来。排版可分为常规排版和非
常规排版两种，后者属于较为高深的内容，出于学习的循序
渐进要求，我们在本节只介绍常规排版。
第３章
超文本标记语言HTML
实例3-5 特殊字符和块标记
一、 要求与目的：
– 掌握如何在html文档使用特殊字符
– 掌握块标记<div>和<span>
– 熟悉块标记相关属性设置
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－9 特殊字符和块标记的使用
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>特殊字符和块标记</title>
</head>
<body>
<h1>欢 迎 光 临</h1>
<p>售价：68(¥)
<div>
第一部分
第３章
超文本标记语言HTML
<p>div用于组织元素
<p>div通常用于块级元素
</div>
<div align=right>
第二部分<br>
<h3>你觉得有意思吗？</h3>
</div>
<p>在div之外，<span style=”font size=25”>情况</span>就不同
了，能理解吗？
第３章
超文本标记语言HTML
版权所有©兰州石化职业技术学院
</body>
</html>
3．将文件保存为kuai.htm。
4．运行结果如图3－9所示。
第３章
超文本标记语言HTML
三、 涵盖知识点：
特殊字符
可以将特殊字符插入到html的文档中。要确保浏览器不会
将它们与html的标记混淆，必须使用转义码来表示这些特殊
字符。如本案例中：
<h1>欢 迎 光 临</h1>
<p>售价：68(¥)
版权所有©兰州石化职业技术学院
第３章
超文本标记语言HTML
以上只是简单的特殊字符，具体应用时见表3－1
表3－1：常用的特殊字符
特殊字符
特殊字符
示例
空格
<h1>欢 迎 光 临
</h1>
元（￥）
¥
<p>售价：¥55
大于（>）
>
Ifa>b then <br>a=a+1
小于
<
Ifa<b then <br>a=a-1
第３章
超文本标记语言HTML
（<）
引号（“”）
"
<p>"是还是不是？"是
问题的所在</p>
“与”符号（&）
&
<p>William&Graham去超市了
</p>
版权号（C）
©
版权所有©兰州石化学院
注册商标（R）
®
注册商标®侵权必究
第３章
超文本标记语言HTML
2．<div>和<span>标记
有时需要将网页中的文本分成逻辑信息块，还需要将公用
的属性应用于整个块。Div和span标记这时用来组织内容，
完成所需要求。Div一般用于将文档分割成相关部分，可以
跨越多个段落。Span用于字符跨度，一般用来跨越段落内的
字符。在本案例中可以看到二者的区别：
<div>
第一部分
第３章
超文本标记语言HTML
<p>div用于组织元素
<p>div通常用于块级元素
</div>
<div align=right>
第二部分<br>
<h3>你觉得有意思吗？</h3>
</div>
<p>在div之外，“<span style=”font-size:25”>情况</span>就不
同了，能理解吗？”这里span标记只对“情况”二字起作
用，而div的用法与它有明显的不同。运行效果见图3－9所
示。
第３章
超文本标记语言HTML
3．相关属性设置
对于块标记<div>和<span>他们常用的属性有align（对齐）、
style（规定文本的显示规则）。其语法规则是：<tag style=”
属性1：值1；属性2：值2；……”>,每个属性之间用“分号”
隔开，在本案例中只介绍了文本字体大小属性（font-size）。
<p>在div之外，<span style=”font-size:25”>情况</span>就不同了，
能理解吗？对于align属性，前面有过介绍，这里不再赘述。
第３章
超文本标记语言HTML
实例3-6 字符级标记
一、 要求与目的：
– 掌握常用字符标记
– 掌握颜色的使用
– 了解颜色的自定义设置
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－10字符级标记的使用
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>字符级标记示例</title>
</head>
<body>
<p>红线：<hr color="red" size="10" width="80%" align="left"
noshade>
<p align="center"><b>字符级标记示例</b></p>
<p>圆的面积=pi*r<sup>2</sup></p>
第３章
超文本标记语言HTML
<p>水的化学符号：H<sub>2</sub>O</p>
<p><em>这是一种很有趣的体验</em></p>
<p>蓝线：<hr color="#0000FF" size="10" width="80%"
align="left" noshade>
</body>
</html>
3．将文件保存为zifu.htm。
4．运行结果如图3－10所示。
第３章
超文本标记语言HTML
三、涵盖知识点：
1．颜色知识
在网页中，颜色通常采用6位十六进制的数值来表示，从左到右
每两位依次表示红色、绿色和蓝色的数值。颜色值越高表示
这种颜色越深。比如红色，其数值为“#FF0000”，白色为
“#FFFFFF”，黑色为“#000000”。也可以采用三个以“，”
相隔的十进制数来表示某一颜色，比如红色，其十进制表示
为color(255,0,0)。如果三种颜色的数值相等，就显示为灰色。
当然在具体配色时也可以直接使用颜色的英文名字，比如红
色(red)、蓝色(blue)、绿色(green)等等。在本案例中使用了两
中定义颜色值的方法：
第３章
超文本标记语言HTML
<p>红线：<hr color="red" size="10" width="80%" align="left"
noshade>
<p>蓝线：<hr color="#0000FF" size="10" width="80%"
align="left" noshade>
当然不同的颜色以及不同颜色的组合可以给人不同的感受，
所以网页在配色的时候，可以根据网页所要传达的信息来选
取网页的主色调，以便让访问者首先在视觉效果上对这个网
页有一个较深的印象。比如蓝色，它给人以非常专业的感觉，
所以许多高科技公司都喜欢使用蓝色作为它的代表色。这其
中最典型的当数IBM公司和微软公司，蓝色使得人们对他们
的产品与服务有更多的信任感。
第３章
超文本标记语言HTML
2.常用字符级标记
在制作网页的过程中，可能会表达一些特殊的书写格式，比
如水分子式、平方根、引用和强调文本等等，这时就得使
用字符级的标记，例如在案例中：
<p>圆的面积=pi*r<sup>2</sup></p>
<p>水的化学符号：H<sub>2</sub>O</p>
<p><em>这是一种很有趣的体验</em></p>
效果也能从结果看得出来，见图3－10。另外还有一些常用
得字符级标记见表3－2。
第３章
超文本标记语言HTML
表3－2常用的字符级标记
标记
描述
示例
<b>…</b>
粗体文本
<b>这是一种很有趣的体验</b>
<tt>…</tt>
固定宽度的字体
<b>这是一种<tt>很</tt>有趣的体验</b>
<sub>…</sub>
下标文本
<p>水的化学符号：H<sub>2</sub>O</p>
<em>…</em>
强调文本
<p><em>这是一种很有趣的体验</em></p>
<code>…</code>
用于显示编程代码
<code>x=x+2<br>y=x</code>
<cite>…</cite>
用于引文和引用
智慧的头脑只会欣赏一种观点而不会轻易的接
受<cite>亚里士多德</cite>
第３章
超文本标记语言HTML
实例3-7 字体和图像标记
一、 要求与目的：
– 掌握字体标记的使用
– 掌握字体标记的属性设定
– 掌握在html文档中如何插入图像
– 了解图像的相关知识
第３章
超文本标记语言HTML
二、实例结果，如图所示
替代文本
图3－11字体和图像标记的使用
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码： <html>
<head><title>字体和图像标记</title></head>
<body>
<p>正常文本</p>
<p><font size="7" color="#0000FF">这些大字体的文本
</font></p>
第３章
超文本标记语言HTML
<p><font size="+2">这些文本的字体比正常的文本字体大2号
</font></p>
<p><font size="-2">这些文本的字体比正常的文本字体小2号
</font></p>
<p><font size="5" face="隶书">这些文本的字体是隶书
</font></p>
图片插入：<img src="清华.JPG" alt="我们在清华大学"
width="150" height="150" align="middle" ></body></html>
3．将文件保存为zitituxiang.htm。
4．运行结果如图3－11所示。
第３章
超文本标记语言HTML
三、 涵盖知识点：
1.字体标记
<font>标记用于控制文本在网页上的显示。可以指定size
（大小）、color（颜色）、style（样式）等属性。具体见表
3－3。
表3－3字体标记常用属性
属性
描述
color
用于指定字体的颜色，可以使用颜色名称
或十六进制值
size
用于指定字体的大小。可指定的字体
第３章
超文本标记语言HTML
大小范围为1到7，最大为7，最小为1。还可以指定相
对大小。例如，如果基本大小为3，那么
size=+4会使字体大小增加至7
size=-1会使字体大小减小至2
face
用于指定字体，可以指定一系列字体类型，按优先级
列出来，用逗号分开，例如“隶书，Arial”，这
样设置以后文本就会优先显示为隶书字体，若客
户机没有安装这种字体，则会显示为Arial字体。
在本案例中具体文字效果可以看图3－11所示。
第３章
超文本标记语言HTML
2．图像标记
当我们要在网页中嵌入图片时，就不得不用到<img>标记，
我们看到，img标记没有终止符。其常用参数也不太多，
非常容易记住。基本语法：
<img src=图片地址 border=数值 align=对齐方式…>在我们的
案例中用到了很多img的属性。如本例代码：
图片插入：<img src="清华.JPG" alt="我们在清华大学"
width="150" height="150" align="middle" >
第３章
超文本标记语言HTML
src：图片地址。我们这里用的是相对地址（即和我
们的网页在同一目录下）。
– border：图片的边框。取值范围为正整数，边框颜
色不可改变（黑色）。多数论坛里的图片都会链
接到自身，当用户点击过它，它的边框颜色通常
就是默认的蓝色，故为美观起见，建议设置为0，
缺省为0。
– align：图片与文字的位置关系。这个内容，我们
在上一节已经讲过，还不太熟悉的请参阅排版标
记。
第３章
超文本标记语言HTML
– alt、title：说明、标题。都是当鼠标移到图片时
弹出的文字。在本例中鼠标指针移到图片上，看
到“我们在清华大学”
– width：图片的宽度（象素）。
– height：图片的高度（象素）。
3.图形知识
“图片一张，胜过千言万语”这句话的确非常适合于网页。可
以插入到网页中的图像称为嵌入式图像。图像可以是图标、
项目符号、照片、公司徽标等等。
第３章
超文本标记语言HTML
目前常用的图形格式有多种。但是，web上的情况稍有不同。
可以在大多数浏览器上显示的三种常见的图形格式为：
＆GIF(Graphics Interchange Format)图像（.GIF）
GIF是html文档中最常用的格式。GIF文件具有独立于平台的
格式且支持256色。GIF文件的优点在于文件比较小因此在
低速调制解调器线路上它们也比较容易传输。GIF文件有
两种标准-87a和89a（支持透明）。
第３章
超文本标记语言HTML
– GIF支持图形渐进：指图形是渐渐显示在屏幕上的。
对于不支持图形渐进的图片格式，只有在完整的图
形被下载以后才能显示出来，相反，支持图形渐近
的图片格式，可以在下载文件的同时，逐行显示在
屏幕上。但这种显示的形式随浏览器的不同而不同。
– 透明GIF图像：像素可以是透明的或不透明的。透
明的GIF图像其背景色是透明的。例如，图标和项
目符号应该是透明的GIF图像，以便与文档的背景
色融合在一起。
第３章
超文本标记语言HTML
– GIF支持动画：通过一些专门的软件将多个GIF图像
组合在一起，就形成了动画效果，以做一些简单的
动画。
– GIF支持无损压缩：无损压缩是不损失图形的细节
而压缩图形的有效方法。GIF文件通过压缩以减少
占用的磁盘空间，这样就会减少下载时间。GIF比
较适合线条、图标和图纸等图片。
GIF图片最大的缺点就是只支持256种颜色，这对于真正的照片质
量的图形是远远不够的，这样的图片一般使用JPEG格式。
第３章
超文本标记语言HTML
(2)JPEG（Joint Photographics Experts Group）图像（.JPG）
JPEG压缩是一种有损压缩方案。这意味着产生的压缩图像与原
始图像并不完全相同。但是，在回放过程中，图像几乎与原始
图像一样好。以JPEG格式保存图像时，可以指定压缩比率。
该比率越高，图像的质量就会比原始图像的越差。JPEG支持
上百万种颜色，通常用于真彩色图像。
JPEG（.jpg文件扩展名）和GIF文件格式两者都可以通过压缩图
像来确保在Internet上达到更快的传输速率。根据不同的特点
和实际需要，使用不同的图片格式。
第３章
超文本标记语言HTML
(3)PNG（Portable Network Graphics）
PNG文件支持无损压缩。PNG文件也支持灰度和真彩色图像。
也可以压缩PNG图像以便在网络上传输。但目前只有少数浏
览器支持此种图片格式。
在决定采用哪一种图形格式时，应考虑下列因素：
图像品质－在显示过程中图像的品质有多重要？
数据大小－文件越大，传输时间越长。
显示要求－图像是否支持透明、流式显示或渐进显示等功能？
第３章
超文本标记语言HTML
实例3-8 列表标记
一、 要求与目的：
– 掌握三种列表标记的使用
– 掌握列表标记属性设定
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－12 列表的使用
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>使用列表</title>
</head>
<body>
第３章
超文本标记语言HTML
<p>这是一个无序列表：</p>
<ul>
国际互联网提供的服务有：
<li type=circle>WWW服务
<li type=square>文件传输服务
<li>电子邮件服务
</ul>
<p>这是一个有序列表：</p>
<ol type=a>
国际互联网提供的服务有：
<li>WWW服务
<li>文件传输服务
<li>电子邮件服务
</ol>
第３章
超文本标记语言HTML
<p>这是一个定义性列表：</p>
<dl>
<dt>WWW
<dd>WWW是全球信息网(World wide web)的缩写，也有人
称之为3W、W3、Web。
<dt>Hyper Text
<dd>Hyper Text是超文本。文件通过超文本，可链结到其它
地方的数据文件，取得分散在各地的数据。
</dl>
</body>
</html>
3．将文件保存为liebiao.htm。
4. 运行结果见图3－12所示。
第３章
超文本标记语言HTML
三、涵盖知识点：
1．无序列表
这是可以添加到html文档中的最简单的列表类型。无序列表是
一种“项目符号列表”。其中的项目都带有项目符号前缀。
该列表包含在无序列表标记<ul>..</ul>内。列表中的每个项
目都是用列表标记<li>进行标记，其中li表示list item（列表
项）。关闭标记</li>是可选的。其结构如下所示：
<ul>
<li>第一项
<li>第二项
<li>第三项
</ul>
第３章
超文本标记语言HTML
type属性可以用来设置列表项前面的项目符号，放在<ul>
或<li>标记里都可以。其属性值有三种：即square（方形项目
符号）、disc（实心圆项目符号）、circle（空心圆项目符号）。
在本案例中我们可以看到，无序列表的第一个列表项的项目符
号是空心圆，而后两项则是实心的方块。
提示：可以创建嵌套的列表来显示信息的层次结构。
有序列表
有序列表和无序列表的使用方法基本相同，它使用标签
<ol></ol>，每一个列表项前使用<li>。每个项目都有前后顺序
之分，多数用数字表示。其结构如下所示：
第３章
超文本标记语言HTML
<ol>
<li>第一项
<li>第二项
<li>第三项
</ol>
要定义列表项前面的有序编号，可以通过设置属性实现，type
属性设置在<ol>或<li>标记里都可以。start属性指定列表的
起始编号。具体属性值设置见表3－4所示。
第３章
超文本标记语言HTML
属性
描述
<li type=i>
小写罗马数字
<li type=I>
大写罗马数字
<li type=a>
小写英文字母
<li type=A>
大写英文字母
<ol start=n>
从第n个值开始编号
提示：可以无序表一样嵌套有序列表。另外，还可以在
有序列表内嵌套无序列表，反之亦然。
第３章
超文本标记语言HTML
3.定义列表
定义性列表可以用来给每一个列表项再加上一段说明性文字，
说明独立于列表项另起一行显示。在应用中，列表项使用标
签<dt>标明，说明性文字使用<dd>表示，通常用于生成术语
列表（术语和定义）。在定义性列表中，还有一个属性是
compact,使用这个属性后，说明文字和列表项将显示在同一
行。其结构如下所示：
<dl>
<dt>第一项 <dd>叙述第一项的定义
<dt>第二项 <dd>叙述第二项的定义
<dt>第三项 <dd>叙述第三项的定义
</dl>
总之，我们在设计网页的时候可以根据实际的需要，来选择不
同的列表。
第３章
超文本标记语言HTML
3.3 超链接
实例3-9 本地链接和URL链接
实例3-10目录链接
实例3-11 图像映射
第３章
超文本标记语言HTML
实例3-9 本地链接和URL链接
一、 要求与目的：
– 了解超链接和URL
– 掌握超链接的语法
– 掌握本地链接
– 掌握URL链接
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－13 本地链接和URL链接
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>超链接举例02</title>
</head>
<body>
<a href="zitituxiang.htm">字体和图像</a>
<a href="E:/网站建设与网页设计教材/教材实例/paiban.htm">排版
标记</a>、<a href="liebiao.htm">列表</a>
第３章
超文本标记语言HTML
<p>
除了我们的这个教程外，网上也有很多的站点介绍了HTML文
件的制作方法，在这里，我来推荐几个做得相当不错的站点：
<p>
<a
href="http://www.dlc.sjtu.edu.cn/courseware/html_learning/hrefs
rcci.htm">html语言参考</a>
<br>
<a
href="http://www.gzsums.edu.cn/webclass/html/html_design.htm
l">html语言教程</a>
<br>
第３章
超文本标记语言HTML
<a href="http://www.netease.com/feng/html/index.htm">html程序
员手册</a>
<p>
<a href="mailto:[email protected]">联系我们</a>
</body>
</html>
3．将文件保存为chaolian.htm。
第３章
超文本标记语言HTML
图3－14 点击“字体和图像”输出的结果
图3－15 点击“排版”的输出结果
第３章
超文本标记语言HTML
三、 涵盖知识点：
文件之间的链接
超文本中的链接是其最重要的特性之一，使用者可以从一个页
面直接跳转到其他的页面、图象或者服务器。一个链接的基
本格式如下：
<a href="资源地址">链接文字</a>
标签<a>表示一个链接的开始，</a>表示链接的结束；
属性“href”定义了这个链接所指的地方；
第３章
超文本标记语言HTML
通过点击“链接文字”可以到达指定的文件，链接文字叫做热
点，即hotspot。
<a href="http://www.lzpcc.com.cn">兰州石化职业技术学院</a>
链接分为本地链接、URL链接和目录链接。在各种链接的各个
要素中，资源地址是最重要的，一旦路径上出现差错，该资
源就无法从用户端取得。
本地链接
对同一台机器上的不同文件进行的连接称为本地链接，它使用
UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相
对路径来指示一个文件。例如：
第３章
超文本标记语言HTML
我们现在正在浏览的这一页的绝对路径是：E:\网站建设
与网页设计教材\教材实例\chaolian.htm；而这一页相对于当前
目录即“教材实例”的相对路径是：chaolian.htm；如果是浏
览HTML教程之外的一页，该文件路径要以两个圆点(..)来表
示上 一层目录：
../../internet/IP地址。
现在我们把这几种路径的表示方法写入链接中：
以相对路径表示：<a href="zitituxiang.htm">字体和图像</a>，结
果见图3－14所示。
第３章
超文本标记语言HTML
以绝对路径表示：<a href="E:/网站建设与网页设计教材/教材实
例/paiban.htm">排版标记</a>，结果见图3－15所示。
链接上一目录中的文件：<a href="../../Internet/IP地址">IP地址
</a>
一般情况下，我们是不用绝对路径的，因为我们的资源常常是放
在网上供其他人浏览的，写成绝对路径，当我们把整个目录中
的所有文件移植到服务器上时，带有E:\的资源地址用户将无
法访问到。所以我们最好写成相对路径，避免了重新修改文件
资源路径的麻烦。
第３章
超文本标记语言HTML
3.URL链接
如果链接的文件在其它服务器上，我们就要弄清我们所指向
的文件时采用的哪一种URL地址。URL意思是统一资源定位器，
通过它可以以多种通讯协议于外界沟通来存取信息。
URL链接的形式是：
协议名：//主机.域名／路径／文件名
其中协议包括：
file
本地系统文件
http
WWW服务器
ftp
ftp服务器
telnet
基于TELNET的协议
mailto
电子邮件
news
Usenet新闻组
第３章
超文本标记语言HTML
gopher
GOPHER服务器
wais
WAIS服务器
例如，我们这样来表达一个URL地址：
http://www.sjstc.edu.cn/
ftp://ftp.sjstc.edu.cn
telnet://bbs.xanet.edu.cn
写在HTML文件中，链接其他主机上的文件时，在本案例中可
以看到：
<a href="http://www.netease.com/feng/html/index.htm">html程序
员手册</a>
点击相应的链接文字我们可以看到状态栏会显示相应站点的网
址。如图3－16所示，从而转到相应的站点。
第３章
超文本标记语言HTML
图3－16 “鼠标移动”效果
第３章
超文本标记语言HTML
4.电子邮件链接
在URL链接中除了绝对的地址链接外，用得比较多得就是电子
邮件链接，而且掌握起来也很简单，语法就是我们得URL链接
语法，如本例：
<a href="mailto:[email protected]">联系我们</a>
点击后产生得结果如图3－17和3－18所示。
图3－16 电子邮件程序加载
第３章
超文本标记语言HTML
图3－18 邮件发送窗口
提示：发送电子邮件时候还需要设置相应得邮件服务器和
协议，请参阅相关资料。
第３章
超文本标记语言HTML
实例3-10目录链接
一、要求与目的：
– 巩固超链接
– 掌握目录链接的语法
– 掌握不同文件间的目录链接语法
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－19 目录链接
图3－20 点击后的效果
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码：
<html>
<head>
<title>目录链接举例</title>
</head>
<body>
<a href=#n1>本地链接</a>
<a href=#n2>URL链接</a>
<a href=#n3>目录链接</a>
第３章
超文本标记语言HTML
<br><br>
<a name=n1>本地链接</a>
<p>本地链接：
**************
对同一台机器上的不同文件进行的连接称为本地链接，它
使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径
或相对路径来指示一个文件。
<br>
<a name=n2>URL链接</a>
<p>URL链接
************
如果链接的文件在其它服务器上，我们就要弄清我们所指
向的文件时采用的哪一种URL地址。URL意思是统一资源定
位器，通过它可以以多种通讯协议于外界沟通来存取信息。
<br>
第３章
超文本标记语言HTML
<a name=n3>目录链接</a>
<p>目录链接
**************
前面所谈的资源地址，只是单纯的指向一份文件，但是，对于
直接指到某文件上部、下部或是中央部分，以上方法却是无
法做到的。然而，我们要这样做，也并不是毫无办法。我们
可以是使用目录链接。
</body>
</html>
3.将文件保存为chaolian01.htm。
4.运行结果如图3－19和3－20所示。
第３章
超文本标记语言HTML
三、涵盖知识点：
1．文件内的目录链接
前面所谈的资源地址，只是单纯的指向一份文件，但是，
对于直接指到某文件上部、下部或是中央部分，以前的方法却
是无法做到的。然而，我们要这样做，也并不是毫无办法。我
们可以是使用目录链接。
制作目录链接方法是：
首先把把某段落设置为链接位置，格式是：
〈a name="链接位置名称">说明文字</a>
在调用此链接部分的文件，定义链接（有些资料也把这个叫做
锚点）：<a href="＃链接位置名称">链接文字</a>
本例中，当点击目录链接时则会产生图3－20的效果，很方便
的实现了我们的要求。
第３章
超文本标记语言HTML
2．文件间的目录链接
有的时候我们必须做到链接到目的文件的某个具体的位
置。这就涉及到文件之间如何精确的定位，其实一点也不难，
只是在我们的“＃”前加上具体的文件路径即可，例如：我
们要求链接到chaolian01.htm的“本地链接”位置。我们就可
以这样写代码：
使用绝对路径：
<a href=” E:/网站建设与网页设计教材/教材实例
/chaolian01.htm#n1”></a>
使用相对路径：
<a href=” chaolian01.htm#n1”></a>
提示：这样做的前提就是设计者必须知道具体的链接位置名称。
第３章
超文本标记语言HTML
实例3-11 图像映射
一、要求与目的：
– 了解什么是图像映射
– 掌握图像映射的语法
– 巩固图像的相关知识
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－21 图像映射的效果
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．编写html的代码，在其中定义出映射区域，并在img标记中
引用映射区域，如下所示：
<html>
<head><title>图像映射示例</title>
</head> <body>
<map name="mymap">
<area href="file1.htm" shape="rect" coords="30,30,100,100">
<area href="file2.htm" shape="rect" coords="150,150,240,280">
</map>
<p>请单击以下图像中的不同区域，以便跳到不同的文件</p>
第３章
超文本标记语言HTML
<p><img src="清华.jpg" width=250 height=300
usemap="#mymap"></p>
</body>
</html>
3．将文件保存为tuyingshe.htm。
编写两个简单的超链接的目标文件，并保存到与刚才编写的html
文件所在的同一目录中，代码如下所示：
――――――――以下代码是file1.htm―――――――――――
<html>
<head><title>文件1</title></head>
<body>
<font size="+3"><b>我爱玩CS！</b></font></body></html>
第３章
超文本标记语言HTML
―――――――以下代码是file1.htm―――――――
<html>
<head><title>文件2</title></head>
<body>
<font size="+3" color=blue><b>雪豹公司太牛了！</b></font>
</body>
</html>
分别保存的文件名是file1.htm和file2.htm.
在浏览器中打开tuyingshe.htm，效果如图3－21所示。当用户单击
“左上角”的区域时，将跳转到file1；而单击“右下角”的区
域时，则跳转到file2。
第３章
超文本标记语言HTML
三、涵盖的知识点
1．什么图像映射
所谓图像映射就是指在一幅图中定义若干个区域（即热点），
每个区域中指定一个不同的超链接，当点击不同的区域时便
可以跳转到相应的目标页面。
图像映射在web上的应用非常广泛，最常见的用法包括：电
子地图、页面导航图、页面导航条等。
2．如何创建图像映射
要创建图像映射，首先应在图像上标记出映射区域，然后再
在img标记符中对所定义的区域进行引用。
第３章
超文本标记语言HTML
3．定义映射区域
定义映射区域应使用map标记，在<map>和</map>之间添
加映射区域信息。为了能够引用相应的映射信息，应在
map标记中使用name属性指定图像映射的名称。例如，要
建立一个名为mymap的图像映射，就应输入：
<map name=”mymap”></map>
添加映射区域信息应使用area标记（没有结束标记），每个
映射区域用一个area标记。例如，如果一幅图上需要有三
个映射区域（即包含三个超链接），则应使用三个area标
记。
第３章
超文本标记语言HTML
area标记有以下三个基本的属性：
href属性
对于每个区域，area标记的href属性标识出超链接的目标文档，
这于a标记的href属性类似。
shape属性
area标记的shape属性用于标出图像映射区域中的映射区域的形
状。Shape属性的取值可以是：rect（矩形）、circle（圆形）、
poly（多边形）和default（整个图像区域）。
coords属性
area标记的coords属性用于标识图像映射中的区域边界。对于矩
形而言，coords有4个值，分别用逗号隔开，表示矩形区域的
左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标；
第３章
超文本标记语言HTML
对于圆形而言，coords有三个值，分别表示圆心的x坐标、y坐标
以及圆的半径值；而对于多边形而言，则coords有多个值分
别表示个顶点的坐标值。例如，以下html语句标记出了一个
包含三个映射区域的图像映射：
<map name="mymap">
<area href="page1.htm" shape="rect" coords="1,1,20,20">
<area href="page2.htm" shape="circle" coords="1,1,20">
<area href="page3.htm shape="poly"
coords="250,200,300,250,200,250">
</map>
在本案例中定义了两个“矩形”的映射区域，代码这里不再解
释。
第３章
超文本标记语言HTML
4．对映射区域进行引用
标记了映射区域之后，就可以通过在img标记中使用usemap
属性来引用相应的映射信息，此时将usemap的属性值设定为
等于map标记中的那么属性值，注意与锚点超链接相似，引
用映射名称时也要用＃号。在本案例中我们引用图像映射的
代码如下：
<p><img src="清华.jpg" width=250 height=300
usemap="#mymap"></p>
提示：以上制作图像映射的方法在实际网页制作中使用的非常
少（本案例只是为了说明其基本原理），绝大多数情况下都
是直接使用所见即所得的网页制作工具制作图像映射，相关
工具参阅技术资料。
第３章
超文本标记语言HTML
3.4 表格
实例3-12 表格的基本结构
实例3-13 设置表和单元格的属性
实例3-14 表格嵌套
第３章
超文本标记语言HTML
实例3-12 表格的基本结构
一、要求与目的：
– 了解表格的基本结构
– 掌握如何创建表格
– 掌握表格边框设置
– 掌握表格有关标记的属性设置
第３章
超文本标记语言HTML
二、实例结果，如图所示
标题
表头
内容
边框
3－22 表格的基本结构
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建一个简单的季
度报表，同时模拟两行数据：
<html>
<head><title>表格的使用举例</title></head>
<body>
<table border=2 align=center>
<!--表格标题-->
<caption>季度报表</caption>
<!—表头-->
<th>一月</th> <th>二月</th>
<th>三月</th> <th>四月</th>
<th>五月</th> <th>六月</th>
<!--第一行数据-->
第３章
超文本标记语言HTML
<tr>
<td>100</td>
<td>200</td>
<td>500</td>
<td>200</td>
<td>300</td>
<td>700</td>
</tr>
<!--//第二行数据-->
<tr>
<td>100</td>
<td>200</td>
<td>500</td>
<td>200</td>
<td>300</td>
<td>700</td> </tr>
</table></body></html>
3．将文件保存为table.htm。
5.运行结果见图3－22所示。
第３章
超文本标记语言HTML
三、涵盖的知识点
1．表格的基本结构
<table>...</table> 定义表格
<caption>...</caption> 定义标题
<tr> 定义表行
<th> 定义表头
<td> 定义表元(表格的具体内容)
2．标记说明
<table>标记可用来在html文档中创建表。<table>标记的属性应
用于本身，而不会应用于表中显示的数据，如表的宽度、高
度，边框宽度、表的背景色等属性。表的基本单位是单元格，
单元格是使用<td>标记定义的。表中的行使用<tr>标记定义，
单元格构成行，行构成表，也就是说<td>标记是嵌套
第３章
超文本标记语言HTML
在<tr>标记内；<tr>标记位于<table>标记和</table>标记内。
Border属性用于设置表格的边框的宽度。如果将该值设置为
零（0），则不显示边框。
对于表中的每一列，可以指定一个标题。使用<th>标记可以达
到此目的。例如，
<th>一月</th>
3．表格的标题
<caption>标记用于添加表的标题，也就是表的说明。如：
<caption>季度报表</caption>
表格标题的位置，可由align属性来设置，其位置分别由表格上
方和表格下方。下面为表格标题位置的设置格式，缺省设置
为上方。
第３章
超文本标记语言HTML
设置标题位于表格上方：
<caption align=top> ... </caption>
例如：
<table border=2>
<caption align=top>旅游日程</caption>
<tr>
<th>日期</th><td>9-11</td><td>11-13</td><td>1314</td>
</tr>
<tr>
<th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州
</td>
</tr>
</table>
第３章
超文本标记语言HTML
显示结果：
旅游日程
日期
9-11
11-13
13-14
旅游地点
青岛
黄山
杭州
设置标题位于表格下方：
<caption align=bottom> ... </caption>
例如：
<table border＝2>
<caption align=bottom>旅游日程</caption>
第３章
超文本标记语言HTML
<tr>
<th>日期</th><td>9-11</td><td>11-13</td><td>1314</td>
</tr>
<tr>
<th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州
</td>
</tr>
</table>
显示结果：
日期
9-11
11-13
13-14
旅游地点
青岛
黄山
杭州
旅游日程
第３章
超文本标记语言HTML
5.插入行或列
要在表格中插入新行，只需在要插入的地方添加<tr>和相
应的<td>标记即可。要插入新列，只需在每行需要的地方插
入单元格<td>。
删除行或列
要删除行，只需将代码中的相应的<tr>标记及该<tr>标记
内的所有的<td>标记。同样，要删除列，应将定义改列的所
有标记都删除。
第３章
超文本标记语言HTML
实例3-13 设置表和单元格的属性
一、要求与目的：
– 掌握表格其他属性的设定
– 掌握如何合并单元格
– 掌握如何设置单元格内容的格式
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－23 表格属性设置
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建一个的季度报表，
同时进行相应的格式设定：
<html>
<head><title>表格的使用举例</title></head>
<body>
<table border="6" align=center bgcolor="#9933FF"
cellpadding="2" cellspacing="5" width="70%" height="60%">
第３章
超文本标记语言HTML
<!--表格标题-->
<caption><font size="+3"><b>季度报表</b></font></caption>
<!--表头--> <th> </th>
<th colspan="3">第一季度</th>
<th colspan="3">第二季度</th>
<!--第一行数据-->
<tr>
<td>月份</td> <td>一月</td>
<td>二月</td> <td>三月</td>
<td>四月</td> <td>五月</td>
<td>六月</td>
</tr>
<!--//第二行数据-->
第３章
超文本标记语言HTML
<tr>
<td rowspan="2" align="center" valign="bottom">两项金额
</td>
<td>100</td>
<td>200</td>
<td>500</td>
<td>200</td>
<td>300</td>
<td>700</td>
</tr>
<!--第三行数据-->
第３章
超文本标记语言HTML
<tr>
<td>100</td>
<td>200</td>
<td>500</td>
<td>200</td>
<td>300</td>
<td>700</td>
</tr>
</table>
</body>
</html>
3．将文件保存为table01.htm。
4．运行结果如图3－23所示。
第３章
超文本标记语言HTML
三、涵盖的知识点：
1．合并单元格
在我们设计网页的时候，有时需要将多个行或多个列合并为
一个单元格。在<th>或<td>标记中使用colspan属性，可以设
置单元格所跨越的列数，例如colspan=5 表示跨越5列。在
<th>或<td>标记中使用rowspan属性，可以设置单元格所跨的
行数，例如，rowspan=5 表示跨越5行。在本案例中可以看到
相应的源代码：
季度划分：
第３章
超文本标记语言HTML
<th colspan="3">第一季度</th>
<th colspan="3">第二季度</th>
金额分配： <td rowspan="2" align="center" valign="bottom">两
项金额</td>
相应的效果我们也能从3－23看得到。
2．设置表的属性
用户可以表的宽度和高度，使用width属性进行设置，其
属性值可以采用百分比的方式，也可以以像素为单位。还可
以给表格着色，使用bgcolor属性，如果表格看起来比较拥挤，
可以增加间距，cellspacing（单元间距）指单元格之间的间
距，cellpadding（单元填充）则指表的单元格边界与单元格
内容之间的间距，在很多表格中，单元格内容旁边合适的空
间会更适宜阅读，也更加美观。
第３章
超文本标记语言HTML
在本例中设置了表的这些属性，提供大家参考：
<table border="6" align=center bgcolor="#9933FF" cellpadding="2"
cellspacing="5" width="70%" height="60%">
这样设置之后，会使表格的宽度占据70％的屏幕，高度
占据60％的屏幕，背景色为淡紫色，单元格间距为5，而单元
格内容到边界的距离则为2。效果见本例的运行结果。
第３章
超文本标记语言HTML
3．单元格文本的位置
指定单元格内文本的位置，使用align（水平对齐）和valign
（垂直对齐）属性可以控制表的单元格内得对齐方式。Align
属性可以使用下列值：left、center、right。Valign属性可以取
值为：top、middle、bottom。本例中的下列代码说明了这一
点：
<td rowspan="2" align="center" valign="bottom">两项金额</td>
提示：实际做网页大多使用制作工具，设计表格及其属性都是
非常方便的。另外，表格很好的定位工具，在实际设计过程
中用处很大。
总之，在具体设计表格的时候，我们可以根据具体需求，做出
合适而美观的表格以满足用户的需求。
第３章
超文本标记语言HTML
实例3-14 表格嵌套
一、要求与目的：
– 掌握表格嵌套的原则
– 能灵活运用表格进行页面布局
– 复习巩固以前的知识
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－24 表格嵌套
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建一个简单的表格
嵌套实例，同时对以前的知识有所涉及：
<html>
<head>
<title>表格嵌套</title>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0"
width="619">
第３章
超文本标记语言HTML
<tr>
<td align="center" valign="top" height="103">
<img src="清华.JPG" width="459" height="104"></td> </tr>
<tr>
<td align="left" background="bd.JPG" height="30">
<p><font size="2" color="#990033"> 当前位置：
</font>
<a href="#"><font size="2"color="#990033">首页
</font></a>>
<a href="#"><font size="2" color="#990033">个人天地
</font></a>>
<a href="#"><font size="2" color="#990033">游戏</font></a>
</p>
</td>
</tr>
第３章
超文本标记语言HTML
<tr>
<td align="center" height="325" valign="top">
<br>
<table border="1" cellpadding="5" cellspacing="0"
width="606">
<tr>
<td bgcolor="#99CCFF" height="253"
width="89"> </td>
第３章
超文本标记语言HTML
<td height="253" valign="top" width="491">
<br>暗黑破坏之神
<ul>
<li><a href=“#”>人物角色
</a></li>
<li><a href=“#”>三个首要的恶魔
</a></li>
<li><a href=“#”>西部王国
</a></li>
<li><a href=“#”>快速参考
</a></li>
</ul>
</td>
</tr>
</table>
第３章
超文本标记语言HTML
<p align="center">
<font size="2">|<a href="#">首页</a>|<a href="#">网页制作
</a>|<a href="#">读者服务</a>|<a href="#">个人主页
</a></font>
</p>
</td>
</tr>
</table></body></html>
3．将文件保存为table02.htm。
4．运行结果见图3－24所示。
第３章
超文本标记语言HTML
三、涵盖知识点：
1．嵌套方法
嵌套表格的方法很简单，只要将表格作为一个单元格的内容，
放在<td>和</td>之间即可。
本例中，大的方面只有三行，第一行把图片作为单元格内容，
在第三行嵌入了一个表格，并在子表内定义了一行内容且以
无序列表的格式显示出来。
2．应用场合
主要应用于页面的布局设计方面。
第３章
超文本标记语言HTML
3.5
层
实例3-15 使用层
实例3-16 在HTML文档中插入多媒体
第３章
超文本标记语言HTML
实例3-15 使用层
一、要求与目的：
• 掌握什么是层
• 掌握创建层的标记
• 熟练创建一个层
• 能进行层间切换
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－25 层的使用
提示：在Dreamweaver MX中，对层有更全面的解释。
第３章
超文本标记语言HTML
过程与步骤：
1．次单击任务栏上的【开始】→【程序】→【附件】→【记
事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建三个位置重叠
的层，设置他们的显示次序：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>使用层</title>
</head>
<body>
第３章
超文本标记语言HTML
<p align="center"><font color="#990000" size="5">层的使用
</font></p>
<div id="Layer1" style="position:absolute; width:325px; height:33px;
z-index:1;
left: 100px;">
<font color="red" size="6"><b>我对层的理解。</b></font>
</div>
<div id="Layer2" style="position:absolute; width:325px; height:40px;
z-index:3;
left: 100px; ">
<font color="green" size="6"><b>我对层的理解。</b></font>
</div>
<div id="Layer3" style="position:absolute; width:325px; height:41px;
z-index:2;
left: 100px; ">
第３章
超文本标记语言HTML
<font color="blue" size="6"><b>我对层的理解。</b></font>
</div></body></html>
3．将文件保存为ceng.htm。
4．运行结果间图3－24所示。
三、涵盖知识点：
1．什么是层
在网页上确定一个元素的位置时，通常指定其x和y坐标，当
然，也可以指定z坐标，z轴是一条从监视器的表面指向后方
的虚构的线，这样就可以通过使用层来将一个元素放到另一
个元素的上面或下面，z轴的顺序决定了元素的显示顺序。
第３章
超文本标记语言HTML
层是web页面中一个容纳html页面元素的容器，在页面中
使用层，可以在页面的动态化方面给予更多的控制和灵活度。
在网页上，可以在一个层的上面放另一个层，在显示一些层
的同时隐藏一些层，或者使用时间轴是一个层在屏幕之间游
动，就形成了动画效果。
2．使用标记
当在web页面中插入层时，可以使用span和div标记，这两
种标记也是目前大多数浏览器所支持的。在本案例中使用的
是div标记创建了三个位置重叠的文字，通过设置他们z-index
的值来改变他们的显示 .本例中将第二层作为首先显示的层
（即显示绿色文本）。只需将在z-index的值设为3即可。大家
可以改变其他两层的z轴顺序来设置相应的显示规则。
第３章
超文本标记语言HTML
实例3-16 在HTML文档中插入多媒体
一、要求与目的：
• 掌握如何插入动画
• 掌握如何在文档中播放音频和视频
• 掌握如何在文档中插入Java Applet
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－26 多媒体演示
播放黎明的音乐和一段MTV，伴随有旋转的“枫叶”和一副图片。
第３章
超文本标记语言HTML
过程与步骤：
1．次单击任务栏上的【开始】→【程序】→【附件】→【记
事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建一个多媒体页
面：
<html>
<head>
<title>在文档中插入多媒体</title>
</head>
<body>
<p>gif动画</p>
<hr>
第３章
超文本标记语言HTML
<img src="gif001.gif" alt="旋转的枫叶"> 播放黎明
的音乐:<embed align="center" src="6.mp3" width="200"
height="40" autostart="true" hidden="false"></embed>
<p>放一段精彩的MTV-我不是黄蓉:
<embed align="center" src="王蓉_我不是黄蓉.wmv" width="200"
height="200" autostart="true" hidden="false"></embed>
插入java applet:
<applet code="AppletDemo" width="167" height="117"
align="middle">
<param name="image" value="bd.jpg">
</applet></p>
</body>
</html>
第３章
超文本标记语言HTML
注：代码中的AppletDemo是javaApplet的类文件，用java的编译
器提前编译好的。其中需要输入参数，即一幅图片。
3．将文件保存为duomeiti.htm。
4．运行结果见图3－26所示。
三、涵盖的知识点
1．插入动画
前面我们已经讲过如何在文档中插入图片，同样，这里我们还
是用的这个标记即img，只不过此时的图片不是静态的图，而
是一种.gif的动画文件，如本例中的代码所示：
<img src="gif001.gif" alt="旋转的枫叶">，表示的是一片旋转的
枫叶。有关图片的相关知识请参看前面章节的介绍。
第３章
超文本标记语言HTML
2．插入声音
要给网页加入声音，前面我们讲过使用<bgsound>给网页能添加
背景声音，这里我们仅使用一个<embed>标记，就能完成简
单各种音频文件的播放,如下代码所示：
播放黎明的音乐:
<embed align="center" src="6.mp3" width="200" height="40"
autostart="true" hidden="false"></embed>，
其中，align表示嵌入对象额的对齐方式；
第３章
超文本标记语言HTML
src表示声音文件的路径，这里我们使用的相对路径；width和
height分别表示嵌入对象的宽度和高度；autostart表示是否在
访问改网页时自动播放，是一个boolean类型的属性；hidden
也是一个boolean值，确定是否在网页中显示声音控制面板。
在网页中可以播放的声音格式有：.mp3、.wav或.midi。本例
的结果我们从图3－26可以看到。
3．插入视频
在网页中播放视频，与播放声音的方法相似，使用的也是
<embed>标记，不同的是播放的文件类型不同，可以播放的
视频文件可以是.avi、.asf、.ram、.wmv和.ra。本例我们播放
的是一段“王蓉的我不是黄蓉MTV”。代码如下：
第３章
超文本标记语言HTML
<p>放一段精彩的MTV-我不是黄蓉:
<embed align="center" src="王蓉_我不是黄蓉.wmv" width="200"
height="200" autostart="true" hidden="false"></embed>，运行
的结果见图3－26所示。
4．插入Java Applet
Applet是使用java之类的语言编写的，专门用于通过web浏览
器在internet实现动画和交互效果。可以将applet嵌入到html页
面中并在启用了java的web浏览器上执行它。支持java的web浏
览器有internet3.0和netscape Navigator3.0及以后的版本。要显
示applet，需要创建将applet文件加载到浏览器中的html代码。
例如本例中：
第３章
超文本标记语言HTML
插入java applet:
<applet code="AppletDemo" width="167" height="117"
align="middle">
<param name="image" value="bd.jpg">
</applet>
要创建此类代码，必须使用<applet>标记，改标记将applet文件
的路径作为第一参数。Applet还有两个其他的属性：width和
height。这两个属性指定applet在浏览器屏幕上的尺寸。使用
<param>标记将参数传递给Applet。其中，name指定参数的名
称，value指定参数的值。本例中就是将图像文件作为参数传
递给Applet的。
第３章
超文本标记语言HTML
3.6 表单
实例3-17 表单的简介
实例3-18 使用表单
第３章
超文本标记语言HTML
实例3-17 表单的简介
一、 要求与目的：
– 掌握什么是表单
– 了解表单的使用
– 掌握form元素
– 掌握html的输入元素及其常用的类型
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－27 表单示例
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建了一个简单的表
单：
<html>
<head>
<title>表单举例</title>
</head>
<body>
<form name="formFirst" action="ceng.htm" method="post"
target="_blank" >
第３章
超文本标记语言HTML
<p>姓名：
<input type="text" name="xingming" size="10"
maxlength="10"></p>
<p>
设置密码：<input type="password"name="p1" size="10"
maxlength="6"></p>
<p>
密码确认<input type="password" name="p2" size="10"
maxlength="6"></p>
<p>性别:<input type="radio" name="xb" value="nan">男
<input type="radio" name="xb" value="nv">女</p>
第３章
超文本标记语言HTML
<p>
<input type="submit" name="submit1" value="提交">
<input type="reset" name="reset1" value="重置">
</p>
</form>
</body>
</html>
3．将文件保存为form1.htm。
4．运行结果见图3－27所示。
第３章
超文本标记语言HTML
三、涵盖知识点：
1．表单简介
表单是用于实现网页浏览者与服务器之间信息交互的一种页面
元素，表单元素用于接受用户的输入并提供一些交互式的操
作。例如用户输入的数据可以通过客户端脚本做简单的验证
之后在提交到服务器做进一步处理。在www上它被广泛用于
各种信息的搜集和反馈。图3－26是一个简单的示例表单。
2．Form标记
如果要在网页中添加表单，应在文档中添加form标记符，其基
本的语法是：
第３章
超文本标记语言HTML
<form action=”服务器处理程序的URL” method=”get|post”
enctype=”type”>
<!—具体的各种表单元素-->
</form>
提示：form标记不能嵌套，即表单不能嵌套，也就是必须使用
结束标记符</form>.
Form标记作为包含控件的容器。具体指定了以下内容：
表单的布局（主要由form的属性设定）；
用于处理已提交表单数据的程序（由action属性指定），该程序
必须能处理表单数据；
用户数据提交给服务器的方法（由method属性指定） ；
第３章
超文本标记语言HTML
一个网页可以包含多个表单，每个表单的内容各不相同，
但通常必须包含“提交”按钮，当用户填完表单数据后，单击
“提交”按钮可以将表单数据提交。提交表单数据和处理表单
数据的方法分别由form标记中的method和action属性决定。
当向服务器发送表单数据时，method属性表明所使用的方
法，其中get和post是两种可以使用的方法，get方法是在URL的
末尾附加要向服务器发送的信息，而用post方法发送给服务器
的表单数据是作为一个数据体发送的。具体使用那种方法取决
于系统正在使用的服务器类型，此时可以询问一下系统的gua管
理员，看他建议使用哪一种方法，get是默认的发送方法，但许
多html的设计者都喜欢使用post。
第３章
超文本标记语言HTML
action属性提供处理表单程序的地址，这个程序可以用站点支持
的任何语言来编写，常用的由asp、php、jsp、perl等。
例如：要是用post方法将表单提交到兰州石化学院的
“processform”程序，可编程如下：
<form action=”http://www.lzpcc.com.cn/processform”
method=”post”>
…表单内容…
</form>
本例中使用的是模拟处理程序，大家可以从源代码中看到，处
理表单的程序是ceng.htm。
第３章
超文本标记语言HTML
提示：如果要处理表单数据，我们要在服务器端（即放置网页
的远程计算机上）编写程序（如asp程序），这部分的详细
内容，有兴趣的请参考其他有关编写服务器端程序的数据或
资料。
第３章
超文本标记语言HTML
实例3-18 使用表单
一、要求与目的：
– 掌握input标记的各种属性
– 掌握常用的表单元素
– 能熟练灵活运用表单设计交互页面
第３章
超文本标记语言HTML
二、实例结果，如图所示
图3－28 表单综合实例
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】→
【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建了一个简单交互
的表单，其中用到了大部分表单元素：
<html>
<head>
<title>表单综合实例</title>
</head>
<body>
<form name="formFirst" action="ceng.htm" method="post"
target="_blank" >
<p align="center"><font size="5"><b>用户注册</b></font></p>
第３章
超文本标记语言HTML
<p>姓名：<input type="text" name="xingming" size="10"
maxlength="10"></p>
<p>
设置密码：<input type="password" name="p1" size="10"
maxlength="6"></p>
<p>
密码确认：<input type="password" name="p2" size="10"
maxlength="6"></p>
<p>性别:<input type="radio" name="xb" value="nan" checked>男
<input type="radio" name="xb" value="nv">女</p>
<p>爱好：<input type="checkbox" name="ch_aihao" value="a1"
checked>游泳
<input type="checkbox" name="ch_aihao" value="a2"
checked>爬山
<input type="checkbox" name="ch_aihao" value="a3">跳舞
第３章
超文本标记语言HTML
<input type="checkbox" name="ch_aihao" value="a4">音乐</p>
<p>我的昵称（请选择）：<select name="nicheng" size="1">
<option>小马</option>
<option selected>帅哥</option>
<option>小猪</option></select></p>
<p>自我介绍:<br>
<textarea name="jieshao" cols="20" rows="5">我是一个活泼开朗
的女孩，希望大家和我交朋友。</textarea></p>
<p>
<input type="submit" name="submit1" value="提交">
<input type="reset" name="reset1" value="重置"></p>
</form></body></html>
3．将文件保存为form2.htm。
4．运行结果见图3－28所示。
第３章
超文本标记语言HTML
三、涵盖知识点
1．Html的输入元素（标记）
创建了表单之后，就可以在表单上放置一些元素以接受用户输
入。这些表单元素通常与<form>元素一起使用。但是，也可
以在表单以外使用这些表单元素来创建用户界面。常用的输
入元素有：<input>元素、文本区域<textarea>元素、按钮
<button>元素和列表框<select>元素。
2．Input元素
<input>元素定义显示在表单上表单元素的类型和外观。此元素
的具体属性件表3－5所示。
第３章
超文本标记语言HTML
表3－5 input元素属性
属性
描述
Type
指定表单元素的类型，可用的选项有text、password、
checkbox、radio、submit、reset、file、hidden和
button。默认值为text。
Name
表单元素的名称
Value
次属性是一个可选的属性，它指定表单元素的初始值。
Size
指定表单元素的显示长度，用于文本输元素即输入类
型是text或password。
第３章
Maxlength
超文本标记语言HTML
此属性用于指定在text或password表单元素中可以输
入的最大字符数。默认值是无限的。
Checked
此属性是一个boolean属性，指定按钮是否被选中。
当输入的类型是radio或checkbox时，使用此属
性。
Src
Src＝“URL”。当使用image作为输入类型使用此属
性，用于标识图片的位置。
第３章
超文本标记语言HTML
3．输入元素的类型
按钮（button）
此类型用于创建按钮。例如：
<input type= "button" value="单击" name="b1">,其中name指定
按钮的名称，通过该名称对按钮执行操作。Value此属性设置
在按钮上面显示的文字。
文本（text）
此类型用于创建单行文本。例如：
<input type=text value="" name="textbox" size=20 maxlength=20>，
其中size属性定义了text元素的显示长度。Maxlength属性指定
可在text元素中输入的最大字符数。Value设置改文本框的初
始值。
第３章
超文本标记语言HTML
口令（password）
口令输入框类似于单行文本输入框，只是用户输入的具体内容
不显示出来，显示出来的都是替代文本“*”，口令输入框
适用于字段内容要保密的情形，如密码、帐号等。例如：
<input type="password" name="pass" value="" size=10>
隐藏域（hidden）
隐藏域类似于单行文本输入框，只是改表单元素并不在页面上
显示出来，可以用于一些不需要显示出来但在实际的页面上
要进行操作的表单元素。例如：
第３章
超文本标记语言HTML
<input type="hidden" value=1 name="h1">。
文件（file）
文件域是特殊的表单元素，用于上传文件到服务器。例如：
<input type="file" name="file1" size=20
accept="image/gif,image/jpeg" >，accept属性的值为MIME类型，
用于指定上传文件的类型，如果可以接受多种类型的文件，
中间以逗号隔开。这样就可以得到一个单行文本框和一个浏
览文件的按钮。
第３章
超文本标记语言HTML
复选框（checkbox）
此类型用于创建复选框。用户可以选择多个复选框，选定了一个
checkbox元素时，会将一个name/value对和form一并提交。例
如本例中的一段：
<p>爱好：<input type="checkbox" name="ch_aihao" value="a1"
checked>游泳
<input type="checkbox" name="ch_aihao" value="a2"
checked>爬山
<input type="checkbox" name="ch_aihao" value="a3">跳舞
<input type="checkbox" name="ch_aihao" value="a4">音乐
</p>
其中checked表示设置此复选框被选中。效果见图3－27所示。前
两个是被选中的。
第３章
超文本标记语言HTML
单选按钮（radio）
此类型用于创建单选按钮。单选按钮用于在一组互斥的值中进
行选择的情形，也就是说一次只能选中一个选项，而复选框
一次可以选中多个选项。组中的单选按钮（或复选框）应当
具有相同的名称。在组中，只用选定的单选按钮在提交的时
候才产生name/value对。单选按钮需要一个显示的value属性。
在本案例中：
<p>性别:<input type="radio" name="xb" value="nan" checked>男
<input type="radio" name="xb" value="nv">女
</p>
同样也可设置它的初始选中项，上面代码运行后“男”为初始
选中。
第３章
超文本标记语言HTML
图像（image）
此类型用于创建图形提交按钮。例如：
<input type=image src="bd.jpeg" value="单击" name="ok">，其中
src属性的值指定要放在按钮中图像的URL。用户单击图像提
交表单元素时，将提交表单以进行处理。
提交（submit）
此类型用于创建提交按钮。用户单击提交按钮时把表单提交到
action属性中指定的位置，激活的提交按钮的name/value对与
表单一起提交，在本例中：
<input type="submit" name="submit1" value="提交">
第３章
超文本标记语言HTML
重置（reset）
此类型用于创建重置按钮，用户单击按钮时，所有表单元素的值
将重置为各自的value属性中指定的初始值。例如：
<input type="reset" name="reset1" value="重置">
4．文本区域（textarea）元素
此元素用于创建多行文本输入框。需要指定textarea中的行数和列
数。此元素使用标记</textarea>结束。在<textaraea>之间的内容
就是它的初始值</textarea>，例如：
<p>自我介绍:<br>
<textarea name="jieshao" cols="20" rows="5">我是一个活泼开朗的
女孩，希望大家和我交朋友。</textarea></p>
第３章
超文本标记语言HTML
5．按钮元素（button）
此元素用于创建按钮表单元素。用户单击按钮时会提交表
单进行处理，按钮的name/value对与表单一起提交。
Button元素与button的input元素类似，不同之处在于提交
button元素时，所提交的name/value对信息中的name是button元
素的name属性值，而value是<button>和</button>之间的内容。
Button元素还可以包含图像，类似于type＝image的input元素。
区别是，input元素会被呈现为平面图像，而button元素则显示
为带有标准的上/下动作的按钮。例如：
<button type="reset" name="chongzhi" >重置<img src="bd.jpeg"
alt="重置表单" width="30" height="20"></button>。读者可以自
己演示一下，观察此类按钮的不同之处。
第３章
超文本标记语言HTML
6．列表框（select）元素
select用于向用户显示选项列表。每个option元素代表一个选项。
每个select元素必须包含至少一个option标记，否则就成了空
列表。例如本例中的一个列表：
<p>我的昵称（请选择）：
<select name="nicheng" size="1">
<option>小马</option>
<option selected>帅哥</option>
<option>小猪</option>
</select> </p>
第３章
超文本标记语言HTML
其中name指定元素名称，size指定用户能一次看到的行数，如
果size＝3代表用户能一次看到三个选项，看不见的通过滚动
条移动来实现。
Selected指定默认选项。另外select元素还有一个属性multiple，
它是一个boolean的属性，可以设定用户选定多个选项。
提示：在表单元素的布局方面，使用表格来定位，是做网页的
人员经常要用到的。另外，设置表单元素的很多格式，只有
在设计的时候逐渐体会。
第３章
超文本标记语言HTML
3.7 框架
实例3-19 框架的简介
实例3-20 使用框架
实例3-21 使用内嵌框架
第３章
超文本标记语言HTML
实例3-19 框架的简介
一、要求与目的：
– 掌握什么是框架
– 了解框架的使用
– 掌握frameset元素及其属性设置
– 了解常用的划分方式
第３章
超文本标记语言HTML
二、实例结果见图所示
图3－29 框架的简介
第３章
超文本标记语言HTML
二、过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建三个简单的
网页x.htm、y.htm和frame1.htm：
――――――以下代码是x.htm―――――――
<html>
<head><title>页面x</title></head>
<body>
<font size="+3"><b>这是文件x.htm</b></font>
</body>
</html>
第３章
超文本标记语言HTML
――――――以下代码是frame1.htm――――
<html>
<head><title>框架示例</title></head>
<frameset cols="20%,*">
<frameset rows="40%,*">
<frame src=x.htm noresize>
<frame src="bd.jpg" >
</frameset>
<frame src=y.htm scrolling=yes>
</frameset></html>
第３章
超文本标记语言HTML
――――――以下代码是y.htm――――――
<html>
<head><title>页面y</title></head>
<body>
<font size="+3" color=blue><b>这是文件y.htm</b></font>
</body>
</html>
3．将以上的代码分别保存到相同的目录下，名字分别为
x.htm、y.htm和frame1.htm。
4．运行结果见图3－29所示。
第３章
超文本标记语言HTML
三、涵盖知识点：
1．什么是框架
框架（也称为帧）将web浏览器的窗口分割为不同的区域，每
个区域都可以显示一个独立可滚动的页面。例如，可以在
网页中使用三个框架，一个用于显示标题或静态的logo，
一个用作导航菜单和一个用于显示数据。每个框架中的文
件都可以彼此独立的创建、修改和滚动。见图3－28所示，
页面使用了三个框架。
2．框架划分
标准的html文档有一个head部分和body部分。但使用框架的
html文档有一个head部分和frameset部分，没有body部分，
也就是说frameset和body不能同时使用。
使用frameset可以任意划分框架，其属性见表3－6所示。
第３章
超文本标记语言HTML
表3－6 Frameset属性
属性
Rows
Cols
描述
此属性指定水平框架的高度的像素数、百
分比或用“*”表示余下的空间。
此属性指定垂直框架的高度的像素数、百
分比或用“*”表示余下的空间。
第３章
超文本标记语言HTML
框架可以嵌套，即在frameset的内部继续划分，这种方法在实
际做的过程中用的比较多。本例中可以看到，就使用了框
架的嵌套。
<frameset cols="20%,*">
<frameset rows="40%,*">
<frame src=x.htm noresize>
<frame src="bd.jpg" >
</frameset>
<frame src=y.htm scrolling=yes></frameset>
此例中划分的过程是：首先，总体将web页面划分为
两列，左侧宽度为窗口宽度的20%，右侧则为“*”表示，
即80%。其次，将左侧的框架继续划分为上下两部分，上
面的占左侧框架高度的40%，下面当然为60%。
第３章
超文本标记语言HTML
3．框架内容
框架的内容要用到frame标记，frame可以指定每个框
架的外观和内容。其主要属性有两个src和name。Src指
定该框架放置的初始文件的位置，name指定框架名。本
例中我们的三个文件放在同一目录下，因此使用相对目
录即可。Frame标记还具有下列属性见表3－7所示。
第３章
超文本标记语言HTML
表3－7 frame标记属性
属性
Noresize
说明
它指定框架窗口的大小不能调整。
此属性指定框架窗口的滚动模式。可取值有：auto－此值代
Scrolling
表需要时为框架自动提供滚动条，是默认值。yes－
此值代表始终为框架提供滚动条。no－此值代表不
为框架窗口提供滚动条。
Frameborder
此属性设置框架的边框
Marginwidth。
此属性指定框架内容的左右边距。其值必须大于一个像素
Marginheight
此属性指定框架内容的上下边距。其值必须大于一个像素。
提示：在具体做的时候，使用可视化的工具，可以得到更好的效果。
第３章
超文本标记语言HTML
实例3-20 使用框架
一、要求与目的：
– 掌握frameset和frame标记的各种属性
– 掌握框架链接操作
– 能熟练灵活运用框架设计交互页面
第３章
超文本标记语言HTML
二、实例结果,见图所示
图3－30 框架应用实例
第３章
超文本标记语言HTML
二、过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→【附件】
→【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了带有导航栏
（framelnk.htm）的简单交互页面frame2.htm：
―――――――以下代码是framelnk.htm――――――
<html>
<head><title>导航栏</title></head>
<body>
<font size="+3">
<b>
<a href="x.htm"target="link">文件x.htm</a><br>
<a href="y.htm"target="link">文件y.htm</a><br>
第３章
超文本标记语言HTML
<a href="ceng.htm"target="link">层的使用</a><br>
<a href="form2.htm"target="link">使用表单</a><br>
<a href="bd.jpg"target="link">北大博雅塔</a>
</b></font></body>
</html>
―――――――以下代码是frame2.htm―――――――
<html>
<head><title>框架示例2</title></head>
<frameset rows="25%,*" >
<frame src="bd.jpg">
<frameset cols="15%,*">
<frame src=framelnk.htm noresize>
<frame src="x.htm" name="link">
第３章
超文本标记语言HTML
<noframes>
未能显示框架。请单击这里<a href="main.htm">使用
无框架版本</a>
</noframes>
</frameset>
</frameset>
</html>
3．将以上的代码分别保存到相同的目录下，名字分别为
framelnk.htm和frame2.htm。
4．运行结果见图3－30所示。
第３章
超文本标记语言HTML
在导航栏点击“使用表单”，可以在右边显示相应的链接内容。
见图3－31所示。
图3－31 使用框架的链接效果
第３章
超文本标记语言HTML
三、涵盖知识点：
1．链接到框架
创建网页中的链接时，可以将框架设置为链接目标。
要进行此操作，浏览器必须遵循下列规则：
如果在某个元素的链接的target属性中指定了一个框
架，则在点击该链接时，元素指定的文档将加载到
该框架中。
如果没有设置target属性，则使用BASE元素的Target
属性确定框架。例如：
第３章
超文本标记语言HTML
<html>
<body>
<base target="link">
<p><a href="x.htm">文件x</a></p>
<p><a href="y.htm">文件y</a></p>
</body>
</html>
其中“link”就是目标框架的名称。
如果该元素与BASE元素都没有指定目标，则文档将加载到
当前所在的框架中。
如果没有找到该框架，浏览器将新建一个窗口，并将文档加
载到新窗口中。
第３章
超文本标记语言HTML
Target属性用于指定要在其中打开文档的框架的名称。
创建框架时，需要设置Name属性。此名称用于创建链接时，
设置链接目标。修改框架的内容后，原始的框架集定义将
丢失。如果有多个链接指向同一个目标，可以在BASE元素
中设置一个默认目标，这样就无需在各个元素中指定Target
属性。
除了在TARGET中可以直接设置框架的名称，也就是
直接链接到该框架上，也可以使用特殊目标名。对于没有
框架的文件也可以使用TARGET属性。见表3－8所示。
第３章
超文本标记语言HTML
表3－8 target属性
说明
目标属性
TARGET＝“-self”
指定在当前页面或当前框架中打开。
TARGET＝“-blank”
指定在新窗口中打开。
指定在当前文档的父框架组中打开，
TARGET＝“-parent”
若只有一个框架组，则在当前
页面打开该文档。
TARGET ＝“-top”
指定链接在当前页面打开，破坏当前
框架。
第３章
超文本标记语言HTML
2．无框架（NOFRAMES）元素
如果浏览器不支持框架，作为开发人员，我们应当提供其他
的内容来显示。在本案例中：
<noframes>
未能显示框架。请单击这里<a href="main.htm">使用
无框架版本</a>
</noframes>
就是说如果不能显示框架页面，我们也提供了无框架版本。
第３章
超文本标记语言HTML
实例3-21 使用内嵌框架
一、要求与目的：
– 掌握嵌入框架的使用
– 掌握嵌入框架的属性设置
第３章
超文本标记语言HTML
二、实例结果见图所示
图3－32 内嵌框架示例
第３章
超文本标记语言HTML
过程与步骤：
1．通过依次单击任务栏上的【开始】→【程序】→
【附件】→【记事本】菜单命令打开记事本
2．在记事本的编辑面板中输入以下代码，创建了一
个内嵌框架的简单交互页面frame3.htm：
<html>
<head><title>内嵌框架</title></head>
<body>
<p>讲到这里你对框架是不是有所了解？</p>
第３章
超文本标记语言HTML
<iframe src="x.htm" width="200" height="150"
scrolling=yes frameborder="10">
</iframe>
<br>
<p><font color=hotpink >上面是一个内嵌框架
</font></p>
</body>
3．将文件保存为frame3.htm。
第３章
超文本标记语言HTML
三、涵盖知识点
Iframe标记：使用iframe可以定义内嵌或浮动框
架，并将它插入到网页的任意位置当浏览器不支持框
架时将呈现iframe标记内的内容，内嵌框架的大小不
能调整。Iframe的属性如下表所示：
属性
说明
Src
此属性指定框架内容的URL
Width
指定内嵌框架的宽度
Height
指定内嵌框架的高度
表3－9 iframe的属性
第３章
习题
超文本标记语言HTML
一、选择题
1．HTML是网页的基本语言，中文翻译为（ ）。
A．网页语言 B．超文本标记语言 C．标记语言 D．网
页编程语言
2．HTML文件就是网页文件，它的文件扩展名通常为
（
）。
A．html
B．htm
C．txt D．asp
3．HTML是一种结构化的标记语言，它由许多元素相互嵌
套而成，其中最顶层的元素是（ ）。
A．HEAD
B．BODY C．HTML D．XML
4．下面哪个符号不是HTML的特殊字符（ ）。
A．空格符
B．换行符 C．版权符号 D．邮件标识符@
5．（
）元素用来在网页种插入一个图片。
A．FONT B．IMG C．TABLE D．P
第３章
超文本标记语言HTML
6．下面哪个元素不属于表格元素（
）
A．TR
B．TD C．TH
D．TITL
7．超链接元素A又很多属性，其中用来指明超链接所指向的
URL的属性是（ ）。
A．href B．herf C．target D．link
8．下面哪个选项表示的是提交按钮（
）。
A．INPUT，type=“text”
B．INPUT，type=“button”
C．INPUT，type=“submit”
D．INPUT，type=“checkbox”
二、简答题
1、简述HTML语言中元素、标记和属性的区别
2、HTML文档通常分为几个部分，每个部分代表什么含义？
3、HEAD元素读报汉哪些子元素？这些元素都具有什么功能？
4、简述BODY元素的主要功能。
第３章
超文本标记语言HTML
三、操作题
1、用HTML编写一个网页，要求网页标题为“欢迎来到我的
网站”，网页上有一段红色的文字“这是我编写的第一个网
页”和一副URL为“tu.jpg”的图片。
2、要在网页上建立一个文字超链接，当点击这个超链接时，
会在一个新窗口中打开学院的主页
（http://www.lzpcc.com.cn），请编写代码。
3、编写一段HTML，目的要在网页中建立一个无序表，它包
含三项内容：新浪、网易和TOM。
4、编写一个如下图的表格代码：
第３章
超文本标记语言HTML
配件
价格
数量
鼠标
￥1300.00
3
硬盘
￥123.00
5
合计
￥1423.00
第３章
超文本标记语言HTML
5、用HTML编写一个具有上下结构的网页。
6、用DIV元素创建一个层，要求这个层位于网页右下角、
背景色为浅灰色（＃EEEEEE）、大小为200×100，并
且在这个层中插入新浪网的标志图片。
7、请编写一个简单的个人网页，要求有：链接、图片、
声音、动画、层、表单等。