HTML 基础知识-CFANZ编程社区

HTML（HyperText Markup Language）是用于构建网页及其内容的代码。例如，内容可以在一组段落、项目符号列表或使用图像和数据表中构建。正如标题所示，本文将为您提供对HTML及其功能的基本了解。

那么什么是HTML呢？

HTML 是一种标记语言，用于定义内容的结构。HTML由一系列元素组成，您可以使用这些元素来封装或包装内容的不同部分，以使其以某种方式显示或以某种方式执行操作。封闭标签可以使单词或图像超链接到其他地方，可以斜体单词，可以使字体变大或变小，等等。例如，采用以下内容行：

My cat is very grumpy

如果我们希望该行独立存在，则可以通过将它包含在段落标记中来指定它是一个段落：

<p>My cat is very grumpy</p>

复制到剪贴板

HTML 元素剖析

让我们进一步探讨这一段元素。

HTML 基础知识_html

我们元素的主要部分如下：

开始标记：它由元素的名称（在本例中为 p）组成，用左尖括号和右尖括号括起来。这表示元素开始或开始生效的位置 - 在本例中为段落开始的位置。
结束标记：这与开始标记相同，只是它在元素名称前包含正斜杠。这表示元素的结束位置 — 在本例中为段落结束的位置。未能添加结束标记是标准的初学者错误之一，可能会导致奇怪的结果。
内容：这是元素的内容，在本例中，它只是文本。
元素：开始标记、结束标记和内容共同构成元素。

元素还可以具有如下所示的属性：

HTML 基础知识_html_02

属性包含有关您不希望在实际内容中显示的元素的额外信息。此处，是属性名称，并且是属性值。该属性允许您为元素提供一个非唯一标识符，该标识符可用于通过样式信息和其他内容来定位该元素（以及具有相同值的任何其他元素）。classeditor-noteclassclass

属性应始终具有以下各项：

它与元素名称（或上一个属性，如果元素已具有一个或多个属性）之间的空格。
后跟等号的属性名称。
由左引号和右引号括起来的属性值。

注意：不包含 ASCII 空格（或任何字符）的简单属性值可以保持不带引号，但建议您引用所有属性值，因为它会使代码更加一致和易于理解。"'`=<>

嵌套元素

您也可以将元素放在其他元素中 - 这称为嵌套。如果我们想说我们的猫脾气暴躁，我们可以将“非常”这个词包装成一个<强>元素，这意味着这个词要被强烈强调：

<p>My cat is <strong>very</strong> grumpy.</p>

复制到剪贴板

但是，您需要确保元素正确嵌套。在上面的示例中，我们首先打开<p>元素，然后打开<强>元素;因此，我们必须首先关闭<强>元素，然后关闭<p>元素。以下不正确：

<p>My cat is <strong>very grumpy.</p></strong>

元素必须正确打开和关闭，以便它们清楚地位于彼此内部或外部。如果它们如上所示重叠，那么您的Web浏览器将尝试对您要说的话进行最佳猜测，这可能会导致意外的结果。所以不要这样做！

空元素

某些元素没有内容，称为空元素。以我们在HTML页面中已有的<img>元素为例：

<img src="images/firefox-icon.png" alt="My test image">

复制到剪贴板

它包含两个属性，但没有结束标记，也没有内部内容。这是因为图像元素不会包装内容以影响它。其目的是将图像嵌入 HTML 页面中显示的位置。</img>

HTML 文档剖析

这总结了各个HTML元素的基础知识，但它们本身并不方便。现在，我们将看看如何将各个元素组合在一起以形成整个HTML页面。让我们重新审视我们放入示例中的代码（我们在处理文件一文中首次遇到）：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

复制到剪贴板

在这里，我们有以下内容：

