HTML 基本语法

什么是 HTML？

HTML（超文本标记语言）是一种标记语言，它告诉网络浏览器如何构建您访问的网页。它可以像网页开发者希望的那样复杂或简单。HTML 由一系列元素组成，您可以使用它们来包含、包装或标记内容的不同部分，使其以某种方式显示或表现。包围的标签可以将内容变成连接到另一个页面的超链接、使单词斜体化等等。例如，考虑以下一行文本：

My cat is very grumpy

如果我们希望文本独立存在，我们可以通过将其包含在段落（<p>）元素中来指定它是一个段落。

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

HTML 存在于名为 HTML 文档的文本文件中，或简称 文档，文件扩展名为 .html。我们之前讨论过网页，HTML 文档包含网页的内容并指定其结构。

您会遇到的最常见的 HTML 文件是 index.html，它通常用于包含网站的主页内容。在子文件夹中看到自己的 index.html 也很常见，因此一个网站可以在不同的位置拥有多个索引文件。

HTML 元素的结构

让我们进一步探讨上一节中的段落元素

我们元素的结构是

• 开始标签：这由元素名称（在此示例中，段落为 p）组成，并用尖括号包围。此开始标签标记元素的开始或生效之处。在此示例中，它位于段落文本的开头之前。
• 内容：这是元素的内容。在此示例中，它是段落文本。
• 结束标签：这与开始标签相同，只是它在元素名称之前包含一个正斜杠。这标记了元素的结束位置。未能包含结束标签是初学者常犯的错误，可能会导致奇怪的结果。

元素是开始标签，后跟内容，再后跟结束标签。

创建你的第一个 HTML 元素

让我们练习编写自己的 HTML 元素

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
2. 用 <em> 和 </em> 标签包裹这行文本。要打开元素，请将开始标签 <em> 放在行的开头。要关闭元素，请将结束标签 </em> 放在行的末尾。这样做应该会使输出面板中呈现的文本显示为斜体。
3. 如果您乐于冒险，可以尝试查找更多 HTML 元素并将其应用于文本示例。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

This is my text.

<em>This is my text.</em>

嵌套元素

元素可以放置在其他元素中。这称为嵌套。如果我们想说明我们的猫非常脾气暴躁，我们可以将“非常”这个词包裹在<strong>元素中，这意味着该词将具有强调的文本格式

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

嵌套有正确和错误的方式。在上面的例子中，我们首先打开了 p 元素，然后打开了 strong 元素。为了正确嵌套，我们应该先关闭 strong 元素，然后关闭 p 元素。

以下是错误嵌套方式的示例

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

标签必须以它们相互嵌套或包含的方式打开和关闭。像上面示例中那种重叠的方式，浏览器必须猜测您的意图。这种猜测可能会导致意想不到的结果。

空元素

并非所有元素都遵循开始标签、内容和结束标签的模式。有些元素由单个标签组成，通常用于在文档中插入/嵌入某些内容。此类元素称为空元素。例如，<img> 元素将图像文件嵌入到页面中。

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
  alt="Firefox icon" />

这将输出以下内容

属性

元素也可以有属性。属性看起来像这样

属性包含元素的额外信息，这些信息不会显示在内容中。在此示例中，class 属性是一个标识名称，用于使用样式信息定位元素。

属性应该有

• 它与元素名称之间有一个空格。（对于具有多个属性的元素，属性之间也应该用空格分隔。）
• 属性名称，后跟一个等号。
• 一个属性值，用开头和结尾的引号括起来。

向元素添加属性

现在又轮到你了。在本节中，我们将让你向 <img> 元素添加属性，以在页面上显示图像。<img> 元素可以接受几个属性，包括

• src：一个必需属性，指定图像的位置。例如：src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"。
• alt：图像的文本描述。例如：alt="Firefox 图标"。
• width：图像的宽度（以像素为单位）。例如：width="300"。
• height：图像的高度（以像素为单位）。例如：height="300"。

按照以下步骤完成任务

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
2. 在网上找到您最喜欢的图片，右键单击它，然后按“复制图片链接/地址”。
3. 回到 MDN 演练场，将 src 属性添加到 <img> 元素中，并将其值设置为步骤 2 中的链接。
4. 将 alt 属性设置为图像的适当描述。
5. 将 width 属性设置为例如 300 的值，以便您可以在输出面板中更好地查看图像。如果需要，进行调整。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

<img />

<img src="<URL-OF-IMAGE>" alt="A description of the image" width="300" />

布尔属性

