落宝金钱和五色神光:网页的工作原理1

来源：百度文库 编辑：九乡新闻网 时间：2024/05/13 19:39:59
网页的工作原理
引言
您曾经对网页的原理感到好奇吗？您曾经想过要创建自己的有标题、文本和图形图标的完整网页吗？您曾经听说过“HTML”这个词并想知道是什么意思吗？如果是这样，请往下阅读……
在本文中，我们将探讨网页的科学和艺术，并用一些技巧来实验一番，今天在您自己的计算机上就可以试用这些技巧。我们已经创建一个工具，可让您试用HTML并立即查看其效果。原来，创建网页是件很容易的事情，同时又非常有趣，根本不是高不可攀。到您读完这篇文章时，您就能胸有成竹地开始构建您自己的页面了！
基础准备知识
此时，以下几点您已经做好了准备：
您正坐在计算机前。 您正在使用网络浏览器阅读本页，浏览器可能是Microsoft Internet Explorer、Firefox或Netscape。 您希望学习网页的工作原理，也许您希望学习创建自己页面的艺术。
因为您正坐在计算机前，您有网络浏览器，有学习的渴望，所以您已经具备开始创建页面所需要的一切。您可以学习HTML并用您的网络浏览器来实验，从而学会如何创建您能想象得出的任何种类的网页。
为了能讨论网页和研究网页的工作原理，您可能希望了解4个简单的术语（如果您在第一次读到这些术语时觉得晦涩难懂，不要担心）：
网页——网页是一个简单的文本文件，它不仅包含文本，而且包含一套HTML标记，这些标记说明了当浏览器在屏幕上显示页面时，该文本应该有什么样的格式。标记是一些简单的指令，能告诉网络浏览器在显示页面时该页面看起来应该是什么样的。标记能告诉浏览器做一些事，诸如改变字体大小或颜色，或在栏目中安排内容。网络浏览器能解释这些标记，从而判断如何格式化文本并在屏幕上显示。
HTML——HTML代表“超文本标记语言”。“标记语言”是一种计算机语言，它说明如何格式化页面。如果您想做的一切仅仅是显示一长串黑白文本，没有任何格式，那就不需要HTML。但是如果您想改变字体、添加颜色、创建标题和在页面中镶嵌图形，那么HTML就是用来实现这一切的语言。
网络浏览器——网络浏览器，例如Netscape Navigator或Microsoft Internet Explorer，是一个计算机程序（也称为软件应用程序，或简称应用程序），它能做两件事：
网络浏览器知道如何访问互联网上的网络服务器并请求一个页面，它能够通过网络将该页面拉到您的计算机上。 网络浏览器知道如何解释页面内的一整套HTML标记，以便按照页面创建者的意图把该页面显示在您的屏幕上。