<!DOCTYPE html>—文档类型。这是一个必要的序言。在时间的迷雾中，当HTML还很年轻（大约1991/92年），doctypes旨在充当一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这可能意味着自动错误检查和其他有用的东西。然而，如今，它们并没有做太多事情，基本上只需要确保您的文档行为正确。这就是您现在需要知道的。
<html></html>—<html> 元素。此元素包装整个页面上的所有内容，有时称为根元素。
<head></head>—<头>元素。此元素充当要包含在 HTML 页面上的所有内容的容器，这些内容不是您向页面查看者显示的内容。这包括您希望在搜索结果中显示的关键字和页面描述，用于设置内容样式的CSS，字符集声明等内容。
<meta charset="utf-8">— 此元素将文档应使用的字符集设置为 UTF-8，其中包括绝大多数书面语言中的大多数字符。从本质上讲，它现在可以处理您可能放在其上的任何文本内容。没有理由不设置它，它可以帮助避免以后的一些问题。
<title></title>—<标题>元素。这将设置页面的标题，该标题显示在加载页面的浏览器选项卡中。它还用于在添加书签/收藏页面时描述页面。
<body></body>—<体>元素。这包含您希望在 Web 用户访问您的页面时向他们显示的所有内容，无论是文本、图像、视频、游戏、可播放音轨还是其他任何内容。

图像

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

<img src="images/firefox-icon.png" alt="My test image">

复制到剪贴板

正如我们之前所说，它将图像嵌入到我们页面中显示的位置。它通过（source）属性执行此操作，该属性包含图像文件的路径。src

我们还包含了一个（替代）属性。在此属性中，您可以为无法看到图像的用户指定描述性文本，这可能是由于以下原因：alt

他们有视力障碍。有严重视觉障碍的用户通常使用称为屏幕阅读器的工具向他们读出替代文本。
出现问题，导致图像无法显示。例如，尝试故意更改属性中的路径以使其不正确。如果保存并重新加载页面，则应看到以下内容代替图像：src

HTML 基础知识_firefox_03

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

现在尝试为您的图像提出一些更好的替代文本。

标记文本

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

标题

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

<!-- 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 注释是编写有关代码或逻辑的有用注释的一种方式。

现在，尝试在 html 页面的<img>元素的正上方添加合适的标题。

注意：您将看到标题级别 1 具有隐式样式。不要使用标题元素来使文本变大或加粗，因为它们用于可访问性和其他原因，例如SEO。尝试在页面上创建有意义的标题序列，而不跳过级别。

段落

如上所述，<p>要素用于包含文本段落;因此，这些要素用于包含文本段落。在标记常规文本内容时，您将经常使用这些内容：

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

复制到剪贴板

将示例文本（您应该从您的网站会是什么样子？）添加到一个或几个段落中，放在<img>元素的正下方。

列表

网络上的许多内容都是列表，HTML具有这些内容的特殊元素。标记列表始终至少包含 2 个元素。最常见的列表类型是有序列表和无序列表：

无序列表适用于项目顺序无关紧要的列表，例如购物清单。它们被包装在<ul>元素中。
有序列表适用于项目顺序确实很重要的列表，例如配方。它们被包装在<ol>元素中。

列表中的每个项都放在一个 <li>（列表项）元素中。

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

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

复制到剪贴板

我们可以将标记修改为此

<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> 元素中，如下所示：

<a>Mozilla Manifesto</a>

复制到剪贴板
为<a> 元素指定一个属性，如下所示：href

<a href="">Mozilla Manifesto</a>

复制到剪贴板
用您希望链接指向的网址填写此属性的值：

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

复制到剪贴板

如果在 Web 地址的开头省略或部分（称为协议），则可能会得到意外结果。创建链接后，单击它以确保它正在将您发送到所需的位置。https://http://

注意：乍一看，对于属性名称来说，这似乎是一个相当模糊的选择。如果你在记住它时遇到困难，请记住它代表hypertext reference。href

立即添加指向您页面的链接（如果尚未添加）。

结论

如果您已经按照本文中的所有说明进行操作，则最终应看到一个如下所示的页面（您也可以在此处查看）：

HTML 基础知识_剪贴板_04