<div> 是 HTML 中的一个块级元素标签，用于将内容分组。它本身没有特定的语义含义，通常用作容器来组织页面结构，便于应用样式或操作 JavaScript。

基本语法

<div>
  内容或其他 HTML 元素
</div>

特性

  1. 块级元素：
    • <div> 默认是块级元素，每个 <div> 占用一整行。
  2. 无语义：
    • <div> 本身没有语义，仅用于结构化内容。
    • 建议结合 CSS 类或 ID 为其添加功能。
  3. 支持所有全局属性：
    • 可以使用 class、id、style 等属性。

常见用途

  1. 页面布局： 使用 <div> 作为页面结构的主要布局容器。

    <div class="header">头部</div>
<div class="main-content">主要内容</div>
<div class="footer">底部</div>

  2. CSS 样式化： 给 <div> 添加样式，用于控制页面的外观。

    <div style="background-color: lightblue; padding: 20px;">
  这是一个带样式的 div
</div>

  3. JavaScript 操作： 可以用 JavaScript 操作 <div> 元素，动态更新内容或样式。

    <div id="myDiv">点击按钮改变我</div>
<button onclick="changeText()">点我</button>
<script>
  function changeText() {
    document.getElementById("myDiv").innerHTML = "文本已改变！";
  }
</script>

  4. 嵌套其他元素： <div> 常用来包裹其他元素，形成一个逻辑分组。

    <div class="card">
  <h3>标题</h3>
  <p>一些描述文字</p>
</div>

与其他标签的区别

  • <div> 是块级元素，相比于内联元素（如 <span>），在视觉上会换行。
  • 与 <section>、<article> 等语义化标签不同，<div> 没有语义，适合用在需要容器但没有特定含义的场景。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Div 示例</title>
  <style>
    .container {
      width: 80%;
      margin: auto;
      padding: 10px;
      border: 1px solid #ccc;
    }
    .header, .footer {
      background: #f0f0f0;
      padding: 10px;
      text-align: center;
    }
    .content {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">这是头部</div>
    <div class="content">这是内容区域</div>
    <div class="footer">这是底部</div>
  </div>
</body>
</html>

在上述示例中，<div> 被用于组织结构，配合 CSS 实现样式布局。 1.webp