Html 简明教程

HTML - Block and Inline Elements

每个 HTML 元素都具有自己的显示值，具体取决于元素的类型。块级元素用于创建网页的逻辑和语义布局。它们有助于将内容组织成有意义的部分，并使浏览器、搜索引擎和站点访问者更容易理解网页不同部分的结构和含义。内联元素用于制作有用的块元素，例如添加锚链接。

Every HTML element has it’s own display value depending on the type of elemment. Block elements used to creat logical and semantic layout of a web page. They help to organize the content into meaningful sections and make it easier for browsers, search engines, and site visitors to understand the structure and meaning of different parts of the web page. Inline elements are used to make useful block element, like adding anchor links.

在 HTML 中，块被各种元素包围，例如 * <div>* 、 * <p>* 、 * <table>* 等。所有 HTML 元素都可以分为两类。

In HTML, the blocks are enclosed by various elements, such as <div>, <p>, <table> and so on. All the HTML elements can be categorized into two categories.

Block Elements
Inline Elements

Block Elements

Block level elements 块级元素 会在屏幕上显示，好像它们自身前后均带有换行符一样。下面列出了一些块元素。

Block level elements appear on the screen as if they have a line break before and after them. A few block elements are listed below.

List of HTML Block Elements

下面提到的所有元素都是块级元素，它们都以自身的新行开头，并且跟随它们的任何内容都会出现在下一行。

Below mentioned all the elements are block level elements, they all start with a new line on their own, and anything that follows them appears on the next line.

HTML Block Elements

Example of block level Elements

在此示例中，我们将使用一些块级元素。在执行下面的 HTML 代码后，它将产生一个标题和两个由水平线分隔的段落

In this example, we are going to use some of the block level elements. On executing the below HTML code, it will produce one heading and two paragraphs separated by a horizontal line

<!DOCTYPE html>
<html>

<head>
    <title>HTML Block Level Elements</title>
</head>

<body>
   <h3>HTML Block Level Elements</h3>
   <p>
      This line will appear in the next line
      after Heading.
   </p>
   <hr>
   <p>
      This line will appear after Horizontal
      Line.
   </p>
</body>

</html>

Inline Elements

另一方面，内联元素可以出现在同一行内，并且不会自行开始新行。一些常见的内联元素如下：

Inline elements, on the other hand, can appear within the same line and do not start a new line on their own. Some common inline elements are as follows:

List of HTML Inline Elements

下面提到的所有元素都是内联元素，它们并没有以自身的新行开头。

Below mentioned all the elements are inlnine elements, they did not start with a new line on their own.

HTML Inline Elements

Example of Inline Elements

在以下示例中，我们将演示如何使用一些内联元素。下面的代码将生成粗体行和斜体行。

In the following example, we are going to illustrates the use of a few inline elements. The below code will generate a bold line and an italic line.

<!DOCTYPE html>
<html>

<head>
    <title>HTML inline Element</title>
</head>

<body>
    <h3>Inline Elements in HTML</h3>
    <!-- Using <b> inline element -->
    <p>This <b>paragraph</b> is bold. </p>
    <!-- Using <i> inline element  -->
    <p>This is an <i>italic</i> paragraph.</p>
</body>

</html>

Grouping HTML Block and Inline Elements

我们有两种方法来组合这些元素；

There are two ways to group these elements;

Using <div> Tag
Using <span> Tag

Grouping using <div> Tag

<div> 标签是块级元素，在分组各种其他 HTML 标签和对元素组应用 CSS 时发挥着重要作用。即使现在 <div> 标签也可以用于创建网页布局，我们可以在其中定义网页的不同部分（左、右、上等）。此标签不会在块上提供任何视觉变化，但与 CSS 一起使用时却更有意义。

The <div> tag is a block level element which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the web page. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Example

以下是 * <div>* 标签的简单示例。我们将在单独的章节中学习级联样式表 (CSS)，但我们在此处使用它来展示 <div> 标签的使用 −

Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <div> tag −

<!DOCTYPE html>
<html>
<head>
   <title>HTML div Tag</title>
</head>
<body>
   <!-- First group of tags -->
   <div style="color:red">
      <h4>This is first group</h4>
      <p>Following is a list of vegetables</p>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </div>
   <!-- Second group of tags -->
   <div style="color:green">
      <h4>This is second group</h4>
      <p>Following is a list of fruits</p>
      <ul>
         <li>Apple</li>
         <li>Banana</li>
         <li>Mango</li>
         <li>Strawberry</li>
      </ul>
   </div>
</body>
</html>

Grouping using using <span> Tag

HTML * <span>* 是一个内联元素，可用于对 HTML 文档中的内联元素进行分组。此标签也不会在块上提供任何视觉变化，但与 CSS 一起使用时却更有意义。

The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.

<span> 标签和 <div> 标签之间的区别在于， <span> 标签用于内联元素，而 <div> 标签用于块级元素。

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements.

Example

以下是 <span> 标签的简单示例。我们将在单独的章节中学习级联样式表 (CSS)，但我们在此处使用它来展示 <span> 标签的使用。

Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <span> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML span Tag</title>
</head>
<body>
   <p>
      This is <span style="color:red">red</span>
      and this is <span style="color:green">green</span>
   </p>
</body>
</html>