有时您会看到没有值的属性。这完全可以接受。这些被称为布尔属性。当布尔属性没有值，或有任何值（即使是 "false"）时，布尔属性总是设置为 true。否则，如果属性没有写入 HTML 标签中，则属性设置为 false。规范要求属性的值要么是空字符串（包括当属性没有明确指定值时）要么与属性的名称相同，但其他值的工作方式也相同。例如，考虑您可以分配给表单输入元素的disabled属性。（您可以使用它来禁用表单输入元素，以便用户无法进行输入。禁用的元素通常呈现灰显外观。）例如

<input type="text" disabled="disabled" />

作为简写，可以接受将其写成如下形式

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />

作为参考，上面的示例还包含一个未禁用的表单输入元素。上面的 HTML 示例产生以下结果

省略属性值周围的引号

如果您查看许多其他网站的代码，您可能会遇到一些奇怪的标记样式，包括没有引号的属性值。这在某些情况下是允许的，但在其他情况下也可能会破坏您的标记。下面代码片段中的元素 <a> 称为锚点。锚点将文本括起来并将其转换为链接。href 属性指定链接指向的网址。您可以只使用 href 属性编写下面的基本版本，如下所示：

<a href=https://www.mozilla.org/>favorite website</a>

锚点还可以有一个 title 属性，用于描述链接页面。然而，一旦我们以与 href 属性相同的方式添加 title，就会出现问题

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

如上所述，浏览器错误地解释了标记，将 title 属性误认为是三个属性：一个值为 The 的 title 属性，以及两个布尔属性 Mozilla 和 homepage。显然，这不是预期目的！这会导致错误或意外行为，正如您在下面的实时示例中看到的那样。尝试将鼠标悬停在链接上以查看标题文本！

始终包含属性引号。这可以避免此类问题，并使代码更具可读性。

单引号还是双引号？

在本文中，您还会注意到属性是用双引号括起来的。但是，您可能会在某些 HTML 代码中看到单引号。这是一个风格问题。您可以随意选择自己喜欢的。这两行是等效的

<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>

确保不要混用单引号和双引号。下面这个例子展示了一种错误的引号混用方式

<a href="https://www.example.com'>A link to my example.</a>

然而，如果你使用一种类型的引号，你可以在你的属性值内部包含另一种类型的引号。

<a href="https://www.example.com" title="Isn't this fun?">
  A link to my example.
</a>

要在相同类型的引号（单引号或双引号）中包含引号，请使用字符引用。例如，这会导致错误

<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>

相反，你需要这样做

<a href="https://www.example.com" title="An &quot;interesting&quot; reference">A link to my example.</a>

HTML 文档的结构

单个 HTML 元素本身并不是很有用。接下来，让我们看看单个元素如何组合形成一个完整的 HTML 页面。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

我们这里有

1. <!doctype html>: 文档类型声明。当 HTML 诞生之初（1991-1992 年），文档类型声明旨在作为一套规则的链接，HTML 页面必须遵循这些规则才能被认为是良好的 HTML。文档类型声明过去看起来像这样：

   html

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   

   最近，文档类型声明是一个历史遗留物，需要包含它才能让所有其他内容正常工作。<!doctype html> 是最短的字符字符串，它被视为有效的文档类型声明。这就是您需要知道的一切！

2. <html></html>: <html> 元素。此元素包裹页面上的所有内容。它有时被称为根元素。

3. <head></head>：<head> 元素。此元素充当您希望包含在 HTML 页面上的所有内容（不是页面将显示给访问者的内容）的容器。这包括在搜索结果中显示的关键字和页面描述、用于样式内容的 CSS、字符集声明等等。您将在本系列的下一篇文章中了解更多信息。

4. <meta charset="utf-8">：<meta> 元素。此元素表示无法由其他 HTML 元相关元素表示的元数据，例如 <base>、<link>、<script>、<style> 或 <title>。charset 属性将文档的字符编码指定为 UTF-8，它包括绝大多数人类书写语言中的大多数字符。通过此设置，页面现在可以处理它可能包含的任何文本内容。没有理由不设置此项，并且它可以帮助避免以后出现一些问题。

5. <title></title>：<title> 元素。这设置了页面的标题，即页面加载时浏览器选项卡中显示的标题。页面标题也用于在页面被收藏时描述页面。

6. <body></body>：<body> 元素。此元素包含页面上显示的所有内容，包括文本、图像、视频、游戏、可播放的音频轨道或任何其他内容。

向 HTML 文档添加一些功能

此时，我们希望您练习编写一些稍微更实质性的 HTML 内容。为此，您有几个选择——您可以在本地计算机上创建 HTML，或像之前的示例一样使用 MDN 演练场。

• 在本地计算机上操作

  1. 复制上一节中列出的 HTML 页面示例，并将其粘贴到您的代码编辑器中的新文件中。
  2. 按照以下说明对页面进行更改。
  3. 将文件保存为 index.html，然后在新的浏览器标签页中加载它以查看结果。

  注意：您也可以在我们的 GitHub 存储库中找到这个基本 HTML 模板。您可以复制此文件，而不是自己创建它。

