admin 管理员组文章数量: 1184232
2024年3月13日发(作者：关系数据库是什么的集合)
资料来源： HTTP:///OHnOmN
首语
人们常常以为制作一个网站很难，但其实并非如此！人人都能学会如何制作网站。而且，假
如你继续阅读本教程的话，你将能在一小时内制成一个网站。
有些人觉得制作网站需要昂贵的、高级的工具——当然这是错误的。的确有许多软件声称它
们可以为你创建网站，它们有的比较好用，有的就差些。但如果你要制作符合W3C规范并
令你满意的网页的话，你必须自己动手做。好在这不难，而且你已具备所需的全部软件了。
本教程的目的就是：通过简单、全面和正确的介绍，教会你如何创建网站。本教程将从基础
讲起，不要求你具备任何编程知识。
当然，本教程无法遍及所有知识，所以你要自己多做实验。不过别担心，学习制作网站是件
充满乐趣的事，而且一旦掌握它，你便会感到无比满足。
你可以自由选择如何使用本教程，但我们建议你每天学习2到3课，然后花点时间来实验你所
学到的新知识。
好的，不多说，我们现在就开始吧！
第1课：开始学习
在这第一课中，我们简要介绍制作网站所需的工具。
需要哪些工具？
十之八九，你已经拥有所需的全部工具了。
“浏览器（browser）”你有了，它是用于浏览网站的程序。游览器有很多可供选择，最普及
的浏览器当属微软（Microsoft）公司的InternetExplorer（俗称“IE”），其他的一些浏览器包
括Opera、MozillaFirefox（俗称“火狐狸”或“火狐”）等。这些浏览器的基本功能都是浏览网
页，因此具体使用哪个浏览器是无所谓的。
也许你听说过、甚至用过一些网页制作工具，比如MicrosoftFrontPage、Macromedia
Dreamweaver、MicrosoftWord等。现在可以忘掉这些程序了！它们对你学习网页制作没有
什么帮助。
相反，你需要的是一个简易的文本编辑器。如果你正在使用Windows（微软视窗）操作系统
的话，你可以使用它自带的记事本（Notepad）程序。你可以依次点击“开始菜单→程序→附
件”找到该程序。
1
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
如果你用的是其他操作系统，那么也有类似的简易文本编辑器可以使用，比如Linux上的Pico
或Mac（苹果机）上的SimpleText。
记事本是一个非常简单的文本编辑程序，用它编写程序非常好，因为它不会干涉你所输入的
任何内容，给予你完全的控制权。而许多网页制作工具的问题在于，它们提供了许多标准功
能供你选择。这样的缺点是，你只能按照这些标准功能来制作网页。所以，这类工具常常不
能创建正合你意的网页。或者，更令人讨厌的是，它们会修改你手工编写的代码。而使用记
事本（Notepad）或其他简易文本编辑器的话，全部代码均由你自己编写。
浏览器和记事本程序（或类似的简易文本编辑器）便是你所需的全部工具，有了它们，你就
可以完成本教程，并制作自己的网站了。
我需要连上因特网么？
你无需连上因特网（Internet），浏览本教程和制作网站都可以离线完成。
2
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
你可以先在自己的计算机上制作网站，待网站制作完毕再上传到因特网上。
接下来学习什么？
下一课将介绍HTML是什么，然后从第三课开始学习有趣的HTML。
第2课：HTML是什么？
这一课将为你简要介绍你的新朋友——HTML。
HTML是什么？
HTML是浏览器的“母语”。
长话短说，HTML是由一名叫TimBerners-Lee的科学家发明的。他发明HTML的目的，是
为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。HTML取得了的巨大成
功，大大超出了TimBerners-Lee的原本预计。通过发明HTML，他为我们今天所认识的万
维网奠定了基础。
HTML是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。你所看到的
网页，是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器
菜单栏上点击“查
”，然后选择
3
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
“源文件”即可。
对于生手来说，HTML代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。
HTML
能用来做什么？
如果你要制作网站的话，学习HTML是不可避免的。即使你用Dreamweaver等工具来制作
网站，了解基本的HTML知识也会令你在网站制作过程中倍感轻松，并有利于制作出更好
的网站。好在HTML容易被学会和使用。通过下面两课的学习，你将学会如何制作自己的
第一个网站。
HTML是用来制作网站的。就这么简单！
好，明白了，那HTML这四个字母代表什么呢？
HTML是“HyperTextMark-upLanguage（超文本标记语言）”的缩写——其实目前你不必了
解这些，不过，为了迁就学习次序，我们就详细解释一下吧。
•超（Hyper）是相对于线性（linear）来说的。在很久以前，那时计算机程序还是线
形运行的：当计算机程序执行完一个动作以后，转向下一行，这行结束后，继续下移，
依次类推。但HTML则不同，你可以在任何时候跳转到任何地方。比方说，你在浏览
之前，不必先去浏览。
•
•
文本（Text）意味着它是自解释的（self-explanatory）。
标记（
Markup
）指的是你怎么处理文本。对文本作标记的方式，跟你在文本编辑程
序里将文本加粗、或者将一行话设为标题或列表项目类似。
•语言（Language）。HTML就是一种语言，它使用了许多英文单词。
在本教程中，你将会学习到XHTML（可扩展超文本标记语言）。简单地说，它是一种新的、
更加结构良好的HTML。
现在，你知道了HTML（和XHTML）代表什么意思，下面我们将开始有关网站制作的学习。
第
3
课：元素与标签
现在你要学习的是HTML的重要成分——元素（element）。
元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start
tag）、内容（content）和尾标签（endtag）构成。
4
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
“标签”是什么？
标签（tag）指示元素的起始与结束。
所有标签都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。
一般说来，有两种标签——首标签（starttag）（如）和尾标签（endtag）（如）。
它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内
容进行标记。
HTML主要就是各种各样的元素，所以，学习HTML，就是学习使用各种元素。
可以举些例子么？
没问题。比如，
b
元素的作用是，告诉浏览器介于标签
和
之间的文本应以粗体显示。
（这里的“b”是“粗体（bold）”的意思。）
例1：
这句话应显示为粗体。
该例在浏览器中将显示如下：
这句话应显示为粗体。
h1
、
h2
、
h3
、
h4
、
h5
及
h6
元素的作用是显示标题（这里的h是“标题（heading）”的意思）。其
中
h1
是一级标题，字体最大；
h2
是二级标题，字体比一级标题略小；而
h6
是六级标题，它
是最后一级标题，字体也最小。
例2：
这是标题
这是子标题
该例在浏览器中将显示如下：
这是标题
这是子标题
首标签和尾标签总是必须的吗？
常言道，凡事均有例外。在HTML中，也有例外的情况，即有些元素没有尾标签。这些没
有尾标签的元素被称作空元素（emptyelement），它们与具体文本内容无关，比如像下面这
5
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
个换行标签：
。
标签中的字母应该大写还是小写？
大多数浏览器不介意标签是大写还是小写，或者混合大小写。所以、或
在浏览器上的显示效果都一样。但是，正确的写法是采用小写字母来书写标签。所
以，要养成用小写字母书写标签的习惯。
把标签放在哪里？
你应该在HTML文档里书写标签。一个网站可能包含多个HTML文档。上网的过程，其实
就是打开不同HTML文档的过程。
这一课就到这里。如果花10分钟时间继续学习下一课的话，你将能够制作自己的第一个网站。
6
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
第
4
课：制作自己的第一个网站
有了从前面几课的基础，现在只需再花几分钟时间，你就能学会如何制作自己的第一个网站
了。
如何做呢？
通过第一课，我们知道制作一个网页需要有浏览器和记事本程序（或者类似的文本编辑器）。
既然你现在已经在用浏览器阅读本教程了，那么请再打开一个窗口——这样你就可以一边阅
读本教程，一边欣赏你的新网页了。
另外，请打开记事本程序（Notepad）：依次选择“开始菜单→程序→附件→记事本”即可。
7
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
现在一切就绪了！
然后呢？
我们先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。”
继续学习，就你就知道这是多么容易了。
HTML简单易学。浏览器读HTML就跟你读书一样，也是从上往下，从左到右进行的。所
以，HTML文档的开始和结束便对应于网页的头和尾。
你首先要做的是告诉浏览器，你们将采用HTML语言来“对话”。这是通过
标签来实现
的（这是容易理解的）。所以，在做所有其他事之前，先在记事本的第一行敲入“
”。
也许你记得前面课程中我们说过，这里的
是首标签，在HTML文档结尾处必须有相应
的尾标签与之对应。好的，为了防止最后忘记写这个尾标签，我们现在就输入“
”，然
8
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
后在
和
之间留些空行，用于书写其余代码。
下面，我们需要为HTML文档写一个“头部（head）”，它提供关于当前文档的信息；然后
写一个“主体（body）”，它提供文档的内容。HTML最重要的就是简单——在这里，我们只
需把头部（
和
）放到主体(
和
）的前面就行了。
如下所示：
注意我们是如何用换行（用Enter键）与缩进（用Tab键）令代码具有层次感的。理论上，
你如何书写HTML文档，这无关紧要。但为了便于阅读代码，和保持良好的概貌，我们强
烈建议你采用换行与缩进来层次化
HTML
代码，就像上面的例子一样。
上面这个文档便构成了你的第一个网站——它只包含一个网页，而且内容很单调，可能与你
的想象相去甚远，但在一定程度上它仍是一个网站。你可以将它用作其他HTML文档的基
本模版。
不错不错，但我如何添加更多内容？
前面我们学到过，HTML文档有两个部分：头部（head）和主体（body）。你在头部（head）
提供关于网页的信息，你在主体（body）部分提供网页的具体内容。
比如，如果你要指定HTML文档的网页标题（title）（它将显示在浏览器窗口顶部），你就要
在头部（head）提供有关信息。用
title
元素来指定网页标题：即在首标签
之间写上网页标题：
注意，网页标题（title）不是显示在网页里，而是显示在浏览器窗口的标题栏上的。网页里
显示的所有内容都必须放在body元素里。
比如，我们要在网页里显示“哇！这是我的第一个网站。”这行文字，它属于主体（body）部
分，所以我们在body元素里输入：
哇！这是我的第一个网站。
标签
里的p是“段落（paragraph）”的意思，也就是一个文本段落。
现在，你的HTML文档应该是这样：
哇！这是我的第一个网站。
搞定！你已经完成了自己第一个真正的网站（尽管它只包含一个网页）！
10
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
接着，你需要将它保存到你的硬盘上，然后在浏览器中打开它：
•
•
在记事本的“文件”菜单下选择“另存为...”。
这时会弹出一个对话框，在“保存类型”右边的下拉菜单里选择“所有文件”。这一点
很重要——否则，它将被保存为文本文档，而不是HTML文档。
•现在将这个文档保存为“”（后缀名“htm”表明它是一个HTML文档。后缀
名用“html”也可以，但我比较习惯使用“htm”，你可以根据自己的喜好选用二者中的任一
个）。将HTML文档保存在硬盘上的哪个文件夹无关紧要——只要你记得保存位置，并
能再次找到它就行。
现在打开浏览器：
•
•
•
在“文件”菜单下选择“打开”。
在弹出的对话框中点击“浏览”按钮。
现在，请找到你的HTML文档，然后点击“打开”。
11
本教程由 简约ZS 收集于互联网,2008 年 10 月 17 日
资料来源： HTTP:///OHnOmN
这时，浏览器中应显示“哇！这是我的第一个网站。”。恭喜！
如果你迫切希望自己的杰作能被全世界看到，你可以先去第14课学习一下如何把自己的网页
上传到因特网（Internet）上。如果你不着急的话，那么请继续往下学习。乐趣才刚刚开始。
第5课：到目前为止学到了些什么？
始终以上一课中的基本模版为起点制作新网页：
。