logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

HTML 初学者 - HTML 教程

11/10/2025, by Ivan

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。

现在是创建文档的时候了。进入我们想保存文件的文件夹,在空白处右键点击:

HTML Book

选择“新建文本文件”。将文件命名为 index.html,也可以使用扩展名 .htm。

HTML lesson 1

如果系统设置不允许更改扩展名,文件可能会被保存为 index.txt。此时需要:

  1. 用记事本打开 index.txt。
  2. 在菜单中选择“文件 → 另存为”。
  3. 在弹出的窗口中输入新的文件扩展名。

index.hmtl

现在 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 结构。保存文档后,用浏览器打开它。

открываем HTML через браузер

此时你会看到一个空白页面,这是正常的,因为我们还没有添加任何文本。

现在我们在 body 标签之间添加一行文字:

<html>
  <body>
    HTML 我的第一步
  </body>
</html>

保存文件并刷新浏览器页面。现在你会看到页面中出现“HTML 我的第一步”这行文字。因为我们把文本放在 body 标签内——既不在 body 上方,也不在其下方。

1ый HTML документ

你可能注意到,在浏览器标签上只显示“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 文档现在有了标题。

我认为这已经足够作为入门课程的第一步了。在接下来的课程中,我们将继续学习更多内容。