如何嵌套HTML元素

水深无声 2022-11-28 15:20 243阅读 0赞

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With HTML]**

This tutorial series will guide you through creating and further customizing [this website][] using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the [beginning of the series][How To Build a Website With HTML] if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义[此网站][this website] 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从[本系列][How To Build a Website With HTML]的[开头开始][How To Build a Website With HTML] 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

This tutorial will teach you how to nest HTML elements in order to apply multiple HTML tags to a single piece of content.

本教程将教您如何嵌套HTML元素，以便将多个HTML标签应用于单个内容。

HTML elements can be *nested*, meaning that one element can be placed inside another element. Nesting allows you to apply multiple HTML tags to a single piece of content. For example, try pasting the following code snippet inside your `index.html` file:

HTML元素可以*嵌套* ，这意味着一个元素可以放在另一个元素内。 嵌套允许您将多个HTML标签应用于单个内容。 例如，尝试将以下代码片段粘贴到`index.html`文件中：

My bold text and my bold and emphasized text

Save your file and reload it in the browser. (For instructions on creating an `index.html` file, please see our [tutorial here][] or for loading the file in your browser, see our [tutorial here][tutorial here 1].) You should receive something like this:

保存文件，然后将其重新加载到浏览器中。 (有关创建`index.html`文件的说明，请参见[此处][tutorial here]的[教程，][tutorial here]或有关如何在浏览器中加载文件的信息，请参见[此处][tutorial here]的[教程][tutorial here 1] 。)您应该收到类似以下内容的信息：

**My bold text and *my bold and emphasized text***

**我的粗体字以及*我的粗体和强调文本***

## 嵌套最佳做法 **(**Nesting Best Practices**)** ##

Note that it is recommended to always close nested tags in the reverse order that they were opened. For example, in the example below, the `` tag closes first as it was the last tag to open. The `` tag closes last as it was the first to open.

请注意，建议始终以与打开嵌套标签相反的顺序关闭它们。 例如，在下面的示例中， ``标签首先关闭，因为它是最后打开的标签。 ``标记是第一个打开的，因此最后关闭。

This sentence contains HTML elements that are nested according to best practices.

As a counter example, the following HTML code contains tags that are *not* nested according to best practices, as the `` tag closes *before* the `` tag:

作为反例，以下HTML代码包含根据最佳实践*未*嵌套的标记，因为``标记*在* ``标记*之前*关闭：

This sentence contains HTML elements that are not nested according to best practices.

While not technically necessary for rendering your HTML in the browser, nesting your tags in the proper order can help improve the readability of your HTML code for you or other developers.

尽管从技术上来说不需要在浏览器中呈现HTML，但按正确的顺序嵌套标签可以帮助您或其他开发人员提高HTML代码的可读性。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-nest-html-elements][https_www.digitalocean.com_community_tutorials_how-to-nest-html-elements]

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[tutorial here]: https://www.digitalocean.com/community/tutorials/setting-up-your-html-project
[tutorial here 1]: https://www.digitalocean.com/community/tutorials/html-elements#loading-an-html-file-in-your-browser
[https_www.digitalocean.com_community_tutorials_how-to-nest-html-elements]: https://www.digitalocean.com/community/tutorials/how-to-nest-html-elements