• 要在 MDN 演练场中操作，请单击下方输出面板中的“播放”以编辑示例，然后按照以下说明进行操作。如果您出错，可以使用 MDN 演练场中的“重置”按钮清除您的工作。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

以下是要遵循的说明

1. 在 <body> 元素的开始标签正下方，添加文档的主标题。这应该被包裹在 <h1> 开始标签和 </h1> 结束标签中。
2. 编辑段落内容，使其包含您感兴趣的主题的文本。
3. 将重要的词语用粗体显示，方法是将它们包含在 <strong> 元素中。
4. 在您的段落中添加两个链接。这是通过使用 <a> 元素实现的。
5. 如文章前面所解释的，向您的文档添加一张图片。将其放置在段落下方。如果它太大而无法看清，请为其添加一个 width 属性，以将其缩小。

如果你真的卡住了，你可以在这里查看解决方案

<h1>Some music</h1>
<p>
  I really enjoy <strong>playing the drums</strong>. One of my favorite drummers
  is Neal Peart, who used to play in the band
  <a href="https://en.wikipedia.org/wiki/Rush_%28band%29">Rush</a>. My favorite
  Rush album is currently
  <a href="https://www.deezer.com/album/942295">Moving Pictures</a>.
</p>
<img
  src="https://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"
  alt="Rush Moving Pictures album cover"
  width="300" />

HTML 中的空白字符

在上面的示例中，您可能已经注意到代码中包含大量空白。这是可选的。这两个代码片段是等效的

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

无论您在 HTML 元素内容中使用多少空白（可以包括一个或多个空格字符，也包括换行符），HTML 解析器在渲染代码时都会将每个空白序列缩减为一个空格。那么为什么使用如此多的空白呢？答案是可读性。

如果您的代码格式良好，则更容易理解其内容。在我们的 HTML 中，每个嵌套元素都比其包含的元素多缩进两个空格。由您选择格式化样式（例如，每个缩进级别使用多少空格），但您应该考虑对其进行格式化。

让我们看看浏览器如何渲染上面带有和不带有空白的两个段落

const noWhitespace = document.getElementById("noWhitespace").innerHTML;
console.log(noWhitespace);
// "Dogs are silly."

const whitespace = document.getElementById("whitespace").innerHTML;
console.log(whitespace);
// "Dogs
//    are
//        silly."

字符引用：在 HTML 中包含特殊字符

在 HTML 中，字符 <、>、"、' 和 & 是特殊字符。它们是 HTML 语法本身的一部分。那么如何在文本中包含这些特殊字符呢？例如，如果您想使用 & 符号或小于号，但又不希望它被解释为代码。

您可以使用字符引用来完成此操作。这些是表示字符的特殊代码，用于这些精确的情况。每个字符引用都以 & 号 (&) 开头，并以分号 (;) 结尾。

字符引用等价物很容易记住，因为其使用的文本可以被视为 < 的“小于”、" 的“引号”，依此类推。要了解更多关于实体引用的信息，请参阅XML 和 HTML 字符实体引用列表 (Wikipedia)。

在下面的示例中，有两个段落

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

在下面的实时输出中，您可以看到第一个段落出了问题。浏览器将第二个 <p> 实例解释为开始一个新的段落。第二个段落看起来很好，因为它有带字符引用的尖括号。

HTML 注释

HTML 有一种在代码中编写注释的机制。浏览器会忽略注释，使注释对用户来说实际上是不可见的。注释的目的是允许您在代码中包含注释，以解释您的逻辑或编码。如果您在离开代码库足够长的时间后返回，并且不完全记得它，这将非常有用。同样，当不同的人进行更改和更新时，注释是无价的。

要编写 HTML 注释，请将其包含在特殊标记 <!-- 和 --> 中。例如

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

如您在下方所见，实时输出中只显示了第一个段落。

总结

您已经完成了本文的学习！希望您喜欢这次 HTML 基础知识之旅。

此时，您应该了解 HTML 的外观及其基本工作原理。您还应该能够编写一些元素和属性。本模块后续文章将进一步探讨此处介绍的一些主题，并介绍该语言的其他概念。

• 随着您开始更多地学习 HTML，请考虑学习 CSS（层叠样式表）的基础知识。CSS 是用于设置网页样式的语言，例如更改字体或颜色或修改页面布局。HTML 和 CSS 配合得很好，您很快就会发现。

另见

• 使用 CSS 将颜色应用于 HTML 元素

• 概述：使用 HTML 构造内容
• 下一页