HTML 基础知识

¥So what is HTML?

HTML 是一种定义内容结构的标记语言。HTML 由一系列 elements 组成，你可以使用它们来包围或封装内容的不同部分，使其以某种方式显示或以某种方式运行。封闭的 tags 可以将单词或图片超链接到其他地方，可以将单词设置为斜体，可以使字体变大或变小，等等。例如，采用以下内容行：

¥HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

My cat is very grumpy

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

¥If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

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

¥Anatomy of an HTML element

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

¥Let's explore this paragraph element a bit further.

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

¥The main parts of our element are as follows:

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

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

¥Elements can also have attributes that look like the following:

属性包含有关你不希望出现在实际内容中的元素的额外信息。这里，class 是属性名称，editor-note 是属性值。class 属性允许你为元素提供一个非唯一标识符，该标识符可用于通过样式信息和其他内容来定位该元素（以及具有相同 class 值的任何其他元素）。有些属性没有值，例如 required。

¥Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required.

设置值的属性始终具有：

¥Attributes that set a value always have:

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

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

¥Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < >) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

¥Nesting elements

你也可以将元素放入其他元素中 - 这称为嵌套。如果我们想表示我们的猫非常脾气暴躁，我们可以将单词 "very" 封装在 <strong> 元素中，这意味着要强烈强调该单词：

¥You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized:

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

但是，你确实需要确保元素正确嵌套。在上面的例子中，我们先打开了 <p> 元素，然后打开了 <strong> 元素；因此，我们必须先关闭 <strong> 元素，然后关闭 <p> 元素。下列说法不正确的是：

¥You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect:

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

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

¥The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!

¥Void elements

有些元素没有内容，称为 void elements。采用 HTML 页面中已有的 <img> 元素：

¥Some elements have no content and are called void elements. Take the <img> element that we already have in our HTML page:

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

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

¥This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

¥Anatomy of an HTML document

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

¥That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):

<!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="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

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

¥Here, we have the following:

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

¥Images

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

¥Let's turn our attention to the <img> element again:

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

正如我们之前所说，它将图片嵌入到页面中出现的位置。它通过 src（源）属性来完成此操作，该属性包含图片文件的路径。

¥As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

我们还添加了 alt（替代）属性。在 alt 属性 中，你为看不到图片的用户指定描述性文本，可能是由于以下原因：

¥We have also included an alt (alternative) attribute. In the alt attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

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

替代文本的关键字是 "描述性文本"。你编写的替代文本应该为读者提供足够的信息，以便更好地了解图片传达的内容。在这个例子中，我们当前的 "我的测试图片" 文本一点也不好。我们的 Firefox 徽标的更好替代方案是“Firefox 徽标：一只围绕着地球的火焰狐狸。”

¥The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

现在尝试为你的图片想出一些更好的替代文本。

¥Try coming up with some better alt text for your image now.

注意：在我们的 无障碍学习模块 中了解有关辅助功能的更多信息。

¥Note: Find out more about accessibility in our accessibility learning module.

¥Marking up text

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

¥This section will cover some essential HTML elements you'll use for marking up the text.

¥Headings

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

¥Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6>, although you'll commonly only use 3 to 4 at most:

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

¥Note: Anything in HTML between <!-- and --> is an HTML comment. The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic.

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

¥Now try adding a suitable title to your HTML page just above your <img> element.

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

¥Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.

¥Paragraphs

如上所述，<p> 元素用于包含文本段落；在标记常规文本内容时，你将经常使用这些：

¥As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

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

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

¥Add your sample text (you should have it from What will your website look like?) into one or a few paragraphs, placed directly below your <img> element.

¥Lists

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

¥A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

1. 无序列表适用于项目顺序无关紧要的列表，例如购物清单。它们被包裹在 <ul> 元素中。
2. 有序列表适用于项目顺序很重要的列表，例如秘诀。它们被包裹在 <ol> 元素中。

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

¥Each item inside the lists is put inside an <li> (list item) element.

例如，如果我们想将以下段落片段的部分变成列表

¥For example, if we wanted to turn the part of the following paragraph fragment into a list

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

我们可以将标记修改为这样

¥We could modify the markup to this

<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>

尝试向示例页面添加有序或无序列表。

¥Try adding an ordered or unordered list to your example page.

¥Links

链接非常重要 - 它们使网络成为网络！要添加链接，我们需要使用一个简单的元素 - <a> - "a" 是 "anchor" 的缩写形式。要将段落中的文本设为链接，请按照下列步骤操作：

¥Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

1. 选择一些文字。我们选择文本 "Mozilla 声明"。
2. 将文本包裹在 <a> 元素中，如下所示：
   html

   <a>Mozilla Manifesto</a>
   

3. 给 <a> 元素赋予 href 属性，如下所示：
   html

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

4. 使用你希望链接指向的网址填写此属性的值：
   html

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

如果省略网址开头的 https:// 或 http:// 部分（称为协议），可能会得到意外结果。创建链接后，单击它以确保它将发送到你想要的位置。

¥You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

注意：乍一看，href 可能看起来像是一个相当晦涩的属性名称选择。如果你难以记住它，请记住它代表超文本参考。

¥Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.

如果你还没有添加指向你页面的链接，请立即添加。

¥Add a link to your page now, if you haven't already done so.

¥Conclusion

如果你已按照本文中的所有说明进行操作，你最终应该会看到如下所示的页面（你也可以 在这里查看）：

¥If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here):

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

¥If you get stuck, you can always compare your work with our finished example code on GitHub.

在这里，我们只是真正触及了 HTML 的表面。要了解更多信息，请转到我们的 学习 HTML 主题。

¥Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.