html块状元素和内联元素_HTML中的内联元素和块元素-解释

html块状元素和内联元素

块和内联元素 (Block and Inline Elements)

Let's understand block and inline elements using the below examples:

让我们使用以下示例了解block和inline元素：

输出代码示例： (Code Sample with Output:)

块级元素： (Block-Level Element:)

A Block-level element occupies the entire space of the parent (container) such as <div> and <p> in the example .

块级元素占据了父级(容器)的整个空间，例如示例中的<div>和<p> 。

Note that both <div> and <p> start from a new line each time, forming a block-like structure. Block-level elements begin on new lines.

请注意， <div>和<p>每次都从新行开始，形成块状结构。 块级元素从新行开始。

Common block-level elements are <div>,<p>,<article>,<section>,<figure>,<footer> etc.

常见的块级元素为<div> ， <p> ， <article> ， <section> ， <figure>和<footer>等。

内联元素： (Inline Element:)

Inline as the name says “included as a part of the main text and not as a separate section”. Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines.

内联顾名思义是“包含在正文中，而不是单独的部分”。 内联元素根据需要在主元素定义的空间内占据空间。 与块级元素不同，它们不是从新行开始。

Some of the inline elements are <a>,<span>,<img>,<code>,<cite>,<button>,<input> etc.

一些内联元素是<a> ， <span> ， <img> ， <code> ， <cite> ， <button> ， <input>等。

输出代码示例： (Code Sample with Output:)

Note : Block-level elements may contain other block-level elements or inline elements. Inline elements cannot contain block-level elements.

注意 ：块级元素可能包含其他块级元素或内联元素。 内联元素不能包含块级元素。

HTML5中的变化 (Changes In HTML5)

While an understanding of block and inline elements is still relevant, you should be aware that these terms were defined in prior versions of the HTML specification.

尽管对block和inline元素的理解仍然很重要，但是您应该知道这些术语是在HTML规范的先前版本中定义的。

In HTML5, a more complex set of “content categories” replaces block-level and inline elements. Block-level elements are largely placed in the “flow content” category in HTML5, while inline elements correspond to the “phrasing content” category.

在HTML5中，一组更复杂的“内容类别”代替了块级元素和内联元素。 块级元素主要位于HTML5的“流内容”类别中，而内联元素则对应于“短语内容”类别。

For more information on the new content categories in HTML5, including flow content and phrasing content, refer to the Content categories page on the Mozilla Developer Network.

有关HTML5中新内容类别(包括流内容和措辞内容)的更多信息，请参阅Mozilla开发人员网络上的 “ 内容类别”页面。

Read more about HTML here.

在此处阅读有关HTML的更多信息。

翻译自: https://www.freecodecamp.org/news/inline-elements-and-block-elements-in-html-explained/

html块状元素和内联元素