网络服务器——网络服务器是一个计算机软件，它能对浏览器索要页面的请求做出回应，并通过互联网向网络浏览器提供该页面。您可以把网络服务器想象成一座公寓大楼，在每个公寓房间里存放着某人的网页。为了在公寓大楼里存储您的页面，您需要支付房租。存放在公寓大楼里的页面可以向全世界的任何人展示，供他们查阅。您的房东称为主机，而您的房租通常称为托管费。每天都有成百上千万台网络服务器通过我们称为互联网的网络向千千万万的人的浏览器提供页面。有关这个过程的详细信息，请参阅Web 服务器工作原理一文。
进行网页效果实验是一件非常容易的事情，不需要使用服务器。浏览器能在您的个人计算机上显示您创建的网页。一旦您了解了如何创建自己的页面，很可能您希望把页面“放到服务器上”，以便全世界的人都能下载和阅读您的页面。我们将在本文最后讨论如何做到这一点。
查看源代码
让我们观察一番网页的“内脏”。这是页面作者键入的原始文本和HTML标记，浏览器能解释这些标记并生成您在互联网上实际看到的网页。现在用您的鼠标右击此页面的任何空白部分并选择“查看”。这时会出现一个新的窗口，显示一些单词和字符，有些可能看起来很专业和奇怪。这些单词和字符统称HTML编程代码，就是您将要学的东西。代码中的每个元素称为HTML标记。无论这些代码看起来有多复杂，都不要害怕，您将惊讶地发现实际上它们是多么简单。如果您看着页面的源代码觉得一头雾水，那就干脆关闭源代码页，返回本文好了。
用这种方式，您可以在互联网上看到几乎任何页面“幕后”的东西。随着对页面设计的研究逐步深入，您可能发现您愿意查看复杂网页的源代码，以便弄清作者或页面设计者究竟使用了什么代码创建出如此巧妙的构思。
现在让我们学习许多标记的含义并开始创建简单的页面。
HTML标记
HTML标记是一个代码元素，它告诉页面浏览器如何处理您的文本。每个标记看上去就是放在<（小于号）和>（大于号）之间的字母或单词。
示例：
,
为了告诉网络浏览器“结束”您要它做的事，要在结束标记中使用斜杠：
示例：
,
大多数标记都由成对的“开始”码和“结束”码组成，但不是绝对的。
您创建的任何网页在开始的地方都有以下标记：
：告诉浏览器这是一个HTML文档的开始 ：告诉浏览器这是页面的页眉（以后您将学到两个“HEAD”标记之间是什么内容） ：告诉网络浏览器这是页面的标题 <BODY>：告诉网络浏览器这是网页内容的起点，您想在页面上说和看的内容都跟在这个标记之后。<br>结束网页所需要的标记是：<br></BODY> </HTML><br>建立简单的页面<br>创建网页的方法有很多种。成百上千的公司创建了各种工具，以各种方式来帮助完成这个过程。然而，我们在这里的目标是理解网页的真正原理，而不是让某个工具把页面的创建过程掩盖起来，不让我们看到。因此，我们将使用尽可能简单的工具，这些工具在您的计算机上已经存在。<br>在您的计算机上有一个程序，可以创建简单的文本文件。在Windows计算机上，该应用程序叫做记事本。在Macintosh计算机上，该程序叫做SimpleText。如果您找不到这些程序，也可以使用基本的文字处理程序，例如WordPerfect和Microsoft Word。<br>注意： 在Windows 95/98环境中，依次单击“开始”按钮、“程序”、“附件”和“记事本”。 在Windows 3.1环境中，单击“附件”（在“程序管理器”中），再单击“记事本”。 在Macintosh环境中，依次单击“Macintosh HD”、“应用程序”和“SimpleText”。<br>一旦您在屏幕上打开了适当的程序，请在窗口中键入（或剪切并粘贴）以下HTML文本：<br><html><br><head><br><title>My First Page


大家好。这是我的第一个页面！


无论您把这些标记和文本逐个排列、逐行排列还是缩进排列，都不影响文本在浏览器窗口的显示方式。在您的标记中，无论使用大写字母还是小写字母，都不会造成什么差别。
现在您需要把这个文件保存在某个地方，以便能很快找到它。把它保存到桌面上，如果能保存到您专门为存放即将创建的页面而创建的那个目录中，则更好。用first.html文件名来保存。
下一步，在您的网络浏览器中（即Microsoft Internet Explorer或Netscape Navigator）打开此页面。所有的网络浏览器都有打开存储在本地计算机中的文件的方法。在Internet Explorer和Netscape中，从窗口顶部的“文件”菜单中选择“打开文件”。打开first.html文件。当您在浏览器中打开该文件时，它看起来像这样：

在这幅图中可以发现三个特征：
您可以看到该页面有标题“我的第一个页面”。 您可以看到该页面的正文包含文字“大家好。这是我的第一个页面！” 您可以看到在地址窗口中显示的URL是来自本地硬盘的C:WINDOWSDESKTOPfirst.html，而不是通常从互联网上的服务器收到页面时所显示的http://...。
通过观察组成您的页面的HTML文本，您可以确切地了解页面是如何获得标题和正文的。
现在您已经创建和查看了您的第一个网页，并走上了成为页面高手的成功之路。学会有关网页制作的全部知识的关键是掌握越来越多的HTML标记，这些标记能让您自定义您的页面。您可能还想学习帮助您为页面创建表格、框架和图形的工具。本网页知识系列讲座将引导您学习所有您需要的信息。
基本HTML格式标记
您将经常使用本页上的基本HTML标记，它们能完成您在大多数网页上看到的格式设置任务的90%。一旦您学会这些标记，您就走上了成为HTML高手的成功之路！
在学习过程中，您用如下方法检验您所使用的HTML标记：
如果您喜欢我们在上一页中讨论过的“first.htm”文件，您可以把HTML键入其中并创建完整的网页。请记住，要把您希望在网页上显示的所有信息放在和标记之间。请通过添加新的标记并查看其结果来实验您的页面。
让我们开始吧！
粗体、斜体和下划线
通过添加以下标记把任何一段文本变成粗体：

