电子发烧友App
网页的工作原理
引言
您曾经对网页的原理感到好奇吗？您曾经想过要创建自己的有标题、文本和图形图标的完整网页吗？您曾经听说过“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”标记之间是什么内容）
：告诉网络浏览器这是页面的标题 <LI><BODY>：告诉网络浏览器这是网页内容的起点，您想在页面上说和看的内容都跟在这个标记之后。 </LI></UL> <P>结束网页所需要的标记是： </P> <P> <UL> <LI></BODY> <LI></HTML> </LI></UL> <P><B>建立简单的页面</B></P> <P>创建网页的方法有很多种。成百上千的<a href="https://www.hqchip.com/gongsi.html" target="_blank"><u>公司</u></a>创建了各种工具，以各种方式来帮助完成这个过程。然而，我们在这里的目标是理解网页的真正原理，而不是让某个工具把页面的创建过程掩盖起来，不让我们看到。因此，我们将使用尽可能简单的工具，这些工具在您的计算机上已经存在。 </P> <P>在您的计算机上有一个程序，可以创建简单的文本文件。在Windows计算机上，该应用程序叫做记事本。在Macintosh计算机上，该程序叫做<a href="https://m.hqchip.com/app/1522" target="_blank"><u>Sim</u></a>pleText。如果您找不到这些程序，也可以使用基本的文字处理程序，例如WordPe<a href="https://www.elecfans.com/tongxin/rf/" target="_blank"><u>rf</u></a>ect和Microsoft Word。 </P> <UL>注意： <LI>在Windows 95/98环境中，依次单击“开始”按钮、“程序”、“附件”和“记事本”。 <LI>在Windows 3.1环境中，单击“附件”（在“程序管理器”中），再单击“记事本”。 <LI>在Macintosh环境中，依次单击“Macintosh HD”、“应用程序”和“SimpleText”。 </LI></UL> <P>一旦您在屏幕上打开了适当的程序，请在窗口中键入（或剪切并粘贴）以下HTML文本：<br></P><PRE><html> <br> <head> <br> <title>My Fi<a href="https://www.elecfans.com/tags/rs/" target="_blank"><u>rs</u></a>t 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标记。许多站点设计人员创建表格或使用空白图像来创建空间（表格和图像将在本文后面加以说明）。使文本缩进的一种方法是使用- 标记，以便让浏览器认为您要创建一个“列表”列表能自动缩进文本。结束时请使用
……
也能把文本缩进。
另一个替代方法是标记。这个标记用来显示预格式化文本，即“按原样”显示的文本。任何在
和
标记内创建的空白在浏览器中的显示效果将与在源代码中显示的一样。
- 改变字体颜色、类型和大小
- 通过使用以下标记来改变任何文本的颜色：
- 通过使用以下标记来改变字体类型：
...
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标题。 使用以下标记可结束任何字体元素更改：
- 示例：，,
...
| 这是红色。 | 这是红色。 |
| 这是绿色。 | 这是绿色。 |
大多数标准颜色都能使用。请尝试“浅色”和“深色”，如“浅蓝”或“深绿”。您还可以指定一个特定的十六进制颜色号码，例如：.要获得十六进制颜色代码的列表，请访问December.com:HTML。
如果您想为页面的整个文本分配一种特定颜色，则把text="color" 标记添加到
标记之内。示例：
即使您为整个文本分配了颜色，您仍可以通过使用在上面学过的标记来改变文本中任何部分的颜色。
- 创建背景颜色
- 加利福尼亚
- 俄勒冈
- 北卡罗莱纳
- （是List Item的缩写）用于列表中每个项目之前。结束标记
- 加利福尼亚
- 俄勒冈
- 北卡罗莱纳
- 加利福尼亚
- 俄勒冈
- 北卡罗来纳
- 加利福尼亚
- 俄勒冈
- 北卡罗莱纳
- 柑桔
- 葡萄
- 樱桃
- 用于每一个项目之前。
示例：
- 柑桔
- 葡萄
- 樱桃
您可以改变组织的类型，方法是在
- 标记之内添加一个“类型”名称。
-
说明性列表创建文本项目的列表，第二行缩进：
- Marshall Brain
- HowStuffWorks公司的创始人
请以这种方式使用以下标记：
- Marshall Brain
- HowStuffWorks公司的创始人
- 标记应该与您希望在页边排列的文本对应；而
- 标记则与您希望缩进的行对应。
与其他站点链接
网页的最重要的优点之一是它能够创建与网上的其他页面的链接。如果使用以下的锚定标记，您可以引用其他人的作品、指向您喜欢的其他页面，等等：
在锚定标记后键入该页面的名称，然后用以下标记结束锚定：
示例：
这是在您的页面上看到的效果：
博闻网
您还可以很容易地把带项目符号的列表与链接结合起来，创建一个链接列表。
新窗口
如果您不希望您的访客单击了转向另一个站点的链接后离开您的页面，可在您的锚定标记上添加以下标记。这样当单击该链接时就不会让访客离开您的站点而转向别人的站点，而是仅仅打开一个新的空白窗口显示该链接的目的地：target="_blank"
链接的颜色
标记之内：
蓝色是链接用的标准默认颜色。但是您可以改变页面上所链接信息的颜色，方法是把以下标记插入到您的- link="color"
- vlink="color"
Vlink代表“受访链接”。当有人访问这些链接时，链接会改变颜色。如果您不希望受访链接改变颜色，只需给链接和受访链接赋予相同的颜色属性。
示例：
创建接收电子邮件的链接
如果您希望收到阅读您的页面的人发来的电子邮件，可使用以下锚定标记：然后在该标记后再次键入您的邮件地址（或您希望在页面上显示的任何链接文本）。用以下标记结束该字符串：
示例：
这是在您的页面上看到的效果：
请给我发邮件
创建与您自己的页面的链接
锚定标记不仅用于与互联网上的页面链接。您还可以用锚定标记与您自己页面上的信息建立链接。在以下示例中，您可以省略前缀“http://www”，而只包括html文档的文件名：示例：公司信息
若要链接到您的页面的特定部分，则需要为您所指的那个部分命名，并把该名称包括在链接的锚定标记之内。具体的实现方法如下：
为您的页面的某个部分命名，方法是把以下标记插入到您希望链接指向的部分之前。您可以选择任何单词、字母或字符作为该部分的名称：
在锚定标记中，可通过在名称前加一个“#”来指向您的页面的这一部分。如果已命名的链接指向页面中包含此链接的位置，与该已命名部分链接的锚定标记看起来将是这样：
如果已命名的链接指向一个html文档，且该文档独立于链接所在的页面，则也应包括该html文档的文件名。
示例：公司信息
添加图像和图形
可使用以下标记把任何数字图像放到您的页面上：
网页上的图像或者是GIF文件（英文发音是“jiff”）或者是JPG文件（英文发音是“jay-peg”）。任何图像都会包含这两种扩展名中的一个，所以如果您有一个图像名叫“logo”，它的文件名将是“logo.gif”或“logo.jpg”。
一定要把您打算在网页上显示的图像和图形存储在您存储“html”文件的同一个文件夹或目录中。否则您的计算机在寻找您希望显示的图片时会遇到麻烦。还有，在键入图片名称时要确保严格遵守它在文件夹中保存时用的文件名，因为文件名对大小写很敏感。
对齐
在默认情况下，文本和图像在浏览器中显示时使用左对齐，即文本和图形自动靠左侧页边上对齐。如果您希望把页面的任何部分“居中”，可使用以下标记：若要结束居中，可以使用相应的结束标记：
您还可以为各种“片段”（即从一个词、一行文本到整个页面的任何内容）进行编码，让这些片段按一定的方式对齐。
在片段的开始处放片段对齐标记，包括您希望的或图像要采取的对齐方式（即右对齐、左对齐、居中）：
示例：
用以下标记结束片段对齐：
使用您在本文中刚学到的信息，您可以开始创建很有趣、很吸引人的网页了。尝试一下，用我们刚讨论过的工具和标记来创建一两个网页。如果您急于让全世界的人欣赏您的杰作，可以跳到“把您的页面放到网上”一文来学习如何发布您的新网页。
创建表格
目前，为了创建编排得富有艺术性的网页，有一个广泛使用的HTML工具，那就是表格。如果掌握了表格，您就不再是“创建”页面，您是在“设计”页面。
表格的种类繁多，从简单的方框到很复杂的设计布局，任您挑选。在本文中，我们将讨论表格的基础知识，并在您探索如何设计出人们喜爱访问的漂亮页面的过程中，为您提供几个窍门供您实验。
与您希望在浏览器窗口显示的所有信息一样，要确保在HTML文档中把表格放在
和这对标记之间。表格应从以下标记开始：表格中的每个水平行应从以下标记开始：
而行内的每条数据应从以下标记开始：
请研究以下图表：
A1 A2 B1 B2 C1 C2 这里我们有3行和2列。
为了给此图表的基本结构编码，应按以下顺序使用以下标记：
开始画表格 开始画第一行 开始画数据的第一个“单元格”（A1） 结束A1单元格 开始画第二个单元格（A2） 结束A2单元格 结束第一行 开始画第二行 开始画第二行的第一个数据单元格（B1） 结束B1单元格 开始画B2单元格 结束B2单元格 结束第二行 开始画第三行 开始画第三行的第一个数据单元格（C1） 结束C1单元格 开始画C2单元格 结束C2单元格 结束第三行 结束表格 许多设计人员喜欢把表格的各部分缩进一些，以便使编码更易于阅读。下面显示的是这方面的一个示例。
现在我们来为表格的基本结构添加边框。边框是表格的轮廓。边框标记 （border="value"）放在初始表格标记内。您可以通过分配一个特定值（我们将分配“1”）来规定轮廓线的粗细。一个很好的做法是用不同的值来实验，以便弄清在浏览器中的实际显示效果。如果您不希望显示边框，则把轮廓线值分配为“0”。
（注意：即使您不打算在表格周围出现边框，开始的时候也最好有可见的边框，并将其至少保持到您将所有可能影响表格显示效果的“错误”排除掉为止。）
把以下代码和数据键入（或剪切并粘贴）到您的HTML文档中：
A1
A2
B1
B2
C1
C2
在浏览器中显示的表格应该看起来很像早些时候显示的图表。
您可以为表格分配很多属性。下面要讨论的一些标记可以让您用很多创造性的方式来设置表格的格式。
改变表格的背景颜色
通过在初始的“table”标记内使用“bgcolor”标记来改变整个表格背景的颜色：
示例：
也可以为表格内的行或单元格分配彩色背景。只要把bgcolor="color" 添加到
或 标记中即可为表格的特定部分着色。 示例：
表格大小
表格中的行和列的宽度和高度会自动扩大，以便与数据的长度或浏览器窗口的空间大小相匹配。若要规定表格的宽度和高度，把像素或百分比值包括在开始的“table”标记中即可：示例：
与规定整个表格相同，还可以为个别的数据单元格规定宽度和高度。要做到这一点，把width="value" 标记添加到所需单元格的
或 标记中即可。 一个很好的做法是用不同的像素和百分比值来实验，以便弄清在浏览器中的实际显示效果。
单元格边距
“cellpadding”标记规定了每个单元格的边线与单元格内的数据之间空白的大小（以像素为单位）。在开始的“table”标记内使用该标记：示例1：
此表格的单元格边距为 “5”个像素 示例2：
此表格的单元格边距为 “15”个像素 单元格间距
“cellspacing”标记规定各个单元格之间的空间大小（以像素为单位）。在“table”标记内使用该标记：示例1：
此表格的单元格边距为 “5”个像素。 示例2：
此表格的单元格边距为 “15”个像素。 表格标题
若要为表格内的列或行创建一个粗体和居中的“标题”，可使用标记来代替为第一行编码的 标记。 示例：
列1
列2
A
B
C
D
效果是这样的：
列1 列2 A B C D 对齐和单元格跨度
在默认状态下，表格内所有单元格的内容（表格标题除外）均是垂直居中、左对齐。若要使单元格的内容以不同方式对齐，应把以下标记应用到
、 或 标记之内： 对于水平对齐，不同的值可以实现左对齐、右对齐或居中：
- 示例：
对于垂直对齐，不同的值可以实现顶部对齐、底部对齐或中间对齐：
- 示例：
您还可以安排整个表格的对齐方式来决定其在页面上出现的位置。通过把标记
单元格跨度
当表格中一个单元格跨越两个或更多的其他单元格时，就发生“单元格跨度”。列跨度的一个示例：此单元格跨越两列 此单元格跨越一列 A B C 在应用
标记之内。以下是为上面示例所写的代码：
此单元格跨越两列
此单元格跨越一列
A
B
C
行跨度的示例：
此单元格跨越两行 A B C D 在应用
标记之内。以下是为上面示例所写的代码：
此单元格跨越两行
A
B
C
D
您在表格中还可以应用我们在上一章里学过的许多属性，例如字体的大小、类型和颜色，插入图像，制作列表和添加链接。只要在您想设定格式的那个特定单元格的
标记后添加适当的标记即可。 请使用您在本文中学过的各种工具和标记来做实验和练习。人们在网页上使用表格时，创新的可能性是无穷尽的。您可以叠加图像和无边框的彩色方框来创建天衣无缝的设计，或者在无边框的表格中嵌套无边框的表格，有些有颜色，有些没有颜色，以便创建引人注目的布局。只要发挥一点想象力、创造性并使用表格，网页设计就会开拓一片新天地。
创建框架一些页面设计人员出于设计需要和为使站点显得对用户更加友好，在页面上使用了框架。可以说，框架使浏览站点更方便，并且不会丢失您原先所在的位置。当单击一个链接时，如果网页的一部分保持静态而同一页面的另一部分却改变了，就可以确定网页中使用了框架。若要查阅带框架的网页的功能，请访问The Birch Aquarium页面。
在The Birch Aquarium页面上，顶部和最底部保持不变，而中部可根据所选择的链接而变化。该页面分成3个框架，也就是说，3个不同的HTML文档在同一时间显示。您可以按照您的愿望来选择把页面分成几部分，以什么方式来划分，以及在每个框架中包括什么样的HTML文档。
首先要很好地规划您的页面，这一点很重要。应根据行和列来考虑布局。您希望显示几个水平部分（行）？几个垂直部分（列）？您估计每个部分需要多少空间（像素或百分比）？
框架集文档
框架集文档是一个HTML文档，它指示浏览器按特定的方式安排网页的内容。在框架集文档中，“frameset”标记取代了“body”标记。您可以用通常的HTML格式开始编写框架集文档：
标题 下一步，插入“frameset”标记：
示例：
- 让列表按大写字母排序：(A, B, C...)
- 让列表按小写字母排序：(a, b, c...)
- 让列表按罗马数字排序：(I, II, III...)
- 让列表按小罗马数字排序：(i, ii, iii...)
如果您希望用一个指定值（例如“6”）来开始您的有序列表，可使用以下“开始”和“值”标记：
- 柑桔
通过把bgcolor="color" 标记添加到
标记之内来改变您的页面背景颜色。示例：
与本节中说明的改变字体颜色一样，您可以使用大多数标准颜色，或使用十六进制颜色代码。
创建列表
您可以创建3种类型的列表：无序列表、有序列表和说明性列表
无序列表看起来像这样：
- 开始。标记
示例：
项目符号的类型可以改成“圆圈”、“方块”或“圆盘”，方法是在
- 标记之内添加具体说明：
|
|
有序列表看起来像这样：
- 和