您是否曾好奇网页是如何运作的？您是否曾想创建自己的网页，包括标题、文本和图形图标？您是否曾听过“HTML”一词并想知道它意味着什么？如果是，请继续阅读...
在本文中，我们将探讨网页的艺术与科学，并尝试一些您今天就可以在自己的电脑上实践的技术。我们甚至创建了一个工具，让您可以立即尝试并查看 HTML。事实证明，创建网页既简单又有趣，而且完全在您的能力范围之内。当您读完本文时，您将准备好开始组装自己的网页！
广告
背景介绍
此时此刻，几乎可以肯定的是
- 您正坐在电脑前。
- 您正在使用 Web 浏览器阅读此页面，该浏览器可能是 Microsoft Internet Explorer、Firefox 或 Netscape。
- 您想了解网页如何运作，或许还想学习创建自己的页面。
因为您正坐在电脑前，拥有 Web 浏览器并渴望学习，所以您拥有了入门所需的一切。您可以学习 HTML 并使用 Web 浏览器进行实验，以找出如何创建任何您能想象到的网页。
广告
为了讨论网页及其工作原理，您需要了解四个简单的术语（如果您第一次阅读时觉得有些术语听起来像技术行话，请不要担心）：
- 网页 - 网页是一个简单的文本文件，它不仅包含文本，还包含一组 HTML 标签，这些标签描述了当浏览器在屏幕上显示文本时应如何格式化。这些标签是简单的指令，告诉 Web 浏览器页面显示时应如何呈现。标签告诉浏览器进行诸如更改字体大小或颜色、或将内容排列成列等操作。Web 浏览器解释这些标签以决定如何在屏幕上格式化文本。
- HTML - HTML 代表 超文本标记语言 (Hyper Text Markup Language)。“标记语言”是一种计算机语言，描述了页面应如何格式化。如果您只想显示一长串没有格式的黑白文本，那么您不需要 HTML。但如果您想更改字体、添加颜色、创建标题并在页面中嵌入图形，HTML 就是您使用的语言。
- Web 浏览器 - Web 浏览器，如 Netscape Navigator 或 Microsoft Internet Explorer，是一种计算机程序（也称为软件应用程序，或简称应用程序），它完成两项工作：Web 浏览器知道如何访问互联网上的 Web 服务器并请求页面，以便浏览器可以通过网络将页面拉取到您的机器中。Web 浏览器知道如何解释页面中的 HTML 标签集，以便按照页面创建者预期的方式在您的屏幕上显示页面。
- Web 服务器 - Web 服务器是一段计算机软件，能够响应浏览器对页面的请求，并通过互联网将页面传送到 Web 浏览器。您可以将 Web 服务器想象成一个公寓大楼，每个公寓都存放着某个人的网页。为了将您的页面存储在该大楼中，您需要支付空间租金。住在这个大楼里的页面可以向世界各地任何人显示和查看。您的房东被称为您的主机，您的租金通常被称为托管费用。每天，数百万个 Web 服务器通过我们称为互联网的网络向数千万人的浏览器传送页面。阅读Web 服务器如何运作了解此过程的详细信息。
不使用服务器，即可轻松地实验网页。您的浏览器可以查看您在个人电脑上创建的网页。一旦您了解如何创建自己的页面，您很可能会希望将它们“放到服务器上”，以便世界各地的人们能够加载并阅读您的页面。我们将在本文末尾讨论如何实现这一点。
查看页面源代码
让我们来看看网页的“核心”。这是作者输入的原始文本和 HTML 标签，由浏览器解释后生成您在互联网上实际看到的网页。用鼠标右键点击页面上任何空白区域，选择“查看源代码”。一个新窗口将出现，显示一些可能看起来相当专业和陌生的单词和字符。这些单词和字符，统称为您即将学习的 HTML 编程代码。该代码中的每个元素都称为 HTML 标签。不要被它看起来的复杂性吓倒——您会惊讶于它实际上有多么简单。当您查看完页面源代码后，只需关闭源代码页面即可返回本文。
您可以通过这种方式查看互联网上几乎任何页面的“幕后”。当您更深入地参与到网页设计中时，您可能会发现自己会查看复杂网页的源代码，以学习作者或页面设计者用来创建如此有趣布局的代码。
广告
现在，让我们学习许多标签的含义，并开始创建一个简单的页面。
HTML 标签
一个 HTML 标签是一个代码元素，它告诉 Web 浏览器如何处理您的文本。每个标签将以字母或单词的形式出现在 <（小于号）和 >（大于号）之间。
示例：<center><body>
为了告诉 Web 浏览器“结束”您刚才指示的操作，在结束标签中使用斜杠
示例：</center></body>
大多数标签都成对出现，有“开始”和“结束”标签，但这并非绝对规则。
您创建的任何网页在页面开头都将包含以下标签
- <HTML>：告诉 Web 浏览器这是 HTML 文档的开头
- <HEAD>：告诉 Web 浏览器这是页面的头部（您稍后将学习“HEAD”标签之间会包含什么）
- <TITLE>：告诉 Web 浏览器这是页面的标题
- <BODY>：告诉 Web 浏览器这是网页内容的开始——您想在页面上说和看到的所有内容都将跟随此标签。
结束任何网页所需的标签是
- </BODY>
- </HTML>
在下一节中，我们将了解如何创建一个简单的网页。
创建简单网页
创建网页的方法有很多种。数百家公司都创建了各种工具来帮助完成这一过程。然而，我们在这里的目标是了解网页真正的工作原理，而不是让工具将过程隐藏起来。因此，我们将使用最简单的工具——您机器上已有的工具。
在您的机器上，您有一个程序或应用程序，可以创建简单的文本文件。在 Windows 机器上，此应用程序名为记事本 (Notepad)。在 Macintosh 上，此程序名为SimpleText。如果您找不到这些程序，也可以使用基本的文字处理程序，如 WordPerfect 或 Microsoft Word。
广告
- 注意
- 在 Windows 95/98 环境中，点击“开始”按钮，点击“程序”，点击“附件”，然后点击“记事本”。
- 在 Windows 3.1 环境中，点击“附件”（在程序管理器中），然后点击“记事本”。
- 在 Macintosh 环境中，点击“Macintosh HD”，点击“应用程序”，然后点击“SimpleText”。
一旦您在屏幕上打开了正确的程序，请将以下 HTML 文本输入（或剪切并粘贴）到窗口中
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello there. This is my first page!
</body>
</html>
无论您是将标签和文本并排、逐行还是缩进放置，都不会影响文本在浏览器窗口中的显示方式。无论您在标签中使用大写还是小写字母，也都没有区别。
现在您需要将此文件保存到某个位置，以便您稍后可以找到它。将其保存到桌面，或者更好的是，保存到您设置的用于存放您将要创建的所有页面的目录中。将其保存为文件名 first.html。
接下来，在您的 Web 浏览器（例如 Microsoft Internet Explorer 或 Netscape Navigator）中打开该页面。所有 Web 浏览器都有办法打开存储在本地机器上的文件。在 Internet Explorer 和 Netscape 中，从窗口顶部的“文件”菜单中选择“打开文件”。打开文件 first.html。当您在浏览器中打开它时，它看起来会像上面的图片。
此图中标识了三件事
- 您可以看到该页面的标题是“我的第一个页面”。
- 您可以看到该页面的主体包含文字“大家好。这是我的第一个页面！”
- 您可以看到地址窗口中显示的 URL 是来自本地硬盘的 C:WINDOWSDESKTOPfirst.html，而不是通常情况下从互联网服务器接收页面时 URL 所包含的 http://...。
通过查看构成您第一个页面的 HTML 文本，您可以准确地看到该页面是如何获得其标题和主体的。
现在您已经创建并查看了您的第一个网页，您正朝着成为网页专业人士的道路迈进。了解网页工作原理的关键是学习越来越多的 HTML 标签，这些标签让您可以自定义页面。您还需要了解可以帮助您为页面创建表格、框架和图形的工具。本网页系列将指导您获取所需的所有信息。
基本 HTML 格式
您将一直使用此页面上的基本 HTML 标签——它们完成了大多数网页上 90% 的格式化工作。一旦您学会它们，您就离成为 HTML 高手不远了！
- 如果您喜欢我们上一页讨论的“first.htm”文件，您可以将 HTML 输入其中并创建完整的网页。请记住将您想要显示在网页上的所有信息放在 <body> 和 </body> 标签之间。通过添加新标签并查看结果来试验您的页面。
让我们开始吧！
广告
粗体、斜体和下划线
通过在文本开头添加标签：<b>，并在您希望粗体属性结束的位置添加结束标签：</b>，使任何文本变为粗体。
这是<b>粗体</b>。这是粗体。
要使用斜体，请以相同方式使用这些标签
<i>... </i>这是<i>斜体</i>。这是斜体。
要使用下划线，请使用这些标签
<u>...</u>这是<u>下划线</u>
换行和段落
尽管您输入的文本可能包含回车符、制表符和额外空格，但浏览器不会识别它们。您必须使用标签才能在 HTML 文档中创建空白空间。
<br> 创建一行与另一行之间的换行。您可以将多个此类标签一起使用以创建空白空间。
<p> 在两行文本之间创建额外空间。如果您在一行文本中放置 <br>，它只会换行；如果您使用 <p>，它将既换行又创建额外空间。
<hr> 创建水平线或水平规则。
制表符
没有正式的 HTML 标签来在文档中创建“制表符”。许多网页设计者通过创建表格或使用空白图片来创建空间（表格和图片将在本文后面解释）。一种缩进文本的方法是使用 `
- ` 标签，让浏览器认为您即将创建一个“列表”。列表会自动缩进文本。用 `
` ... `` 标签也会缩进文本。
另一种选择是 `
` 标签。此标签用于显示预格式化文本——即按原样显示的文本。在 `` 和 `` 标签之间的任何文本都将在浏览器中按照其在源代码中的显示方式出现。
字体颜色和大小
颜色
通过使用以下标签更改任何文本的颜色
<font color="color">...</font>
广告
这是<font color="blue">蓝色</font>。
这是<font color="green">绿色</font>。
大多数标准颜色都将起作用。也可以尝试“浅色”和“深色”，例如“lightblue”或“darkgreen”。您还可以指定特定的十六进制颜色代码，例如：<font color="#864086">。有关十六进制颜色代码的列表，请访问December.com: HTML。
如果您想为页面的整个文本指定特定颜色，请在 `
` 标签内添加 text="color"。示例：<body text="blue">
即使您为整个文本指定了颜色，您仍然可以使用上面学到的标签更改该文本的任何部分的颜色。
字体类型
通过使用以下标签更改任何文本的字体类型：<font face="font type"> ... </font>
这是<font face="arial">arial</font>。
这是<font face="geneva">geneva</font>。
（注意：如果您指定的字体类型在用户计算机上不可用，则字体类型将默认为浏览器默认值，通常是 Courier 或 Times New Roman；因此，如果您希望能够控制用户浏览器中显示的内容，最好坚持使用标准字体类型。）
大小
通过使用以下标签更改任何文本的大小
<font size=value>...</font>
示例：<font size=4>
大多数浏览器上的默认字体大小为“3”，因此任何大于 3 的值都会使文本变大，而任何小于 3 的值都会使其变小。
您还可以通过增加或减少默认字体大小来更改字体大小。
示例：<font size=+4>，或 <font size=-2>
此字体<font size=+2>增加了 2</font>
此字体<font size=+1>增加了 1</font>
此字体<font size=-2>减少了 2</font>
此字体<font size=-1>减少了 1</font>
您还可以使用 `` 和 `` 标签更改字体大小
这是<small>小</small>文本。
这是<big>大</big>文本。
标题
标题标签也会更改字体大小，为段落或故事创建粗体“标题”
<h1>这是一个 H1 标题。</h1>
<h2>这是一个 H2 标题。</h2>
<h3>这是一个 H3 标题。</h3>
用以下标签结束任何字体元素更改
</font>
或者，使用您使用的特定标签的对应结束对
示例：</small>、</big>、</H2>
在下一节中，我们将了解如何添加背景颜色。
添加背景颜色
通过在 `
` 标签内添加 bgcolor="color" 来更改页面的背景颜色。示例：<body bgcolor="yellow">
广告
同样，如字体颜色更改部分所述，您可以使用大多数标准颜色，或使用十六进制颜色代码。
创建列表
您可以创建三种类型的列表：无序列表、有序列表和描述性列表。
无序列表
无序列表看起来像这样
- 加利福尼亚
- 俄勒冈
- 北卡罗来纳
无序列表是由 `
- ` 标签开始的带项目符号的列表。`
- ` 标签（List Item 的缩写）在列表中的每个项目之前使用。结束标签 `
示例
<ul> <li>California <li>Oregon <li>North Carolina </ul>
通过在 `
- ` 标签内添加指定，可以将项目符号类型更改为“circle”（圆圈）、“square”（方块）或“disc”（实心圆）
- 橙子
- 葡萄
- 樱桃
- ` 标签用在每个项目之前。
示例
<ol> <li>oranges <li>grapes <li>cherries </ol>
您可以通过在 `
- ` 标签内添加“type”指定来更改组织类型。
- ` 标签应与您希望对齐在边距上的文本对应；`
- ` 对应您希望缩进的行。
在下一节中，我们将了解如何链接到其他站点。
<ol type="A"> 按大写字母排序列表：（A、B、C...）
<ol type="a"> 按小写字母排序列表：（a、b、c...）
<ol type="I"> 按罗马数字排序列表：（I、II、III...）
<ol type="i"> 按小写罗马数字排序列表：（i、ii、iii...）
如果您想从指定值（例如“6”）开始有序列表，请使用以下“start”和“value”标签
<ol start=5> <li value=6>
描述性列表
描述性列表创建了一个文本项目列表，其中第二行缩进
Marshall Brain Founder of 十万个为什么以这种方式使用以下标签
<dl> <dt>Marshall Brain <dd>Founder of 十万个为什么 </dl>
`
<ul type="circle"> <li>California <li>Oregon <li>North Carolina </ul>
<ul type="square"> <li>California <li>Oregon <li>North Carolina </ul>
有序列表
有序列表看起来像这样
有序列表是按逻辑编号顺序排列的项目列表。使用 `
- ` 和 `
链接到其他站点
网页最棒的部分之一是能够创建到 Web 上其他页面的链接。使用以下锚点标签，您可以引用他人的作品、指向您喜欢的其他页面等
<a href="URL">
广告
在锚点标签后输入页面标题，并用以下标签关闭锚点
</a>
示例
<a href="https://www.十万个为什么.com"> 十万个为什么 </a>
这在您的页面上会是这样
您还可以轻松地将带项目符号的列表与链接结合，创建链接列表。
新窗口
如果您不希望访问者在点击您指向其他站点的链接时离开您的页面，请将此标签添加到您的锚点标签中。当链接被点击时，它不会将用户从您的站点带到其他人的站点，而是简单地打开一个空白新窗口来显示链接的目标
target="_blank"
示例
<a href="https://www.十万个为什么.com" target="_blank">
链接颜色
蓝色是链接的标准默认颜色。但是您可以通过在 `
` 标签内插入这些标签来更改页面上链接信息的颜色- link="color"
- vlink="color"
Vlink 代表“已访问链接”。链接在被访问后会改变颜色。如果您不希望已访问链接改变颜色，只需将相同的颜色属性赋予 link 和 vlink。
示例：<body link="green" vlink="green">
链接到接收电子邮件
如果您想接收阅读您页面的人发送的电子邮件，请使用以下锚点标签
<a href="mailto:youremailaddress">
然后，在标签之后再次输入您的电子邮件地址（或您希望在页面上显示的任何链接文本）。用 `</a>` 关闭字符串
</a>
示例
<a href="mailto:example@十万个为什么.com"> 联系我 </a>
这在您的页面上会是这样
创建指向您自己页面的链接
锚点标签不仅用于链接到互联网上的页面。您还可以使用它们链接到您自己页面内的信息。在这种情况下，您可以省略前缀“http://www”而只包含 HTML 文档文件名
示例：<a href="company.htm"> 公司信息 </a>
要链接到您页面的特定部分，您需要命名您引用的部分，并将该名称包含在链接的锚点标签中。方法如下：
通过在您希望链接指向的特定部分之前立即插入以下标签来命名页面的任何部分。您可以选择任何单词、字母或字符作为名称
<a name="name">
示例：<a name="5">
在锚点标签中，您可以通过在名称前加上“#”来引用页面的这一部分。如果命名的链接指向包含该链接的页面内的位置，则链接到此命名部分的锚点标签将如下所示
<a href="https://www.十万个为什么.com/#5"> 公司信息 </a>
如果命名的链接指向与链接所在页面不同的 HTML 文档，则也应包含 HTML 文档文件名。
示例：<a href="https://www.十万个为什么.com/company.htm#5"> 公司信息 </a>
在下一节中，我们将了解如何添加图片。
添加图片和图形
使用以下标签将任何数字图片放置在您的页面上
<img src="图片文件名.扩展名">
广告
网页上的图片是 GIF 文件（发音为“jiff”）或 JPG 文件（发音为“jay-peg”）。任何图片都将包含其中一个扩展名，因此如果您有一张名为“logo”的图片，它将被标记为“logo.gif”或“logo.jpg”。
请务必将您将在网页上显示的图片和图形存储在与您的“html”文件相同的文件夹或目录中。否则，您的计算机将无法找到您要显示的图片。此外，请务必准确输入图片名称，与它保存到该文件夹中的名称一致——文件名是区分大小写的。
对齐
默认情况下，您的文本和图片在浏览器中显示时是左对齐的，这意味着文本和图形会自动与左边距对齐。如果您想将页面的任何部分“居中”显示，可以使用以下标签
<center>
您可以使用相应的结束标签来结束居中
</center>
您还可以对“分区”进行编码，从一个单词到一行文本再到整个页面，以某种方式对齐。
使用分区对齐标签开始您的分区，包括您希望文本或图片采用的对齐方式（即右对齐、左对齐、居中）
示例：<div align="center">
用以下标签结束分区对齐
</div>
有了您在本文中刚刚学到的信息，您可以开始创建非常有趣和引人注目的网页。尝试使用我们刚刚讨论的工具和标签来创建一两个网页。如果您渴望让全世界都看到您的杰作，那么请跳到文章“让您的页面上线”以了解如何发布您的新网页。
创建表格
目前，用于创建巧妙排版网页的最广泛使用的 HTML 工具之一是表格。通过掌握表格，您不再仅仅是“创建”一个页面，而是“设计”一个页面。
您可以使用的表格种类繁多，从简单的方框到非常复杂的设计布局。在本文中，我们将讨论表格基础知识，以及一些您可以尝试的技巧和提示，以设计一个人们喜欢访问的令人兴奋的页面。
广告
同样，与所有您希望在浏览器窗口中显示的信息一样，请确保您的表格位于 HTML 文档的 `
` 和 `` 标签之间。使用以下标签开始您的表格<table>
表格中的每个水平行都以以下标签开始
<tr>
并且，行内的每条数据都以以下标签开始
<td>
考虑以下表格图示
A1 A2
B1 B2
C1 C2
这里我们有三行两列。
为了编写此图示的骨架代码，以下标签按以下顺序使用
<table> 开始表格
<tr> 开始第一行
<td> 开始第一个数据“单元格”（A1）
</td> 关闭 A1 单元格
<td> 开始第二个单元格（A2）
</td> 关闭 A2 单元格
</tr> 关闭第一行
<tr> 开始第二行
<td> 开始第二行的第一个数据单元格（B1）
</td> 关闭 B1 单元格
<td> 开始 B2 单元格
</td> 关闭 B2 单元格
</tr> 关闭第二行
<tr> 开始第三行
<td> 开始第三行的第一个数据单元格（C1）
</td> 关闭 C1 单元格
<td> 开始 C2 单元格
</td> 关闭 C2 单元格
</tr> 关闭第三行
</table> 关闭表格
许多设计者喜欢缩进表格的某些部分，以使代码更易于阅读。例如，如下所示。
现在我们将向骨架表格添加数据和边框。边框是表格的轮廓。边框标签 (border="value") 放置在初始表格标签内。您可以通过分配特定值来指定轮廓的厚度（我们将分配值为“1”）。最好尝试不同的值，以了解它们在浏览器中显示的效果。如果您不希望显示边框，请分配值为“0”。
（注意：即使您不打算在表格周围显示边框，最好还是从可见边框开始，至少在您解决可能影响表格显示方式的任何“bug”之前。）
将以下代码和数据输入（或剪切并粘贴）到您的 HTML 文档中
<table border=1> <tr><td>A1 </td> <td>A2</td> </tr> <tr><td>B1 </td> <td>B2</td> </tr> <tr><td>C1 </td> <td>C2</td> </tr> </table>
在您的浏览器中显示的表格应该与前面所示的图示非常相似。
您可以为表格分配许多属性。接下来将讨论允许您以多种创意方式格式化表格的标签。
在下一节中，我们将了解如何更改表格的背景颜色。
更改表格背景颜色
通过在初始“table”标签内使用“bgcolor”标签来更改整个表格背景的颜色
示例：<table bgcolor="yellow">
广告
也可以为表格中的行或单元格分配彩色背景。只需将 bgcolor="color" 添加到 `
示例：<tr bgcolor="yellow">
表格大小
表格中行和列的宽度和高度将自动扩展以适应数据长度和/或浏览器窗口空间。要指定宽度和高度，请在起始“table”标签内包含像素或百分比值
示例：<table width=300 height=400>
宽度和高度也可以为单个数据单元格指定，而不是整个表格。为此，将 width="value" 添加到相关的 `
同样，最好简单地试验像素和百分比值，以了解它们在浏览器中的显示效果。
单元格内边距
“cellpadding”标签（以像素为单位）指定每个单元格边缘与每个单元格内数据之间的空间量。在起始“table”标签内使用它
示例 1：<table border=1 cellpadding=5>
示例 2：<table border=1 cellpadding=15>
单元格间距
“cellspacing”标签（以像素为单位）指定每个单元格之间的空间量。在“table”标签内使用它
示例 1：<table border=1 cellspacing=5>
示例 2：<table border=1 cellspacing=15>
表格标题
要在表格内为列或行创建粗体居中的“标题”，请在第一行的代码中使用 `
示例
<table border=1> <tr><th>Column 1</th> <th>Column 2</th></tr> <tr><td>A</td> <td>B</td></tr> <tr><td>C</td> <td>D</td></tr> </table>
在下一节中，我们将介绍对齐和单元格填充。
对齐和单元格填充
默认情况下，表格中的所有单元格内容（表格标题除外）都垂直居中并左对齐。要使单元格内容以不同方式对齐，请在 `
对于水平对齐，值可以是 left（左）、right（右）或 center（居中）
广告
示例：<tr align="center">
对于垂直对齐，值可以是 top（顶部）、bottom（底部）或 middle（居中）
示例：<td valign="top">
您还可以调整整个表格的对齐方式，以决定它在页面上的显示位置。通过在初始“table”标签内插入标签 `
单元格跨度
当一个单元格跨越表格中两个或更多其他单元格时，就会发生“跨越”。
对于列跨越，将标签 ` 对于行跨越，将标签 ` 您还可以将上一章中学到的许多属性应用于表格内，例如字体大小、类型和颜色，插入图片，制作列表和添加链接。只需将相应的标签添加到您希望格式化的特定单元格中，紧随该单元格的标签之后。 尝试并练习您在本文中学到的各种工具和标签。在网页上使用表格时，创意可能性是无限的。堆叠图片和无边框彩色框以创建无缝设计，或在无边框表格中嵌套无边框表格，有些带颜色，有些不带，以创建引人注目的布局。网页设计的限制会随着一点点想象力、创造力和表格的使用而扩展。 一些网页设计者在其页面上使用框架，用于设计目的并使网站更具用户友好性。可以说，框架使得导航网站更容易，而不会迷失方向。当网页的一部分保持静止，而同一页面的另一部分在点击链接时发生变化时，您就知道使用了框架。要查看带有框架的网页，请访问伯奇水族馆。 在伯奇水族馆页面中，页面的顶部和底部保持不变，而中间部分根据所选链接而变化。此页面分为三个框架，这意味着同时显示三个不同的 HTML 文档。您可以选择将页面划分为多少个部分，以何种方式划分，以及每个框架中要包含哪些 HTML 文档。 广告 首先，仔细规划您的页面非常重要。从行和列的角度考虑布局。您想显示多少个水平部分或行？多少个垂直部分或列？您估计每个部分需要多少空间，无论是像素还是百分比？ 框架集文档 一个框架集文档是一个 HTML 文档，它指示浏览器以特定方式安排网页内容。在框架集文档中，“frameset”标签取代了“body”标签。 您将以常规 HTML 格式开始框架集文档 <html><head><title>标题</title></head> 接下来，插入“frameset”标签 示例：<frameset rows="20%, 80%"> 此标签表示页面将分为两部分，顶部和底部，由标签内的两个值指示。如果需要三行，您将包含三个值 示例：<frameset rows="10%, 50%, 40%"> 数字值告诉浏览器每个部分在浏览器窗口中将占据的空间量。您可以使用百分比值或像素值。星号“*”也可以代替值使用，表示特定部分可以使用浏览器窗口中任何可用的空间 示例：<frameset rows="100, *, 50"> 此标签表示页面将分为三行。第一个（顶部）框架将占据 100 像素空间，底部框架将占据 50 像素空间，中间框架将占据浏览器窗口中剩余的任何空间。 如果您的页面要划分为列，请使用用于列的 frameset 标签以及数字值 示例：<frameset cols="200, *"> 此标签告诉浏览器将页面分为两列。左列将占据 200 像素空间。右列将占据浏览器窗口中剩余的任何空间。 您还可以将框架集行和框架集列结合起来，创建相当复杂的布局。框架集文档的“嵌套”将在本文后面讨论。 如果您尚未这样做，请继续创建将占据页面上每个框架的 HTML 文档。您可以使用您在之前章节中创建的 HTML 文档。 现在您将在您的框架集文档中添加“frame src”标签，这将告诉浏览器每个框架中放置哪个 HTML 文档 广告 示例 此示例显示了一个框架集文档，它将网页分为两列或两个框架。在左侧框架中，200 像素的空间将显示文档“links.htm”。页面的其余部分，即右侧列，将显示文档“information.htm”。您还可以看到用于关闭框架集文档的标签 </frameset> </html> 通常，网页包含框架是为了显示或链接到同一站点内的附加信息。网站伯奇水族馆就是使用框架链接到同一站点内信息的示例。当点击链接时，链接菜单栏将信息拉入网页的中间框架，而不会干扰页面的外部框架。 为了让浏览器知道将链接信息放置到哪个框架中，您必须“命名”您的框架。如果您未指定哪个框架接收新信息，则链接菜单框架将被链接信息本身替换，从而破坏您框架页面的外观和目的。 要命名框架，只需在框架集文档的“frame src”标签内放置一个“name”标签即可。您可以为每个框架选择任何名称。 示例 <frame src="links.htm" name="menu"> <frame src="information.htm" name="info"> 命名框架后，您可以通过添加“target”标签，然后是框架名称，来指定您希望链接信息放置到哪个框架中。 示例：<a href="https://www.十万个为什么.com/company.htm" target="info"> 公司信息 </a> 这告诉浏览器将链接信息显示到名为“info”的框架中。 与常规 HTML 文档一样，框架集文档以 .htm 或 .html 扩展名保存。请务必将框架集文件与将出现在其框架中的 HTML 文档保存在同一文件夹中。 当您在浏览器中打开框架集文档时，您应该能够看到一个分屏，每个框架内都有一个单独的 HTML 文档。 在下一节中，我们将了解如何移除滚动条和边框。 如果您喜欢页面“整洁”的外观，没有滚动条和边框，您可以在“frame src”标签内放置标签来指定这一点。 通过添加标签“scrolling=no”来移除滚动条。 广告 示例：<frame src="links.htm" scrolling=no> 通过添加标签“frameborder=0”来移除边框。 示例：<frame src="links.htm" frameborder=0> 您还可以通过添加标签“marginwidth=value”和“marginheight=value”来指定每个框架的边距宽度和高度。您可以将边距设置为任何您想要的像素值。同样，将这些标签插入到“frame src”标签内。 可以组合各种行和列的框架，创建嵌套在其他框架集文档中的框架集文档。实现此效果所需的标签组织可能相当复杂。请参阅页面顶部的图片，了解带有“嵌套”框架的简单页面示例。 为此布局创建的框架集文档是 分解开来，每行“frame”标签表示如下 <frameset rows="20%, 80%"> 此文档中有两行。顶行占据可用垂直空间的 20%。底行占据 80%。实际上，这些值指定了每行的高度。 <frameset cols="70%, 30%"> 第一行中有两列。左列占据可用水平空间的 70%，右列占据 30%。实际上，这些值指定了每列的宽度。 <frame src="logo.htm"> HTM 文档“logo”将出现在第一行的第一列中。 <frame src="address.htm"> HTM 文档“address”将出现在第一行的第二列中。 </frameset> 第一列框架集已完成。 <frameset cols="85%, 15%"> 第二行中有两列。左列占据可用水平空间的 85%。右列占据 15%。 <frame src="info.htm"> HTM 文档“info”将出现在第二行的第一列中。 <frame src="links.htm"> HTM 文档“links”将出现在第二行的第二列中。 </frameset> 第二列框架集已完成。 </frameset> 整个框架集已完成。 框架是一个很棒的工具，您可以用来让您的网页更引人注目和动态。它们允许您在用户点击链接到您网站的另一部分或完全另一个网站时，仍然保持您页面的某些方面。要继续构建您梦想中的网页，请查看下一节关于图片的内容。 一旦您开始创建页面，您首先想添加的就是图形。人类是视觉动物，图形可以完全改变页面的特性。 一旦您开始创建页面，您首先想添加的就是图形。人类是视觉动物，图形可以彻底改变页面的特性。您可以使用微小的图形、细长的图形、更大的图片甚至动画。 广告 只需在您希望显示项目符号的位置插入图片标签，即可将图形变为项目符号；您无需使用 ` 细长图形可用作分隔符。较大的图形可用作徽标或插图——几乎任何您能想到的用途。 有两种方法可以获取图形图片：您可以从网上各种“免费剪贴画”网站下载它们，或者自己创建。一些提供免费图形和动画的网站包括Page Works、A-1 All Free Clip Art和 The Free Graphics Store。您还可以访问 The Free Site、Web Places 和Free Graphics来查找免费图片网站目录。 假设您访问一个免费图形网站，看到一张您喜欢的图片。如果您右键点击该图片，会弹出一个菜单，其中一个选项是“图片另存为...”。您应该将图片保存到您的网页所在的目录中。 如果您想创建自己的图片，您需要一个可以编辑 GIF 和 JPG 文件的程序。一个非常流行的网络图像编辑程序叫做 Paint Shop Pro。您可以通过点击此处获取副本。稍加练习，即使只有一点点艺术天赋，您很快就能像专业人士一样创建图片！ 如基本 HTML 格式标签部分所述，图片使用以下标签插入到网页中 <img src="文件名"> 您还可以将图片用作指向另一个页面或元素的链接。为此，只需在锚点标签后插入“img src”标签。务必包含“border=0”，否则图片周围会出现一个难看的边框。 示例：<a href="https://www.十万个为什么.com"><img src="hswlogo.jpg" border=0></a> 在此示例中，如果用户点击图片“hswlogo.jpg”，他们将被带到 十万个为什么 主页“https://www.十万个为什么.com”。 任何数字图片也可以用作页面的背景。为此，请在 ` 示例：<body background="hsw-logo.jpg"> 在下一节中，我们将了解如何标注图片。 您可以添加到图片标签的另一个有用但不强制的标签是“alt”。此标签为您的图片提供一个标签，当用户鼠标悬停在图形上时会显示。它还会在图片显示之前出现，在页面在浏览器中加载时，保持用户的兴趣。您可以使用“alt”标签插入任何您想要的消息。 示例：<img src="hswlogo.jpg" alt="HSW 公司信息"> 广告 我们收到相当多的电子邮件，来自在页面上添加图片时遇到问题的人。当 GIF 和 JPG 文件不显示时，它们通常显示为一个小的红色 X。 当您在页面上看到此问题时，这意味着一件事：您没有为图片输入正确的文件名。以下是您可以采取的一些步骤来解决问题 在下一节中，我们将了解如何对齐您的图片。 页面上图片的水平对齐是使用对齐部分中描述的标签和技术进行格式化的。快速回顾一下 将以下标签插入到“img src”标签内，用于图片相对于文本的垂直对齐 广告 align="bottom" 文本与图片的底部对齐。 <img src="https://cdn.hswstatic.com/gif/hsw-logo3.gif" alt="十万个为什么" border=0 align="bottom"> align="top" 文本与图片的顶部对齐。 <img src="https://cdn.hswstatic.com/gif/hsw-logo3.gif" alt="十万个为什么" border=0 align="top"> align="middle" 文本与图片的中间对齐。 <img src="https://cdn.hswstatic.com/gif/hsw-logo3.gif" alt="十万个为什么" border=0 align="middle"> 在上述每个示例中，图片默认左对齐，因此文本出现在其右侧。如果您希望文本在左侧而图片在右侧，您可以添加上面讨论的 ` 动画 GIF 为您的页面增添动感和闪光效果。创建动画 GIF 的一个好工具是The GIF Construction Set。使用此工具或类似的工具，您可以在动画序列中创建不同的帧，然后将它们卷成一个单一图片。 一旦您创建了一个出色的网页，您会希望将其放到 Web 服务器上供全世界查看。许多拥有 Web 服务器的服务和机构提供免费空间来发布您的页面。AOL 为其会员提供免费空间，许多大学也为学生提供空间。还有许多商业网站提供免费空间。这些选项唯一的缺点是您很可能必须在您的页面顶部或内部显示该网站的广告横幅。以下是其中一些免费的商业来源 您还可以选择付费给托管服务提供商以获取网络空间。大多数专业网站都选择这条路线。托管服务可以为客户提供大量空间、特殊选项和可靠性。使用托管服务还可以让您能够使用域名，即您自己独特的 URL。 广告 如果您有兴趣获取自己的域名，请访问 ICANN.org 上的认可注册商页面，该机构负责维护IP 地址和域名注册。在列出的任何网站上，您可以检查您正在考虑的域名是否可用，并购买一个吸引您的域名。如果您已有托管服务，则年度合同费用通常较低，因此当您认真考虑购买域名时，请首先联系托管服务商。大多数托管服务商也会为您注册域名，向 Network Solutions 提供 IP 号码和他们所需的其他信息。 有各种各样的托管服务可供选择，价格范围也各不相同。警惕许多“好得令人难以置信”的优惠。您可能会遇到速度慢的服务器、停机、无支持以及昙花一现的业务。 很棒的工具 一旦您的页面上线到服务器，您会想知道您获得了什么样的流量。像Show Stat、Hit Box或Site Meter这样的地方免费提供这项服务，并为您提供非常完整的统计数据。如果您只是想在页面上放置一个简单的计数器，FastCounter是一个不错的工具。 有许多工具可以帮助您改善您的网站。例如，这个免费工具将检查您的网站是否有拼写错误、网络加载时间、元标签、浏览器兼容性等。 我们将在下一节中学习元标签。 如果您计划将您的页面提交到搜索引擎（下一节将讨论），以便其他人可以找到它们，您将需要为您的页面添加 Meta 标签。两个最常见的 Meta 标签分别允许您指定页面的描述和一组关键词，您还可以声明各种其他内容。Meta 标签总是出现在 HTML 源代码的 ` <Meta Name="Description" Content="超过 50 篇精彩的“十万个为什么”文章的索引！"> 广告 <Meta Name="keywords" Content="how stuff works, how things work, the way things work, information, tutorials, explanation, explains, understand, understanding, tell me, students, teachers, study, educational"> <Meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "https://www.十万个为什么.com" on "1998.09.23T01:29-0800" r (n 0 s 0 v 0 l 0))'> 第一个标签是页面的描述。搜索引擎直接在其列表中使用此文本。如果您没有描述元标签，那么搜索引擎要么将您的描述留空，要么使用您页面的前一两句话。 第二个标签指示页面的额外关键词集。搜索引擎通常会索引页面上的每个单词，但在许多情况下，您在实际文本中不会使用某个单词，而该单词可能会被搜索您的页面的人使用。如果您知道人们经常拼错某个单词，那么您也可以将拼写错误的单词放入关键词列表中。 第三个标签是 RSAC 评级标签。以下是 RSAC 评级系统功能的描述，摘自 RSAC 网站www.rsac.org 某些浏览器配置为阻止未评级的页面，因此通过评级您的网站，您可以避免与这些浏览器相关的问题。通过使用 RSAC 评级您的网站，您还可以让人们准确了解您提供的内容类型。 如果您查看网络上其他页面的 HTML 源代码，还会经常看到许多其他标签。许多 HTML 工具会自动添加标签。例如，如果您使用 Microsoft Word 创建 HTML，Microsoft Word 会自动为页面应用以下两个标签 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <META NAME="Generator" CONTENT="Microsoft Word 97"> 在所有情况下，元标签都不会影响您的页面在浏览器中的显示方式。描述和关键词标签是最常用的。 在您花费数小时创建网站并将其发布到服务器上之后，您会非常希望人们来访问它。但为了让人们访问您的网站，您必须推广它。很少有人会偶然发现您的网站——总得有什么东西引导他们去那里。 您可以使用许多不同的技术来吸引人们访问您的网站。本章将教您许多可以用来增加网站流量的方法。 广告 搜索引擎会读取网页并索引页面中的所有单词。搜索引擎的用户可以通过搜索关键词来找到您的页面。搜索引擎的好处是它们让您能够找到所有内容，其中包含某个单词或一组单词。搜索引擎的缺点是它们通常会返回大量无用信息。 从网站推广的角度来看，搜索引擎的好处是很容易让您的网站被收录。每个搜索引擎的页面上某处都会包含一个“提交网站”链接，或类似的链接。使用此链接，您将能够填写一个表格（有些比其他更长），请求将其网站收录。您的网站不会立即被添加，有时需要经过一段时间的多次提交才能被收录。每个搜索引擎都不同。此外，请务必单独提交您的每个页面，以确保每个独立页面的关键词都被包含在内。 以下是一些主要搜索引擎的“提交网站”页面的 URL 列表 注册链接网站 链接网站以某种分层结构列出各种网站。每个网站被放置在一个类别中并附有简短描述。Yahoo 是此类网站的最佳示例，但现在有许多其他网站试图以不同方式做同样的事情。 大多数这些网站收录新网站的速度非常慢，因为在将每个提交的网站添加到链接集合之前，都必须进行人工审核。以下链接指向这些链接网站的首页，因为在添加您的 URL 之前，您必须先查看网站以确定提交的类别。一旦找到正确的类别，请寻找“添加 URL”按钮来添加您的网站。 在下一节中，我们将介绍不同类型的列表服务。 如果您的网站与商业相关，您应该将其提交到以下所有网站。这些网站将在其目录中列出您的业务，有些是免费的，有些则收取费用 注册奖项网站 奖项网站要么向世界展示您的网站（通常作为独特或“酷”网站展示一小时或一天），要么为您的网站颁发某种奖项，您可以以粘贴在您网站上的徽标形式展示。在所有情况下，您都必须在这些网站注册才能获得认可。以下是一些最受欢迎的奖项网站 广告 注册服务 以下列出的公司将为您的网站在数百个搜索引擎上注册，有时会收取费用。它们中的大多数还提供其他网站推广服务。其中一些网站提供有关自行推广网站的信息，因此您可能希望访问它们，看看是否能获得一些想法。 需要认识到的关键点是，特别是当考虑是否使用这些服务进行搜索引擎注册时，它们所做的一切您自己也能做到。您可以像它们一样注册您的网站，您需要知道的一切都在本系列中。这仅仅是如何最好地利用时间的问题。 我们将在下一节中探讨互惠链接。 互惠链接是一种“你帮我，我帮你”的活动。其理念是找到与您的网站相关的网站，并向它们发送电子邮件，请求它们链接到您。作为回报，您通常会提供反向链接给它们。 建立互惠链接的最佳方式是简单地浏览网络，寻找相关网站并向它们发送电子邮件。您会发现回复率可能只有 25%。但尝试一下没有坏处，您在网络上的链接越多，获得的流量就越多。一个恰到好处的链接可以对新网站获得的流量产生巨大影响。 广告 以下是创建互惠链接的一些资源 如果您需要快速获得流量，最好的方法之一就是向高流量网站付费以宣传您的服务。付费广告通常以长条形、细长、闪烁的广告形式出现在网页顶部，它们被称为横幅广告（尽管还有很多其他类型的广告——详情请查阅《网页广告如何运作》）。以下是横幅广告的三个示例 大多数大型网站，日访问量在10,000或更多访客的范围内，都有标准的广告计划。典型的费率是每展示您的广告1,000次，大约15到70美元。关键是找到一个能让您将广告精准投放给对您的信息感兴趣的人的网站。 有关横幅广告的更多信息，请参阅《横幅广告如何运作》。以下链接提供了关于一些大型搜索引擎广告计划的信息。大多数搜索引擎都提供某种形式的广告——在主页上查看一下，您通常会找到一个指向网站广告信息的链接 以下文章将有助于您了解更多关于网站推广和营销的信息 要获取更多关于网页的信息，您可以使用“查看源代码”功能从您觉得不错的网页中获取。如果您找到了一个您喜欢的网页，您可以查看该页面的 HTML 代码，了解它们是如何创建的。这是学习新的 HTML 技术的好方法。 如果您想查看一些视觉上令人惊叹的网站集合，为您的页面获取灵感，请尝试访问富裕生活方式页面。此页面链接到大约100个网站——其中许多都非常出色。特别请查看汽车和珠宝制造商汇集的网站。当您找到喜欢的外观时，请查看该页面的 HTML 源代码。 广告 有关 HTML、网页和相关主题的更多信息，请查看下一页的链接。 请复制/粘贴以下文本以正确引用这篇 十万个为什么.com 文章` 标签内。以下是一个代码示例
<table border=1>
<tr><td colspan=2>This cell spans over two columns </td>
<td>This cell spans over one column </td> </tr>
<tr align="center"> <td>A </td> <td>B </td> <td>C </td> </tr>
</table>
` 标签内。例如
<table border=1>
<tr><td rowspan=2>This cell spans over two rows </td>
<td>A</td><td>B</td></tr><tr><td>C</td><td>D</td>
</tr> </table>
创建框架
添加框架源
<html><head><title>Frameset Test</title></head> <frameset cols="200,*">
<frame src="links.htm"> <frame src="information.htm"> </frameset> </html>
命名您的框架
保存和查看您的文档
移除滚动条和边框
多重框架
<html><head><title>Frame Test</title></head> <frameset rows="20%, 80%">
<frameset cols="70%, 30%"> <frame src="logo.htm"> <frame src="address.htm">
</frameset> <frameset cols="85%, 15%> <frame src="info.htm">
<frame src="links.htm"> </frameset> </frameset> <html>
图片
` 标签。
图片标注
如果您的图片不显示...
` 的标签。在浏览器中显示页面。如果您仍然看到红色 X 而不是图片，那么...
图片对齐
` 标签来居中或右对齐或左对齐。` 标签来结束对齐。
` 图片对齐标签。
创建动画 GIF
让您的页面上线
Meta 标签
“娱乐软件咨询委员会是一个独立的非营利组织，总部设在华盛顿特区，通过一个开放、客观的内容咨询系统，使公众，特别是家长，能够对电子媒体做出知情决策。RSACi 系统向消费者提供有关软件游戏和网站中性、裸露、暴力、冒犯性语言（粗俗或仇恨动机）程度的信息。迄今为止，RSACi 已集成到 Microsoft 的浏览器 Internet Explorer 和 MicroSystem 的 Cyber Patrol 软件中。CompuServe（美国和欧洲）也已承诺使用 RSACi 系统对其所有内容进行评级。”
推广您的网站
注册搜索引擎
列表服务
互惠链接
付费广告
更多网站推广信息
概念
引用此文！