该标记要放在文本的开始，并在文本结尾添加以下标记：

粗体属性就到此结束。
这是粗体。
这是粗体。
若要设置斜体，则以同样方式使用这对标记：
.....
这是斜体。
这是斜体。
若要设置下划线，则使用这对标记：
.....
这是下划线。 这是下划线。
换行和段落
虽然您键入的文本可能包含回车、制表符和额外的空格，但是浏览器看不见它们。您必须使用标记才能在HTML文档中创建空白空间。

标记在行与行之间起换行的作用。您可以使用多个这样的标记来创建空白空间。
这一行
被断开。 这一行
被断开。

标记能在文本的两行之间创建额外的空间。如果把
标记放在一行文本中，只能断开该行；如果使用

标记，则不仅断开该行，而且创建额外的空间。
这一行

被空白隔开。 这一行
被空白隔开。

标记能创建水平标尺或水平线。
这是一条水平标尺：
这是一条水平标尺：
制表符
没有可以在文档内创建一个“制表符”的正式的HTML标记。许多站点设计人员创建表格或使用空白图像来创建空间（表格和图像将在本文后面加以说明）。使文本缩进的一种方法是使用
    标记，以便让浏览器认为您要创建一个“列表”列表能自动缩进文本。结束时请使用
标记来“结束”缩进。标记
……
也能把文本缩进。
另一个替代方法是
标记。这个标记用来显示预格式化文本，即“按原样”显示的文本。任何在
和
标记内创建的空白在浏览器中的显示效果将与在源代码中显示的一样。
改变字体颜色、类型和大小 通过使用以下标记来改变任何文本的颜色：
...
这是红色。 这是红色。
这是绿色。 这是绿色。
大多数标准颜色都能使用。请尝试“浅色”和“深色”，如“浅蓝”或“深绿”。您还可以指定一个特定的十六进制颜色号码，例如：.要获得十六进制颜色代码的列表，请访问December.com:HTML。
如果您想为页面的整个文本分配一种特定颜色，则把text="color" 标记添加到  标记之内。
示例：
即使您为整个文本分配了颜色，您仍可以通过使用在上面学过的标记来改变文本中任何部分的颜色。
通过使用以下标记来改变字体类型：
 ... 
This is arial. 这是Arial字体。
这是 geneva 字体。 这是Geneva字体。
（注意：如果您规定的字体在用户的计算机中不能用，字体类型会自动改为浏览器的默认字体，通常是Courier或Times New Roman字体，所以如果您希望控制在用户浏览器中显示的内容，最好坚持使用标准字体。）
通过使用以下标记来改变任何文本的大小：
...
示例：
在大多数浏览器上默认的字体大小是“3”，所以任何比3大的值将使文本变大，而任何比3小的值将使文本变小。
您还可以通过增大或减小默认字体的大小来改变字体大小。
示例：，或 
此字体大小增加 2。 此字体大小增加 2。
此字体大小增加 1。 此字体大小增加 1。
此字体大小减少 2。 此字体大小减少 2。
此字体大小减少 1。 此字体大小减少 1。
您还可以通过使用标记  和  来改变字体大小：
这是小文本。 这是小文本。
这是大 文本。 这是大文本。
标题标记也会改变字体大小，为段落或文章创建粗体“标题”：
这是一个H1标题。
 这是一个H1标题。
这是一个H2标题。
 这是一个H2标题。
这是一个H3标题。
 这是一个H3标题。
使用以下标记可结束任何字体元素更改：

或者使用您为特定标记而使用的成对的终止标记： 示例：，, 
创建背景颜色
通过把bgcolor="color" 标记添加到标记之内来改变您的页面背景颜色。
示例：
与本节中说明的改变字体颜色一样，您可以使用大多数标准颜色，或使用十六进制颜色代码。
创建列表
您可以创建3种类型的列表：无序列表、有序列表和说明性列表
无序列表看起来像这样：
加利福尼亚 俄勒冈 北卡罗莱纳
无序列表是带项目符号的列表，以标记
    开始。标记
  • （是List Item的缩写）用于列表中每个项目之前。结束标记
可结束列表。
示例：

  • 加利福尼亚
  • 俄勒冈
  • 北卡罗莱纳

项目符号的类型可以改成“圆圈”、“方块”或“圆盘”，方法是在