HTML：创建内容

HTML (HyperText Markup Language，超文本标记语言) 是用于构建网页及其内容的骨架代码。本文将为您提供对 HTML 及其功能的初步理解，并向您展示如何为您第一个网站创建基本内容。

预备知识	对你的计算机操作系统、用于构建网站的基本软件和文件系统有基本了解。
学习成果	HTML 的用途和功能。 HTML 语法的基本组成部分——开始标签和结束标签、元素、属性、head、body。常用的 HTML 元素，包括段落、标题、图像、列表和链接。

那么，什么是 HTML？

HTML 是一种标记语言，由一系列元素组成，用于包裹（或封装）文本内容以定义其结构并使其以特定方式呈现。

让我们看一个例子——以下内容在网页上显示时将全部显示在同一行，因为它没有任何结构

Instructions for life:
Eat
Sleep
Repeat

如果我们将这些内容用以下 HTML 元素包裹起来，我们可以将那一行变成一个段落（<p>）和三个项目符号（<li>）

html

<p>Instructions for life:</p>

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Repeat</li>
</ul>

此 HTML 将在 Web 浏览器中呈现如下

除了组织文本，HTML 还有许多其他用途——将文本或图像链接到其他网页、嵌入图像或视频、创建数据表等等。

创建你的第一个 HTML 文档

让我们看看单个元素是如何组合形成一个 HTML 页面的。在本节中，您将创建一个基本的 HTML 文件，并了解其组成部分。

在您的 web-projects 文件夹中，创建另一个名为 first-website 的新文件夹。
在 first-website 中，创建一个名为 index.html 的新文件，并按所示精确地将以下代码插入到文件中

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>

在这里，我们有以下内容

<!doctype html>：doctype 是一个必需的序言。在远古时代，当 HTML 初生时（大约 1991/92 年），doctype 旨在作为一组规则的链接，HTML 页面必须遵循这些规则才能被视为良好的 HTML，这可能意味着自动错误检查和其他有用的功能。然而，如今，它们作用不大，基本上只是为了确保您的文档行为正确。目前您只需了解这些。
<html></html>：<html> 元素包裹了整个页面的所有内容，有时被称为根元素。它还包括 lang 属性，用于设置文档的主要语言。
<head></head>：<head> 元素充当一个容器，用于存放所有您希望包含在 HTML 页面中但不是向页面访问者显示的内容。这包括您希望在搜索结果中显示的关键词和页面描述、用于样式化内容的CSS、字符集声明等等。
<meta charset="utf-8">：此元素将您的文档应使用的字符集设置为 UTF-8，其中包含绝大多数书面语言中的大部分字符。本质上，它现在可以处理您可能放在上面的任何文本内容。没有理由不设置它，并且它有助于避免以后的一些问题。
<meta name="viewport" content="width=device-width">：此视口元素确保页面以浏览器视口宽度渲染，防止移动浏览器渲染页面宽度超出视口，然后将其缩小。
<title></title>：<title> 元素设置页面的标题，这是页面加载时出现在浏览器标签页中的标题。当您将其添加为书签/收藏夹时，它也用于描述页面。
<body></body>：<body> 元素包含所有您希望在用户访问您的页面时显示给他们的内容，无论是文本、图像、视频、游戏、可播放的音轨还是其他任何内容。目前它只包含一个 <img> 元素，但我们稍后会添加更多内容。

注意：大多数 HTML 元素由一个开始标签（例如 <body>）、其元素内容以及一个结束标签（例如 </body>）组成。一些 HTML 元素还有属性，其中包含有关元素的额外设置或信息——例如，在我们的代码示例中查看 charset、name 和 src。

嵌入图像

让我们将注意力转向 <img> 元素

html

<img src="" alt="My test image" />

这将在其出现的位置将图像嵌入到我们的页面中。它通过 src (source) 属性来实现，该属性包含我们想要嵌入的图像文件的路径。

我们还包括了 alt (替代) 属性。在 alt 属性中，您为无法看到图像的用户指定描述性文本，可能由于以下原因

他们有视力障碍。有严重视力障碍的用户经常使用屏幕阅读器等工具向他们朗读 alt 文本。
出了问题，导致图像无法显示。如果 src 属性不包含有效的图像路径，则会显示 alt 文本。

您编写的 alt 文本应为读者提供足够的信息，让他们对图像所传达的内容有一个很好的了解。在此示例中，我们当前的文本“我的测试图像”不好，因为它没有传达有关图像的描述性信息。对于我们的 Firefox 徽标来说，一个更好的替代方案是“Firefox 徽标：一只火焰狐狸围绕着地球。”

注意：诸如 <img> 之类的元素没有内容或结束标签，因此被称为空（或空元素）元素。它们有时会在单个标签的末尾写入一个尾部斜杠（<img />），但这是可选的。

现在，让我们来显示您的图像。

