html块状元素和内联元素_如何在HTML中使用内联和块元素

小咪咪 2022-11-28 15:23 232阅读 0赞

html块状元素和内联元素

**[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 the difference between inline-level and block-level elements in HTML and how they affect a piece of content’s position on the page.

本教程将教您HTML中的内联级元素和块级元素之间的区别，以及它们如何影响内容在页面上的位置。

When arranging elements in an HTML document, it’s important to understand how these elements take up space on a webpage. Certain elements can take up much more space on the webpage than the content they contain. Understanding the behavior of different element types will help you anticipate how they affect the position of other elements on the page.

在HTML文档中排列元素时，重要的是要了解这些元素如何占用网页上的空间。 某些元素在网页上所占的空间可能要比它们所包含的内容大得多。 了解不同元素类型的行为将帮助您预期它们如何影响页面上其他元素的位置。

In general, there are two different types of elements—*inline-level elements* and *block-level elements*—whose spacing defaults behave differently from one another. Below, we’ll describe how the default settings of these elements determine their position on the webpage and relative to the position of nearby elements.

通常，有两种不同类型的元素( *内联级别的元素*和*块级别的元素)，*它们的默认间隔行为彼此不同。 下面，我们将描述这些元素的默认设置如何确定它们在网页上的位置以及相对于附近元素的位置。

## 内联级元素 **(**Inline-level Elements**)** ##

*Inline elements* are elements whose horizontal width is determined by the width of the content they contain. The `<strong>` element and the `<em>` element we covered in the [last tutorial][] are both examples of inline elements.

*内联元素*是其水平宽度由其包含的内容的宽度确定的元素。 我们在上[一教程][last tutorial]中介绍的`<strong>`元素和`<em>`元素都是内联元素的示例。

We can use Firefox’s Web Developer Inspector to inspect the size of HTML elements on a webpage. (If you are using Chrome, you can use the Developer Inspect Elements tool instead but this tutorial will give instructions for Firefox’s Web Developer tool.)

我们可以使用Firefox的Web开发人员检查器检查网页上HTML元素的大小。 (如果您使用的是Chrome，则可以改用Developer Inspect Elements工具，但本教程将为Firefox的Web Developer工具提供说明。)

Return to the `index.html` file that you loaded in your browser. If you need to reload it and don’t remember how, refer to the instructions [Loading an HTML File in your Browser][] from the last tutorial.

返回到您在浏览器中加载的`index.html`文件。 如果您需要重新加载它并且不记得要怎么做，请参考上一教程[中的在浏览器中加载HTML文件][Loading an HTML File in your Browser]的说明。

Then navigate to the Tools menu item in the top menu bar and select “Web Developer/Inspector.” Selecting this menu item will open up the Inspector interface that allows you to inspect the HTML and CSS of a webpage. Next, hover your cursor over the text `My strong text`, which should highlight the text in light blue. This highlighting shows the full extent of the space occupied by the element that your cursor is hovering over. As you may have expected, the element’s occupied space is just large enough to contain its text content:

然后导航到顶部菜单栏中的“工具”菜单项，然后选择“ Web Developer / Inspector”。 选择此菜单项将打开Inspector界面，使您可以检查网页HTML和CSS。 接下来，将光标悬停在`My strong text` ，该`My strong text`应以浅蓝色突出显示。 此高亮显示了光标悬停在元素上的全部空间。 如您所料，元素的占用空间足以容纳其文本内容：

Unlike block-level elements, which we’ll cover in the next section, inline elements do not take up their own line of horizontal space. Thus, inline elements will rest side by side on a webpage if you do not specify a break with an additional HTML element, such as the line break `<br>` element. This sizing default is often convenient, as you may want to mark up single words in a paragraph with an inline element such as `<strong>` or `<em>` without pushing subsequent text to the next line.

与我们将在下一节中介绍的块级元素不同，内联元素不会占用自己的水平空间线。 因此，如果您未使用其他HTML元素(例如换行符`<br>`元素)指定换行符，则内联元素将并排放置在网页上。 这种大小上的默认设置通常很方便，因为您可能希望使用内嵌元素(例如`<strong>`或`<em>`在段落中标记单个单词，而无需将后续文本推到下一行。

Try adding the `<br>` tag in between your two lines of code in the `index.html` file. (You will need to return to your file in the text editor.) Note that the `<br>` element only requires an opening tag and does not wrap around any text:

尝试在`index.html`文件的两行代码之间添加`<br>`标记。 (您需要在文本编辑器中返回到文件。)请注意， `<br>`元素仅需要一个开始标记，而不会环绕任何文本：

<strong>My strong text</strong>
    <br>
    <em>My emphasized text</em>

Save and reload the document in your browser to check your results. You should receive something like this:

在浏览器中保存并重新加载文档以检查结果。 您应该会收到以下信息：

**My strong text** *My emphasized text*

**我的强文本** *我的强调文本*

Your two phrases should now be on separate lines as they are now separated by the line break element `<br>`.

您的两个词组现在应该放在单独的行上，因为它们现在由换行符`<br>`分隔。

If you use the Firefox Web Developer Inspector to check the size of the elements, you can confirm that the width of each of the text elements is still determined by the width of the text content:

如果您使用Firefox Web Developer Inspector检查元素的大小，则可以确认每个文本元素的宽度仍由文本内容的宽度确定：

## 块级元素 **(**Block-level Elements**)** ##

*Block-level elements* behave differently than inline-level elements in that they take up an entire line of horizontal space on a webpage. This means that they automatically start on a new line and that they automatically push subsequent elements onto a new line as well.

*块级元素的*行为与行内*元素*不同，因为它们占据了网页上整行的水平空间。 这意味着它们会自动从新行开始，并且它们也会自动将后续元素推到新行。

For example, the HTML heading elements (`<h1>` through `<h6>`) are block-level elements that automatically place their content onto a new line and push any content that follows onto a new line. Each of these six heading elements represent a different heading size.

例如，HTML标题元素( `<h1>`至`<h6>` )是块级元素，可自动将其内容放置在新行上，并将其后的任何内容压入新行。 这六个标题元素中的每一个代表不同的标题大小。

Let’s study how this works in practice. At the bottom of your `index.html` file, try pasting in the highlighted code snippet:

让我们研究一下这是如何工作的。 在`index.html`文件的底部，尝试粘贴突出显示的代码段：

<strong>My strong text</strong>
    <br>
    <em>My emphasized text</em>
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

Save your file and reload it in the browser. You should receive something like this:

保存文件，然后将其重新加载到浏览器中。 您应该会收到以下信息：

Let’s now inspect the block-level heading elements to study how they differ from the inline-level text elements above. Open up the Firefox Web Developer Inspector and hover over each of the elements to inspect their occupied space as indicated by the blue highlighting. You should be able to confirm that the occupied horizontal space of each of the inline-level elements is determined by its text content, while the occupied horizontal space of each of the block-level elements stretches across the entire web page:

现在，让我们检查块级标题元素，以研究它们与上面的内联级文本元素的区别。 打开Firefox Web Developer检查器，将鼠标悬停在每个元素上以检查其占用的空间，如蓝色突出显示所示。 您应该能够确认每个内联级元素的占用水平空间是由其文本内容决定的，而每个块级元素的占用水平空间则遍布整个网页：

Block-level elements *will always* push inline-level elements down to the next line, even if you write those HTML elements on the same line of the HTML document. To confirm this for yourself, try writing a block-level element and an inline-level element on the same line of your `index.html` file. Erase the existing content from your file and add the following code snippet:

块级元素*将始终*将内联级元素下推到下一行，即使您在HTML文档的同一行上编写了这些HTML元素。 为了自己确认这一点，请尝试在`index.html`文件的同一行上编写一个块级元素和一个内联级元素。 删除文件中的现有内容，并添加以下代码段：

<strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a>

Can you guess how this HTML code will render in the browser? Save your file and reload it in the browser. You should receive something like this:

您能猜出该HTML代码如何在浏览器中呈现吗？ 保存文件，然后将其重新加载到浏览器中。 您应该会收到以下信息：

Notice that the heading element `<h1>` has started on a new line and pushed the subsequent text element to a new line even though the elements were written on the same line in the HTML document.

请注意，标题元素`<h1>`新行开始，并将后继的text元素推到了新行，即使这些元素被写在HTML文档的同一行中。

You should now have an understanding of how inline-level and block-level elements are positioned and how they affect the position of nearby elements. Remembering their distinct behaviors can be useful when arranging HTML elements in the future.

现在，您应该了解内联级和块级元素的放置方式以及它们如何影响附近元素的位置。 在将来安排HTML元素时，记住它们的独特行为会很有用。

We’ll continue learning about new inline and block elements in the tutorials ahead.

我们将在前面的教程中继续学习新的内联和块元素。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-use-inline-and-block-elements-in-html][https_www.digitalocean.com_community_tutorials_how-to-use-inline-and-block-elements-in-html]

html块状元素和内联元素

[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/
[last tutorial]: https://www.digitalocean.com/community/tutorials/html-elements
[Loading an HTML File in your Browser]: https://www.digitalocean.com/community/tutorials/html-elements#loading-an-html-file-in-your-browser
[https_www.digitalocean.com_community_tutorials_how-to-use-inline-and-block-elements-in-html]: https://www.digitalocean.com/community/tutorials/how-to-use-inline-and-block-elements-in-html