区块元素分为 2 大类,块级元素和内联元素,它们有着不同的特点和用途。
那我们一起来看看吧。
2 类元素
一、块级元素
常见的 HTML 块级元素包括但不限于:
- <div>:用于创建块级容器,通常用于组织和布局页面内容。
- <p>:用于表示段落文本,每个段落通常占据一行。
- <h1> ~ <h6>:用于表示标题,级别从大到小依次递减,一般用于页面的标题结构。
- <ul>:无序列表,用于显示项目之间没有顺序关系的内容。
- <ol>:有序列表,用于显示项目之间有顺序关系的内容。
- <li>:列表项,通常作为<ul>或<ol>的子元素使用。
综合运用这些块级元素,可以创建一个简单的 HTML 页面示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>HTML块级元素示例</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- }
- .box {
- background-color: #f0f0f0;
- padding: 10px;
- margin-bottom: 20px;
- border: 1px solid #ccc;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>HTML块级元素示例</h1>
- <div class="box">
- <p>这是一个段落文本。</p>
- <ul>
- <li>无序列表项1</li>
- <li>无序列表项2</li>
- <li>无序列表项3</li>
- </ul>
- </div>
- <div class="box">
- <h2>这是一个标题</h2>
- <ol>
- <li>有序列表项1</li>
- <li>有序列表项2</li>
- <li>有序列表项3</li>
- </ol>
- </div>
- </div>
- </body>
- </html>
-
这个示例展示了如何使用<div>、<p>、<h1>、<h2>、<ul>、<ol>和<li>等块级元素,通过 CSS 设置样式实现页面布局和内容展示。
二、内联元素
常见的 HTML 内联元素有:
- <span>:用于对文本进行样式化或者添加额外的标记,是最常见的内联元素之一。
- <a>:表示超链接,用于跳转到其他页面或者下载资源。
- <strong>:表示强调文本,通常呈现为粗体显示。
- <em>:表示强调文本,通常呈现为斜体显示。
以下是一个内联元素的 HTML 简单案例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>HTML内联元素示例</title>
- <style>
- .container {
- text-align: center;
- padding: 20px;
- border: 1px solid #ccc;
- }
- .link {
- color: blue;
- text-decoration: underline;
- margin-right: 20px;
- }
- .emphasis {
- font-style: italic;
- }
- .highlight {
- background-color: yellow;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <span class="link"><a href="#">链接文本</a></span>
- <span class="emphasis">强调文本</span>
- <span class="highlight">高亮文本</span>
- <p>这是一个内联元素示例,展示了内联元素的特点和样式效果。</p>
- </div>
- </body>
- </html>
-
在这个案例中,<span>元素用于包裹内联元素,并通过 CSS 样式控制了内联元素的颜色、字体样式、背景色等效果,展示了内联元素的特点和样式控制方法。
那综合下来,块级元素和内联元素在 HTML 中有哪些不同呢?主要包括以下几个方面:
显示特点:
- 块级元素默认占据一行,即它们会独占一行空间,垂直排列。可以设置宽高,边距、内边距、边框等样式属性。
- 内联元素默认不会独占一行空间,它们可以在同一行内水平排列。
允许嵌套的元素:
- 块级元素可以包含其他块级元素和内联元素,可以嵌套形成更复杂的结构;
- 内联元素只能包含其他内联元素或文本内容,不能包含块级元素。
如何判断?
那,这么多我记不住是块元素还是内联元素,怎么办?
可以通过在浏览器中,按 F12 打开元素面板, 在开发者工具模式下,具体怎么看呢,有 3 个方法:
1、悬停查看:
在 Elements 面板中选中要查看的元素,比如 div。
悬停在该元素上,通常会有一个高亮的方框显示出来。
如果元素是块级元素,该方框通常会占据区域块一整行的宽度;如果是内联元素,该方框通常只会包裹住元素的内容。
2、计算框模型:
在 Elements 面板中选中要查看的元素。
在样式部分中查找 "盒模型" 或 "Box Model",可以看到该元素的盒模型信息。
如果是块级元素,通常会显示正常的盒模型,包括内容区、内边距、边框和外边距,有宽高,如图。

如果是内联元素,通常只有内容区和可能的内边距,如图。

3、检查元素面板:
在浏览器中右键点击要查看的元素,选择 "检查" 或 "元素"- "计算样式"。
在 Elements 面板中选中要查看的元素,查看其样式部分。
如果元素是块级元素,通常会显示 display: block;,就这么理解,block 就是块。

如果是内联元素,通常会显示 display: inline;,inline 就是内联,如图。

通过以上,可以很方便地查看一个元素是块级元素还是内联元素,帮助开发者更好地理解和调试页面的结构和样式。
工具不熟练,怎么办?做页面的时候,会经常用调试工具的,慢慢就熟练了。
总结
综上,块级元素和内联元素在 HTML 文档中扮演着不同但同样重要的角色,合理运用它们可以更好地构建具有良好结构和视觉效果的网页内容。