HTML 块级元素和内联元素
本文说明了 HTML 块级元素和内联元素。
这解释了块级元素和内联元素之间的区别，以及主要的块级元素和内联元素。
YouTube Video
块级元素和行内元素
HTML有两种主要的元素类别，它们决定了如何在屏幕上显示：'块级元素'和'内联元素'。这些元素在页面布局中起着重要作用，并直接影响它们的定位方式。在这里，我们将详细解释每种元素的特点和使用方法。
什么是块级元素？
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>块级元素通常占据页面的整个宽度，并与其他元素分开显示在单独的行上。这些元素可以包含其他块级元素或内联元素，并定义文档的更大结构。
功能：
- 这些元素从新的一行开始，并尽可能扩展宽度（通常是父元素的整个宽度）。
- 它们与其他块级元素在垂直方向上分开，并且之间会应用边距。
- 它们可以包含其他块或内联元素。
在此，使用了以下块级元素：。
<div>标签通常用于构建布局。<p>标签用于定义段落。<h1>到<h6>是用于定义标题的元素。<h1>是最大的标题，<h6>是最小的标题。<ul>标签用于创建一个无序列表。<ol>标签用于创建一个有序列表。<section>标签定义文档中的一个部分。
什么是内联元素？
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>内联元素与其他元素显示在同一行，通常只占用其内容所需的宽度。这些元素被视为文本的一部分，与块级元素不同，它们不会占据整个一行。
功能：
- 元素出现在同一行，并与其他内联元素并排放置。
- 宽度由元素的内容（文本或图像）决定。
- 它们可以包含在块级元素内部，但块级元素不能包含在内联元素内部。
在此，使用了以下内联元素：。
<span>标签用于以特定样式强调文本的一部分。<a>标签定义超链接。<img>标签是用于嵌入图像的元素。<strong>突出显示重要文本（通常以粗体显示）。<em>表示强调的文本（通常以斜体显示）。
块级元素和内联元素之间的差异
- 显示方式：块级元素以新行显示并占据页面的全部宽度，而内联元素与其他元素显示在同一行，其宽度由内容决定。
- 内部元素的处理：块级元素可以包含其他块级元素以及内联元素，但内联元素不能包含块级元素。
- 布局角色：块级元素主要用于创建页面的布局结构，而内联元素定义诸如文本和链接等小元素。
区分的关键点
创建布局：使用诸如<div>、<section>、<article>这样的块级元素来定义大部分和内容块。
文本修饰和链接：使用诸如<span>、<a>、<strong>、<em>这样的内联元素来修饰文本部分或添加链接。
混合使用块级元素和内联元素
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- 块级元素如
<main>、<header>和<section>，它们通常渲染在新的一行上，占据其父元素的整个宽度。 - 内联元素如
<a>、<strong>、<span>和<img>，它们放置在行内，不占据块级元素的全部宽度。
在块级元素中包含内联元素是一种常见模式。例如，通常在段落（<p>）中包含链接（<a>）或强调（<strong>）。然而，由于无法在内联元素中包含块级元素，因此正确使用它们非常重要。
总结
块级元素和内联元素是两种基本的HTML元素类型，每种元素都有其自身的作用。块级元素构成页面布局的基础，而内联元素用于装饰和精细操作其中的内容。理解并正确使用这两种类型的元素可以实现高效的HTML编码。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。