　　本章共分 21 个实例，主要内容包括 HTML 创建与测试、 html 的文档结构、常用标记的使用、表格和层的使用技灵活掌握等内容。

　　本章共分21个实例，主要内容包括HTML创建与测试、html的文档结构、常用标记的使用、表格和层的使用技灵活掌握等内容。　　本章共分21个实例，主要内容包括HTML创建与测试、html的文档结构、常用标记的使用、表格和层的使用技灵活掌握等内容。

本章内容 • 3.1 HTML基础 • 3.2 基本标记 • 3.3 超链接 • 3.4 表格 • 3.5 层 • 3.6 表单 • 3.7 框架　　　　　　　　（习题）　　　　　

3.1 HTML基础 • 实例3-1 认识html • 实例3-2 HTML文档结构

实例3-1 认识html • 一、要求与目的： • 了解html的基本常识和工作原理 • 掌握如何使用“记事本”编辑网页 • 了解两类常用的网页制作工具 • 掌握html的语法规范

二、实例结果，如图所示 图3－4　运行结果

过程与步骤： １.通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本２.在记事本的编辑面板中输入以下代码，如图3－1所示。 <html><head><title>我的第一个页面</title></head><body>这是我的第一个web页面。 <b>这段话是被加粗的。</b></body></html>

图3－1 网页编辑窗口 • 3. 将此文件保存为“myfirst.htm”，如图3－2所示。图3－2 “另存为”对话框

*提示*：HTML文件的扩展名必须为.htm或者.html。 • 4. 启动浏览器。 • 在文件菜单中选择“打开”（或者“打开页面”），这时将出现一个对话框。选择“浏览”（或者“选择文件”），定位到你刚才创建的HTML文件——“myfirst.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说：“C:\MyDocuments\ myfirst.htm”。单击“确定”，浏览器将显示此页面，如图3－3所示。

图3－3 打开对话框

* 提示*：用鼠标双击myfirst.htm也可运行。 • 5.运行结果，如图3－4所示。 • 三、涵盖的知识点： • 1．HTML的概念 • HTML (HyperText Markup Language，超文本标记语言)是表示网页的一种规范(或者说是一种标准)，他通过标记符定义了网页内容的显示。例如，用<table>标记符在网页上定义一个表格。 • 2．HTML的语法 • 刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。HTML的语法其实比较简单，即使没有任何计算机语言(如C语言、BASIC语言等)的

　基础也很容易学。在HTML中，所有的标记符都用尖括号括起来。例如，<HTML>表示HTML标记符。某些标记符，例如换行标记符<BR>，只要求单一标记符号。但绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。　基础也很容易学。在HTML中，所有的标记符都用尖括号括起来。例如，<HTML>表示HTML标记符。某些标记符，例如换行标记符<BR>，只要求单一标记符号。但绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。 • 单标签 • 某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：　　　　　　　　　　 • <标签名称> 最常用的单标签是<BR>, 它表示换行。

双标签 • 另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： • <标签> 内容</ 标签> • 其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：<EM>第一：</EM> • 标签属性 • 许多单标记和双标记的始标记内可以包含一些属性，其语法是： • < 标签名字属性1 属性2 属性3 … >

各属性之间无先后次序，属性也可省略（即取默认值），例如标题标记<H1>表示文本以标题1的格式显示。带一些属性：各属性之间无先后次序，属性也可省略（即取默认值），例如标题标记<H1>表示文本以标题1的格式显示。带一些属性： • <h1 align=center color=red>大家生活愉快！</h1> • 其中align属性值表示文本居中显示，color的属性值表示文本以红色显示。 • *提示*：HTML标记符是不区分大小写的，但通常约定使用大写标记符，这有利于HTML文档的维护。 • 3．工作原理 • 如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令(或者选择“查看”菜单中的“源文件”命令)，则系统会启动“记事本”，其中包含一些文本信息，这些文本其实就是网页的本质——HTML 源代码，也就是我们在记事本中编辑的代码，如图3－1。

在HTML文档中通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加<b></b>标记符,则浏览器会以粗体字显示该段内容，如图3-4所示。在HTML文档中通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加<b></b>标记符,则浏览器会以粗体字显示该段内容，如图3-4所示。 • HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。 • 　　　标准(几乎所有浏览器都支持),但HTML4.0也已逐渐普及。最新的标准是HTML4.01，它对HTML4.0作了一些小的修正。对于基本的标记符，3.2与4.0基本一致在本书中不作区分，但本书中的主要内容是以4.0为基础的。

4．常用网页编辑工具 • Macromedia Dreamweaver MX 2004——用于制作具有动态HTML动画的网页，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。由于Dreamweaver提供了非常友好的用户界面和强大的功能，现已成为专业用户和普通用户首选的网页开发工具。 • Microsoft FrontPage 2004——用于制作功能强大的网页。微软公司的FrontPage是一款优秀的网页制作和管理软件。作为Office家族的新成员，FrontPage继承了Office系列软件界面通用、操作简单的特点，十分适合初学者使用。 • 但是假如你想成为一名熟练的网络开发者，我们强烈推荐你用纯文本编辑器编写代码，这有助于学习HTML基础。

