HTML 初学者 - HTML 教程
HTML 是一种非常简单的语言,几乎所有理工科和人文学科的大学生都会学习它,如今我想大多数中学也在教授它。它之所以简单,是因为 HTML 甚至不是一种编程语言。
HTML 是一种标记语言,我们写什么,它就显示什么。没有算法、流程图、循环、变量或类,只有文字、文字、再加上文字。在 HTML 中只有标签,而且数量并不多。经常使用的标签也不到三十个。所以如果你想学习一门与编程语言相关的基础语言,HTML 是一个很好的起点。
要开始创建 HTML 格式的文档,我们需要一个文本编辑器(如系统自带的记事本,在 Windows 或 Linux 中都有),以及一个浏览器来查看文档(例如 Firefox、Opera、Chrome 或 Internet Explorer)。在 Windows 系统中,我使用 Notepad++ 作为文本编辑器。
上面的几句话足以让我们准备好学习,现在我们开始吧。
我的第一个 HTML 文档
HTML 文档是普通的文本文件,就像 readme.txt 一样,只是扩展名不同。
注意:
什么是扩展名?
文件扩展名主要用于带图形界面的操作系统。它的主要作用是告诉系统,打开某个文件时应调用哪个程序。例如,系统根据扩展名 .COM、.EXE、.BAT、.CMD、.VBS 来识别可执行文件。
对于 HTML 文档,我们将使用扩展名 .HTML 或 .HTM。
现在是创建文档的时候了。进入我们想保存文件的文件夹,在空白处右键点击:
选择“新建文本文件”。将文件命名为 index.html,也可以使用扩展名 .htm。
如果系统设置不允许更改扩展名,文件可能会被保存为 index.txt。此时需要:
- 用记事本打开 index.txt。
- 在菜单中选择“文件 → 另存为”。
- 在弹出的窗口中输入新的文件扩展名。
现在 index.html 文件已经创建好,用记事本打开它并开始编写 HTML 标记。
HTML 标记由标签组成,标签的格式如下:
<tag>一些文本</tag>
首先是起始标签,它称为“开始标签”,写在尖括号 < > 之中。尖括号本身不读出,我们只说“这是 tag 标签”。
从最简单的标签开始:<html></html>。这是 HTML 文档的根标签,文档从它开始,也以它结束:
<html> </html>
标签可以写在一行上,但更方便的做法是每个标签占一行并保持垂直对齐,这样在 Notepad++ 中会自动高亮显示匹配的标签。
接下来,我们在 <html> 标签内放置 <body></body> 标签。Body 代表“主体”,即我们在浏览器中看到的所有内容都在 body 标签内。别忘了打开浏览器。修改 index.html 文件的内容并保存:
<html> <body> </body> </html>
注意我将 body 标签缩进了两个空格,以便更好地阅读 HTML 结构。保存文档后,用浏览器打开它。
此时你会看到一个空白页面,这是正常的,因为我们还没有添加任何文本。
现在我们在 body 标签之间添加一行文字:
<html> <body> HTML 我的第一步 </body> </html>
保存文件并刷新浏览器页面。现在你会看到页面中出现“HTML 我的第一步”这行文字。因为我们把文本放在 body 标签内——既不在 body 上方,也不在其下方。
你可能注意到,在浏览器标签上只显示“Mozilla Firefox”,说明我们的文档没有标题。让我们给 HTML 文档添加标题。
标题写在另一个标签 <head></head> 中。<head> 标签放在 <body> 之前:
<html> <head> </head> <body> HTML 我的第一步 </body> </html>
保存文件并刷新浏览器页面后,暂时不会有任何变化。我们还需要在 head 中加入 <title></title> 标签,它用于定义文档标题:
<html> <head> <title>HTML 初学者 drupalbook.org</title> </head> <body> HTML 我的第一步 </body> </html>
保存文件并刷新页面——瞧!我们的 HTML 文档现在有了标题。
我认为这已经足够作为入门课程的第一步了。在接下来的课程中,我们将继续学习更多内容。