在 first-website 文件夹中，创建一个名为 images 的新文件夹，并将您在上一示例中选择的图像放入此文件夹中。
在 <img> 标签的 src 属性值中，输入您的图片路径。它位于一个名为 images 的文件夹中，该文件夹与您的 index.html 文件位于同一目录中，因此路径将是 images/ 加上您的图片名称。例如，如果您的图片名为 firefox-icon.png，您的 src 属性将如下所示：src="images/firefox-icon.png"。
将 alt 属性值——My test image——替换为更详细描述图像的文本。
在网络浏览器中打开您的 index.html 文件。您应该会看到您的图像显示出来。如果没有，请将您的 <img> 元素与我们的代码进行对照检查；确保它没有遗漏任何语法，例如引号。确保图像文件名正确。

如果图像非常大，因此无法完全显示在屏幕上，请不要担心。我们将在下一篇文章中解决此问题。

注意：在我们的无障碍多媒体教程和alt 属性决策树中了解更多关于在各种情况下使用图像的 alt 属性。

标记文本

本节将介绍一些用于标记文本的基本 HTML 元素。

注意：Scrimba 的语义 HTML 基础^{MDN 学习合作伙伴}是一门互动课程，提供了 HTML 的有用描述，特别强调了其语义方面的重要性。

标题

标题元素允许您指定内容的某些部分是标题或副标题。就像一本书有主标题、章节标题和副标题一样，HTML 文档也可以有。HTML 包含 6 个标题级别，<h1>–<h6>，尽管您通常最多只使用 3 到 4 个

html

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

注意：HTML 中  之间的任何内容都是 HTML 注释。浏览器在渲染代码时会忽略注释。换句话说，它们在页面上不可见——只在代码中可见。HTML 注释是您添加有关代码或逻辑的笔记的一种方式，这可能对其他从事相同代码的人有用，或者如果您在 6 个月后回来查看，并且不记得您做了什么。

将您的页面标题添加到 HTML 页面中，放在您的 <img> 元素上方，并用 <h1> ... </h1> 标签包裹。保存文件并在浏览器中查看效果。

段落

段落 <p> 元素用于包含文本段落；在标记常规文本内容时，您会频繁使用它们

html

<p>This is a single paragraph</p>

将上一篇文章中的示例文本添加到一个或几个段落中，直接放在您的 <img> 元素下方。保存它并在浏览器中查看您的页面。

列表

许多网络内容都是列表，HTML 为此提供了特殊元素。标记列表总是至少包含 2 个元素。最常见的列表类型是有序列表和无序列表

无序列表用于项目顺序不重要的列表，例如购物清单。这些列表用 <ul> 元素包裹。
有序列表用于项目顺序重要的列表，例如食谱中的烹饪说明列表。这些列表用 <ol> 元素包裹。

列表中的每个项目都放在一个 <li> (列表项) 元素中。

例如，如果我们想将以下段落片段的一部分转换为列表

html

<p>
  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…
</p>

我们可以将标记修改为

html

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together…</p>

尝试向您的示例页面添加有序或无序列表，并在浏览器中查看结果。

创建链接

链接非常重要——它们是构成网络的要素！要添加链接，我们需要使用 <a> 元素，“a”是“anchor”的缩写。要将段落中的文本转换为链接，请遵循以下步骤

选择一些文本。我们选择了“Mozilla Manifesto”这段文字。
将文本用 <a> 元素包裹起来，如下所示
html
```
<a>Mozilla Manifesto</a>
```
给 <a> 元素一个 href 属性，如下所示
html
```
<a href="">Mozilla Manifesto</a>
```

用您希望链接指向的网址填写此属性的值

html

<a href="https://www.mozilla.org/en-US/about/manifesto/">
  Mozilla Manifesto
</a>

如果您省略了网址开头的 https:// 或 http:// 部分，即所谓的协议，您可能会得到意想不到的结果。创建链接后，点击它以确保它将您发送到您想要去的地方。

注意： href 最初可能看起来是一个相当晦涩的属性名。它代表 hypertext reference（超文本引用）。

现在，如果还没有，请向您的页面添加一个链接。

总结

如果您遵循了本文中的所有说明，您最终将得到一个如下所示的页面（您也可以在此处查看）

A web page screenshot showing a Firefox logo, a heading saying Mozilla is cool, and two paragraphs of filler text

如果您遇到困难，您可以随时将您的工作与我们 GitHub 上的完成示例代码进行比较。

在这里，我们只是初步接触了 HTML。您将在本课程后面的使用 HTML 组织内容核心模块中学习更多知识。

另见

学习 HTML 和 CSS, Scrimba ^{MDN 学习合作伙伴}: Scrimba 的 学习 HTML 和 CSS 课程通过构建和部署五个出色的项目，以及由知识渊博的老师讲授的有趣互动课程和挑战，教你 HTML 和 CSS。

帮助改进 MDN

了解如何贡献

本页面最后由MDN 贡献者于2025 年 6 月 24 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题