HTML基础：2大类区块元素详解

2024-03-26 07:40:03
开发
17

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端程序媛。

今天聊聊区块元素。

区块元素分为 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 文档中扮演着不同但同样重要的角色，合理运用它们可以更好地构建具有良好结构和视觉效果的网页内容。

ok,以上，本文完。

原文地址:https://blog.csdn.net/u013179804/article/details/137027818 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1772408131599601664.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

HTML基础：2大类区块元素详解

2 类元素

如何判断？

总结

相关推荐

最近更新

热门阅读