实例3-2 HTML文档结构 • 一、要求与目的： • 了解html的文档结构 • 掌握如何使用meta标记 • 掌握如何使用bgsound标记

二、实例结果，如图所示 标题图3－5 背景音乐图3－6 跳转后的页面

过程与步骤： • 1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本 • 2．在记事本的编辑面板中输入以下代码： • <html> • <head> • <title>我的第二个页面</title> • <meta http-equiv="refresh" content="30;URL=myfirst.htm"> • <bgsound src="2002年的第一场雪.mp3" loop=2 >

</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>、首部标记<HEAD>和</HEAD>以及正文标记<BODY>和</BODY>。 • HTML标记 • <HTML>和</HTML>是Web页的第一个和最后一个标记符，Web页的其他所有内容都位于这两个标记符之间。虽然HTML标记符的开始标记符和结束标记符都可以省略(因为.htm或．html扩展名已经告诉浏览器该文档为HTML文档)，但为了保持完整的网页结构，建议包含该标记。另外，HTML标记符通常不包含任何属性。

3.首部标记 • 首部标记<HEAD>和</HEAD>位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。例如，可以在首部标记中设置网页的标题、定义样式表、插入脚本等。 • 首部标记中的内容也用相应的标记符括起来。例如，样式表(CSS)定义位于<STYLE>和</STYLE>之间；脚本定义位于<SCRIPT>和</SCRIPT>之间。

4. TITLE标记符 • 在首部标记中,最基本、最常用的标记符是标题标记符<TITLE>和</TITLE>,用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。如案例2中： • <title>我的第二个页面</title> • 效果如图3－5所示。

5. META标记符 • 　在首部标记符中另外一个比较常用的标记符是META，又名元标记，向浏览者提供某一页面的附加信息，另外用于帮助一些搜索引擎进行页面分析，使导出的页面正确放入合适的目录中，元标记的种类包括两类： HTTP-EQUIV • HTTP-EQUIV的一个主要功能：可驱使浏览器在同一窗口中打开另一个页面，格式如下： • <META HTTP-EQUIV="Refresh" CONTENT="#;URL=http://www.domain.com/webpage.htm">

其中: "#"代表所设定的时间，即在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章。

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好。

6．BGSOUND标记符 • InternetExplorer还支持另外一个用于头部的标记符——BGSOUND，它可用予指定网页的背景音乐。BGSOUND标记符只有开始标记符，没有标记符。它的基本属性是src，用于指定背景音乐的源文件。另外一个常用属性是loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环。 • 例如，在案例中以下语句将使网页播放“2002年的第一场雪”作为背景音乐，并且在播放两次后结束： • <bgsound src="2002年的第一场雪.mp3" loop=2 >

提示：BGSOUND标记符必须位于HEAD标记符内，并且src所指定的问件必须存在。例如，在刚才的语句中，必须使“2002年的第一场雪.mp3”这个文件位于网页所在的目录,才能正确地播放背景音乐。提示：BGSOUND标记符必须位于HEAD标记符内，并且src所指定的问件必须存在。例如，在刚才的语句中，必须使“2002年的第一场雪.mp3”这个文件位于网页所在的目录,才能正确地播放背景音乐。

3.2 基本标记 • 实例3-3 文本标记的使用 • 实例3-4 排版标记的使用 • 实例3-5 特殊字符和块标记 • 实例3-6 字符级标记 • 实例3-7 字体和图像标记 • 实例3-8 列表标记

实例3-3 文本标记的使用 • 一、要求与目的： • 掌握段落标记<p>和换行标记<br>的使用 • 掌握水平线标记<hr>的使用 • 掌握标题标记<h1>~<h6>的使用 • 掌握相关属性的设置

二、实例结果，如图所示。 图3－7 文本标记的使用从本案例结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。

过程与步骤： • 1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本 • 2．在记事本的编辑面板中输入以下代码： • <html> • <head> • <title>文本标记的使用1</title> • </head> • <body> • <p align=center>第一段，人生最可贵的品质是诚实。</p>

<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。

三、涵盖知识点： • 1．段落标记 • 段落标记符用于将文档划分为段落，包括开始标记符<p>和结束标记符</p>，通常结束标记符可省略，HTML自动在一个段落前后各添加一个空行。<P>标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。如本案例中： • <p align=center>第一段，人生最可贵的品质是诚实。</p> • <p>第二段，人生最珍贵的礼物是宽容。</p>

2．换行标记符<br> • 当需要结束一行，并且不想开始新段落时，使用<br>标记。<br>标签不管放在什么位置，都能够强制换行。它只有一个单独的标记<br>没有结束标记符。如本案例中： • 人生最大的敌人是自己。人生最大的破产是绝望。在这里换行<br> • 3．水平线标记<hr> • 在文档当前位置画一条水平线（horizontal line），需要使用<hr>标记，一般是从窗口中当前行的最左端一直画到最右端。

它可以带一些属性能画出自定义的水平线，在本案 例中： • <hr size=10 align=left width="75%" noshade> • 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"。Noshade指定水平线不带阴影，为实心线段，缺省带阴影。

4．标题标记<hn> • 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： • <H1>…</H1>　　　　　第一级标题 • <H2>…</H2>　　　　　第二级标题 • <H3>…</H3>　　　　　第三级标题 • <H4>…</H4>　　　　　第四级标题 • <H5>…</H5>　　　　　第五级标题 • <H6>…</H6>　　　　　第六级标题

实例3-4 排版标记的使用 • 一、要求与目的： • 掌握如何使用html的注释 • 掌握<center>标记的使用 • 掌握三种排版标记的使用 • 熟悉段落的相关属性设置

二、实例结果，如图所示。 缩进显示居中显示原样显示斜体图3－8 排版标记的使用

过程与步骤： • 1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本 • 2．在记事本的编辑面板中输入以下代码： <html> • <head> • <title>排版标记的使用</title> • </head> • <body> • <!—练习排版标记的使用，这里是注释-->

<center>我们为了共同的目标而来。</center> • <p>没有缩进之前，这是一个真实的故事。</p> • <blockquote> • 人生最可贵的品质是诚实、 • 最珍贵的礼物是宽容、 • 最佩服的实上进。 • </blockquote > • <pre> • 第一段，人生最可贵的品质是诚实。 • 第二段，人生最珍贵的礼物是宽容。 • </pre> • <address>兰州石化职业技术学院</address> • </body> • </html> • 3．将文件保存为paiban.htm。

三、涵盖知识点： • 注释 • 在html中和其他语言一样支持注释，“<!—”表示注释的开始，“-->”表示注释的结束。如果单行文本进行注释也可以采用“//”标记进行对当前行的注释。 • 注释的内容不再浏览器里显示的，在本案例中： • <!—练习排版标记的使用，这里是注释--> • 此内容为注释部分，不予以显示的。 • 居中对齐标记 • 这个很简单，成组使用即可，格式：

<center>内容</center>，在本案例中： • <center>我们为了共同的目标而来。</center> • 3．三种段落级标记 • <blockquote> • blockquote将被修饰的对象往右边缩退，记作：<blockquote>内容</blockquote>，以下效果是这样的语法实现的（用了两个缩进单位）：<blockquote><blockquote>虚拟在线动力……</blockquote></blockquote> • 虚拟在线动力是一个综合性网站，有“PC动力”、“原创大厅”、“情感小屋”、“读书天地”、“音画时尚”和“音乐岛”六个栏目，网站还开设有听歌台主站。

当然，你也可以用空格符号实现缩进（代码记作：），但它只管左边的，对右边没有影响，而blokcquote标签是有的。在本案例中：当然，你也可以用空格符号实现缩进（代码记作：），但它只管左边的，对右边没有影响，而blokcquote标签是有的。在本案例中： • <blockquote> • 人生最可贵的品质是诚实、 • 最珍贵的礼物是宽容、 • 最佩服的实上进。 • </blockquote > • 效果从结果中可以看出。

<pre> • 这是非常有用的一个标签，它可以使得最终显示效果以原始格式实现。即文本在浏览器中的显示时遵循在HTML源文档中定义的格式。有时我们需要精确地对齐某些元素，pre标签能够帮上大忙，它能令效果比在“设计”模式下用空格符移动显示符号更准确。在本案例中： • <pre> • 第一段，人生最可贵的品质是诚实。 • 第二段，人生最珍贵的礼物是宽容。 • </pre>

运行结果如图3－8所示。 • <address> • <address>标记用于显示诸如html文档的作者、地址和签名等信息，通常显示为斜体字。如本案例中的： • <address>兰州石化职业技术学院</address> • 总之，HTML的排版不同于Word的直观排版概念，它不是所见即可得的。但是，最终追求的结果是一样的：令终端页面的外观像我们预设的一样显示出来。排版可分为常规排版和非常规排版两种，后者属于较为高深的内容，出于学习的循序渐进要求，我们在本节只介绍常规排版。

实例3-5 特殊字符和块标记 • 一、要求与目的： • 掌握如何在html文档使用特殊字符 • 掌握块标记<div>和<span> • 熟悉块标记相关属性设置

二、实例结果，如图所示 图3－9 特殊字符和块标记的使用

过程与步骤： • 1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本 • 2．在记事本的编辑面板中输入以下代码： • <html> • <head> • <title>特殊字符和块标记</title> • </head> • <body> • <h1>欢迎光临</h1> • <p>售价：68(¥) • <div> • 第一部分

<p>div用于组织元素 • <p>div通常用于块级元素 • </div> • <div align=right> • 第二部分<br> • <h3>你觉得有意思吗？</h3> • </div> • <p>在div之外，<span style=”font size=25”>情况</span>就不同了，能理解吗？

本章共分 21 个实例，主要内容包括 HTML 创建与测试、 html 的文档结构、常用标记的使用、表格和层的使用技灵活掌握等内容。